码迷,mamicode.com
首页 > 编程语言 > 详细

[Javascript] Add a browser build to an npm module

时间:2016-05-02 00:37:59      阅读:243      评论:0      收藏:0      [点我收藏+]

标签:

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;

 

[Javascript] Add a browser build to an npm module

标签:

原文地址:http://www.cnblogs.com/Answer1215/p/5451471.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!