Skip to content

Commit

Permalink
Merge pull request #347 from staminaloops/devTools
Browse files Browse the repository at this point in the history
Improved build system
  • Loading branch information
AllenFang committed Mar 22, 2016
2 parents 374ccd7 + 0d36243 commit 0e29899
Show file tree
Hide file tree
Showing 18 changed files with 1,303 additions and 1,325 deletions.
2 changes: 2 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -5,3 +5,5 @@ node_modules
*.sublime-workspace
*.idea
*.iml
lib/
npm-debug.log
1 change: 1 addition & 0 deletions .npmignore
Original file line number Diff line number Diff line change
Expand Up @@ -5,5 +5,6 @@ node_modules
*.sublime-workspace
*.idea
*.iml
jsonOutputWebpack.json

# generated
25 changes: 21 additions & 4 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -57,16 +57,24 @@ npm install react-bootstrap-table --save
```

### b.Import Module
Use react-bootstrap-table in your react app, you should import this component as first. About importing this component, there'r two way in the following you can choose:
##### Module(CommonJS/AMD)
To use react-bootstrap-table in your react app, you should import it first.
You can do this in two ways:

##### With a module bundler
With a module bundler like [webpack](https://webpack.github.io/) that supports either CommonJS or ES2015 modules, use as you would anything else.
You can include source maps on your build system to debug on development. Don't forget to Uglify on production.

```js
import {BootstrapTable, TableHeaderColumn} from 'react-bootstrap-table'; // in ECMAScript 6
// in ECMAScript 6
import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';
// or in ECMAScript 5
var ReactBSTable = require("react-bootstrap-table");
var ReactBSTable = require('react-bootstrap-table');
var BootstrapTable = ReactBSTable.BootstrapTable;
var TableHeaderColumn = ReactBSTable.TableHeaderColumn;
```
##### Browser global(window object)
In the `dist` folder you have a UMD bundle with source maps (`react-bootstrap-table.js`) as well as a minified version (`react-bootstrap-table.min.js`).

```html
<script src="path/to/react-bootstrap-table/dist/react-bootstrap-table.min.js" />
<script>
Expand All @@ -75,6 +83,15 @@ var TableHeaderColumn = ReactBSTable.TableHeaderColumn;
<script/>
```
The UMD build is also available on [npmcdn](https://npmcdn.com):
```html
// source maps: https://npmcdn.com/react-bootstrap-table/dist/react-bootstrap-table.js.map
<script src="https://npmcdn.com/react-bootstrap-table/dist/react-bootstrap-table.js"></script>
// or use the min version
<script src="https://npmcdn.com/react-bootstrap-table/dist/react-bootstrap-table.min.js"></script>
```

### c.Import CSS
Finally, you need to import the css file to your app, there are two css file you can choose.</br>
```react-bootstrap-table-all.min.css``` include toastr.</br>```react-bootstrap-table.min.css``` doesn't include toastr.</br>
Expand Down
Loading

0 comments on commit 0e29899

Please sign in to comment.