- Add Readme
- Fix outputfile name
This commit is contained in:
Faris Ansari 2017-09-24 23:41:03 +05:30
parent 3356b75744
commit 3c92ddab41
5 changed files with 631 additions and 665 deletions

112
README.md
View File

@ -1,83 +1,47 @@
# Webpack library starter # ReGrid
Webpack based boilerplate for producing libraries (Input: ES6, Output: universal library) A modern datatable library for the web
## Features ## Features
* Webpack 3 based. * Resizable columns
* ES6 as a source. * Sorting
* Exports in a [umd](https://github.com/umdjs/umd) format so your library works everywhere. * Custom formatted data
* ES6 test setup with [Mocha](http://mochajs.org/) and [Chai](http://chaijs.com/). * In place editing
* Linting with [ESLint](http://eslint.org/). * Efficient rendering of large data
## Process ## Usage
```
ES6 source files
|
|
webpack
|
+--- babel, eslint
|
ready to use
library
in umd format
```
*Have in mind that you have to build your library before publishing. The files under the `lib` folder are the ones that should be distributed.*
## Getting started
1. Setting up the name of your library
* Open `webpack.config.js` file and change the value of `libraryName` variable.
* Open `package.json` file and change the value of `main` property so it matches the name of your library.
2. Build your library
* Run `npm install` to get the project's dependencies
* Run `npm run build` to produce minified version of your library.
3. Development mode
* Having all the dependencies installed run `npm run dev`. This command will generate an non-minified version of your library and will run a watcher so you get the compilation on file change.
4. Running the tests
* Run `npm run test`
## Scripts
* `npm run build` - produces production version of your library under the `lib` folder
* `npm run dev` - produces development version of your library and runs a watcher
* `npm run test` - well ... it runs the tests :)
* `npm run test:watch` - same as above but in a watch mode
## Readings
* [Start your own JavaScript library using webpack and ES6](http://krasimirtsonev.com/blog/article/javascript-library-starter-using-webpack-es6)
## Misc
### An example of using dependencies that shouldnt be resolved by webpack, but should become dependencies of the resulting bundle
In the following example we are excluding React and Lodash:
```js ```js
{ var grid = new ReGrid({
devtool: 'source-map', wrapper: document.querySelector('#data-table'),
output: { data: {
path: '...', columns: [
libraryTarget: 'umd', 'Sr No.',
library: '...' 'First Name',
}, 'Last Name',
entry: '...', ],
... rows: [
externals: { [
react: 'react' '1',
// Use more complicated mapping for lodash. 'Don',
// We need to access it differently depending 'Joe'
// on the environment. ],
lodash: { [
commonjs: 'lodash', '2',
commonjs2: 'lodash', 'Mary',
amd: '_', 'Jane'
root: '_' ]
} ]
} }
} });
``` ```
## Contribute
* `npm run dev` - run this command and start hacking
* `npm run test` - run tests
## License
MIT

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

View File

@ -1,7 +1,7 @@
{ {
"name": "regrid", "name": "regrid",
"version": "0.0.1", "version": "0.0.1",
"description": "A modern grid for the web", "description": "A modern datatable library for the web",
"main": "lib/regrid.js", "main": "lib/regrid.js",
"scripts": { "scripts": {
"build": "webpack --env build", "build": "webpack --env build",
@ -48,7 +48,6 @@
"homepage": "https://github.com/netchampfaris/regrid", "homepage": "https://github.com/netchampfaris/regrid",
"dependencies": { "dependencies": {
"bootstrap": "^4.0.0-beta", "bootstrap": "^4.0.0-beta",
"jquery": "^3.2.1",
"popper.js": "^1.12.5" "popper.js": "^1.12.5"
} }
} }

View File

@ -5,15 +5,15 @@ const UglifyJsPlugin = webpack.optimize.UglifyJsPlugin;
const path = require('path'); const path = require('path');
const env = require('yargs').argv.env; // use --env with webpack 2 const env = require('yargs').argv.env; // use --env with webpack 2
let libraryName = 'ReGrid'; let libraryName = 'ReGrid', outputFile = 'regrid';
let plugins = [], outputFile; let plugins = [];
if (env === 'build') { if (env === 'build') {
plugins.push(new UglifyJsPlugin({ minimize: true })); plugins.push(new UglifyJsPlugin({ minimize: true }));
outputFile = libraryName + '.min.js'; outputFile += '.min.js';
} else { } else {
outputFile = libraryName + '.js'; outputFile += '.js';
} }
const config = { const config = {
@ -54,7 +54,10 @@ const config = {
modules: [path.resolve('./node_modules'), path.resolve('./src')], modules: [path.resolve('./node_modules'), path.resolve('./src')],
extensions: ['.json', '.js'] extensions: ['.json', '.js']
}, },
plugins: plugins plugins: plugins,
externals: {
jquery: 'jQuery'
}
}; };
module.exports = config; module.exports = config;