正文
[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;
