https://github.com/alacroix/webpack-library-starter

https://github.com/alacroix/webpack-library-starter

es6 standard starter umd webpack2

Last synced: 21 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/alacroix/webpack-library-starter
• Owner: alacroix
• License: mit
• Created: 2017-05-17T19:52:45.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2020-06-01T01:18:55.000Z (over 4 years ago)
• Last Synced: 2024-12-18T18:46:48.200Z (about 1 month ago)
• Topics: es6, standard, starter, umd, webpack2
• Language: JavaScript
• Size: 188 KB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 15
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Webpack library starter

[![Build Status](https://travis-ci.org/alacroix/webpack-library-starter.svg?branch=master)](https://travis-ci.org/alacroix/webpack-library-starter)

[![Coverage Status](https://coveralls.io/repos/github/alacroix/webpack-library-starter/badge.svg?branch=master)](https://coveralls.io/github/alacroix/webpack-library-starter?branch=master)

[![devDependencies Status](https://david-dm.org/alacroix/webpack-library-starter/dev-status.svg)](https://david-dm.org/alacroix/webpack-library-starter?type=dev)

[![Greenkeeper badge](https://badges.greenkeeper.io/alacroix/webpack-library-starter.svg)](https://greenkeeper.io/)

[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

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

## Features

* Webpack 2 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: '_'

    }

  }

}

```