84 lines
2.4 KiB
Markdown
84 lines
2.4 KiB
Markdown
# Webpack library starter
|
||
|
||
Webpack based boilerplate for producing libraries (Input: ES6, Output: universal library)
|
||
|
||
## Features
|
||
|
||
* Webpack 3 based.
|
||
* ES6 as a source.
|
||
* Exports in a [umd](https://github.com/umdjs/umd) format so your library works everywhere.
|
||
* ES6 test setup with [Mocha](http://mochajs.org/) and [Chai](http://chaijs.com/).
|
||
* Linting with [ESLint](http://eslint.org/).
|
||
|
||
## Process
|
||
|
||
```
|
||
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 shouldn’t be resolved by webpack, but should become dependencies of the resulting bundle
|
||
|
||
In the following example we are excluding React and Lodash:
|
||
|
||
```js
|
||
{
|
||
devtool: 'source-map',
|
||
output: {
|
||
path: '...',
|
||
libraryTarget: 'umd',
|
||
library: '...'
|
||
},
|
||
entry: '...',
|
||
...
|
||
externals: {
|
||
react: 'react'
|
||
// Use more complicated mapping for lodash.
|
||
// We need to access it differently depending
|
||
// on the environment.
|
||
lodash: {
|
||
commonjs: 'lodash',
|
||
commonjs2: 'lodash',
|
||
amd: '_',
|
||
root: '_'
|
||
}
|
||
}
|
||
}
|
||
```
|