Git Product home page Git Product logo

babel-webpack-package-boilerplate's Introduction

babel-webpack-package-boilerplate

Now updated for webpack 2!

This project is meant to show how easy and useful it can be to use webpack as a tool-chain for npm packages.

Fun things in this project:

  • Source code and tests for the package are written with es2015+ and stage-0 features (specifically the features supported by the [env] and stage-0 presets for babel). See any *.js files in src for examples. See .babelrc for the babel configuration, and config/rules.js to see how babel was integrated into webpack.
  • Platform-specific polyfills and transpilation. Use of the [env] preset for babel allows webpack to avoid unused polyfills and source code transforms if the target platform supports them. See .babelrc to see how the preset was configured to support this.
  • Tree-shaking transpilation through webpack 2 and es2015+ modules. Due to the statically-analyzable module system provided by next-generation JavaScript, webpack can remove unused code and dependencies at transpiletime, resulting in smaller built artifacts.
  • Modules in lib directories can be loaded universally, like modules found in node_modules. See src/main.js and src/test/index.js for examples. See modules in config/resolve.js to see how this was configured.
  • Modules in src that end with *test.js and modules that are direct children of test directories can be run as mocha test modules, which will automatically be processed using webpack.

Getting Started

Clone the repository and install dependencies with npm.

$ git clone https://github.com/resisttheurge/babel-webpack-package-boilerplate.git
$ cd babel-webpack-package-boilerplate
$ npm install

Building

The build script defined in the package.json file uses webpack to transpile sources in the src directory. The successfully transpiled sources are placed in the dist folder. This folder is preserved by npm, but ignored by git.

$ npm run build

Watch-style building is supported by the build:watch script.

$ npm run build:watch

The prestart, and prepublish scripts defined in the package.json file reference the build script, so there's no need to run the build script manually in those situations.

Running

Run the project with npm start.

$ npm start

  hello, world!

As said before, this will automatically run the build script first.

Testing

Test the project with npm test.

$ npm test

Watch-style testing is supported by the test:watch script.

$ npm run test:watch

Publishing

Publish the project on the local machine (for testing) with npm install.

$ npm install . -g
$ babel-webpack-package-boilerplate

  hello, world!

Publish the package globally with npm publish.

$ npm publish
$ npm install -g babel-webpack-package-boilerplate
$ babel-webpack-package-boilerplate

  hello, world!

In both cases, again, this will automatically run the build script after installation.

babel-webpack-package-boilerplate's People

Contributors

resisttheurge avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

Forkers

kostkobv azeem91

babel-webpack-package-boilerplate's Issues

Question: Please clarify purpose and correct usage of certain source files.

I'm building a simple package, that only has one exported function. I am a bit confused by the following files and how to use them:

src/lib/index.js
src/lib/[moduleName]/index.js
src/main.js

If you were building a module with one source file and one named export, how would you structure the code and why?

Thanks!

Question: How to add lodash-webpack-plugin to the webpack config?

Thanks for the fantastic boilerplate. I'm new to webpack, and was wondering if you could point me in the right direction?

I want to add the lodash-webpack-plugin to the webpack build pipeline, but don't really understand your webpack config file setup. The docs want me to modify the webpack.config.js as follows:

var webpack = require('webpack');
 
module.exports = {
  'module': {
    'loaders': [{
      'loader': 'babel',
      'test': /\.js$/,
      'exclude': /node_modules/,
      'query': {
        'plugins': ['lodash'],
        'presets': ['es2015']
      }
    }]
  },
  'plugins': [
    new LodashModuleReplacementPlugin,
    new webpack.optimize.OccurrenceOrderPlugin,
    new webpack.optimize.UglifyJsPlugin
  ]
};

Can you suggest how to do this, within this boilerplate?

Just found this in the package.json docs...

You might be interested in this:

directories.bin

If you specify a bin directory in directories.bin, all the files in that folder will be added.

Because of the way the bin directive works, specifying both a bin path and setting directories.bin is an error. If you want to specify individual files, use bin, and for all the files in an existing bin directory, use directories.bin.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.