[Javascript] Add a browser build to an npm module

In this lesson, we‘re going to use webpack to create a UMD (Universal Module Definition) build of our module so users can consume it in a browser.

Install:

npm install --save-dev npm-run-all cross-env rimraf webpack

Package.json:

  "scripts": {
    "build": "npm-run-all --parallel build:*",
    "prebuild": "rimraf dist",
    "build:main": "cross-env NODE_ENV=production webpack",
    "build:umd": "cross-env NODE_ENV=umd webpack --output-filename index.umd.js",
    "build:umd.min": "cross-env NODE_ENV=umd webpack --output-filename index.umd.min.js -p"
  },

webpack.config.js:

// Modify the production path to dist folder
if (process.env.NODE_ENV === ‘production‘) {
    config.output.path = path.join( __dirname, ‘dist‘ );
    config.plugins.push( new webpack.optimize.UglifyJsPlugin( { output: { comments: false } } ) );
    config.devtool = ‘source-map‘;
}

if (process.env.NODE_ENV === ‘umd‘) {
    config.output.path = path.join( __dirname, ‘dist‘ );
    config.output.libraryTarget = ‘umd‘;
    config.output.library = ‘TtmdTable‘;
    config.devtool = ‘source-map‘;
}

After publish the module, can download the file from npmcdn.com.

_____

var webpack = require(‘webpack‘);
var path = require(‘path‘);
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var HtmlWebpackPlugin = require(‘html-webpack-plugin‘);
var CopyWebpackPlugin = require(‘copy-webpack-plugin‘);
var postcss = require(‘postcss-loader‘);
var autoprefixer = require(‘autoprefixer‘);
var ENV = process.env.NODE_ENV;

var config = {
    debug: true,
    devtool: ‘cheap-source-map‘,
    context: __dirname,
    output: {
        path: __dirname,
        filename: ‘angular-md-table.min.js‘,
        sourceMapFilename: ‘angular-md-table.min.js.map‘,
        publicPath: ‘./‘
    },
    entry: ‘./index.js‘,
    module: {
        loaders: [{
            test: /\.css$/,
            loader: ExtractTextPlugin.extract(‘style-loader‘, ‘css-loader!postcss-loader‘)
        }, {
            test: /\.scss$/,
            loader: ExtractTextPlugin.extract(‘style-loader‘, ‘css-loader!postcss-loader!sass-loader‘)
        }, {
            test: /\.js$/,
            loaders: [‘ng-annotate‘, ‘babel?presets[]=es2015,plugins[]=transform-runtime‘],
            exclude: /node_modules|bower_components/
        }, {
            test: /\.(woff|woff2|ttf|eot|svg|jpg|png)(\?]?.*)?$/,
            loader: ‘file-loader?name=res/[path][name].[ext]?[hash]‘
        }, {
            test: /\.html$/,
            loader: ‘html?removeEmptyAttributes=false&collapseWhitespace=false‘
        }, {
            test: /\.json$/,
            loader: ‘json‘
        }]
    },
    postcss: function() {
        return [autoprefixer];
    },
    plugins: [
        new webpack.optimize.OccurenceOrderPlugin(true),
        new webpack.DefinePlugin({
            MODE: {
                production: process.env.NODE_ENV === ‘production‘,
                dev: process.env.NODE_ENV === ‘development‘
            }
        }),
        new ExtractTextPlugin("index.min.css")
    ]
};

if (process.env.NODE_ENV === ‘production‘) {
    config.output.path = path.join( __dirname, ‘dist‘ );
    config.plugins.push( new webpack.optimize.UglifyJsPlugin( { output: { comments: false } } ) );
    config.devtool = ‘source-map‘;
}

if (process.env.NODE_ENV === ‘umd‘) {
    config.output.path = path.join( __dirname, ‘dist‘ );
    config.output.libraryTarget = ‘umd‘;
    config.output.library = ‘TtmdTable‘;
    config.devtool = ‘source-map‘;
}

module.exports = config;