https://github.com/xlsdg/webpack2-library-starter

Webpack2 based boilerplate for producing libraries (Input: ES6, Output: universal library)
https://github.com/xlsdg/webpack2-library-starter

es6 eslint library-starter umd-modules webpack2

Last synced: about 2 months ago
JSON representation

Webpack2 based boilerplate for producing libraries (Input: ES6, Output: universal library)

• Host: GitHub
• URL: https://github.com/xlsdg/webpack2-library-starter
• Owner: xlsdg
• License: mit
• Created: 2017-02-08T01:54:38.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2017-04-25T03:23:00.000Z (about 9 years ago)
• Last Synced: 2025-02-01T06:42:29.167Z (over 1 year ago)
• Topics: es6, eslint, library-starter, umd-modules, webpack2
• Language: JavaScript
• Size: 11.7 KB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# Webpack2 library starter

> Webpack2 based boilerplate for producing libraries (Input: ES6, Output: universal library)

Forked from [webpack-library-starter](https://github.com/krasimir/webpack-library-starter).

## Features

* Webpack2 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 :)

## 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: '_'

    }

  }

}

```