Migrate from Browserify to Webpack (#372)

* Migrate from Browserify to Webpack

close https://github.com/zenorocha/clipboard.js/issues/371

 Author:    Guillaume Vincent <guillaume@oslab.fr>

* remove browserify and associated modules and update tests
This commit is contained in:
Guillaume Vincent 2018-03-01 02:02:54 +01:00 committed by Zeno Rocha
parent 0c3bce265f
commit 2d5b2df811
3 changed files with 70 additions and 36 deletions

View File

@ -1,8 +1,10 @@
var webpackConfig = require('./webpack.config.js');
module.exports = function (karma) { module.exports = function (karma) {
karma.set({ karma.set({
plugins: ['karma-browserify', 'karma-chai', 'karma-sinon', 'karma-mocha', 'karma-phantomjs-launcher'], plugins: ['karma-webpack', 'karma-chai', 'karma-sinon', 'karma-mocha', 'karma-phantomjs-launcher'],
frameworks: ['browserify', 'chai', 'sinon', 'mocha'], frameworks: ['chai', 'sinon', 'mocha'],
files: [ files: [
'src/**/*.js', 'src/**/*.js',
@ -10,18 +12,20 @@ module.exports = function(karma) {
'./node_modules/phantomjs-polyfill/bind-polyfill.js' './node_modules/phantomjs-polyfill/bind-polyfill.js'
], ],
exclude: ['test/module-systems.js'],
preprocessors: { preprocessors: {
'src/**/*.js' : ['browserify'], 'src/**/*.js': ['webpack'],
'test/**/*.js': ['browserify'] 'test/**/*.js': ['webpack']
}, },
browserify: { webpack: {
debug: true, module: webpackConfig.module,
transform: ['babelify'] plugins: webpackConfig.plugins
},
webpackMiddleware: {
stats: 'errors-only'
}, },
browsers: ['PhantomJS'] browsers: ['PhantomJS']
}); });
} };

View File

@ -4,7 +4,8 @@
"description": "Modern copy to clipboard. No Flash. Just 2kb", "description": "Modern copy to clipboard. No Flash. Just 2kb",
"repository": "zenorocha/clipboard.js", "repository": "zenorocha/clipboard.js",
"license": "MIT", "license": "MIT",
"main": "lib/clipboard.js", "main": "dist/clipboard.js",
"module": "src/clipboard.js",
"keywords": [ "keywords": [
"clipboard", "clipboard",
"copy", "copy",
@ -16,33 +17,30 @@
"tiny-emitter": "^2.0.0" "tiny-emitter": "^2.0.0"
}, },
"devDependencies": { "devDependencies": {
"babel-cli": "^6.24.1", "babel-cli": "^6.5.1",
"babel-core": "^6.24.1", "babel-core": "^6.5.2",
"babel-plugin-transform-es2015-modules-umd": "^6.24.1", "babel-loader": "^6.2.10",
"babel-preset-es2015": "^6.24.1", "babel-plugin-transform-es2015-modules-umd": "^6.5.0",
"babelify": "^7.3.0", "babel-preset-es2015": "^6.5.0",
"bannerify": "Vekat/bannerify#feature-option", "chai": "^3.4.1",
"browserify": "^14.3.0", "cross-env": "^3.1.4",
"chai": "^3.5.0", "karma": "^1.3.0",
"install": "^0.9.6",
"karma": "^1.6.0",
"karma-browserify": "^5.1.1",
"karma-chai": "^0.1.0", "karma-chai": "^0.1.0",
"karma-mocha": "^1.3.0", "karma-mocha": "^1.2.0",
"karma-phantomjs-launcher": "^1.0.4", "karma-phantomjs-launcher": "^1.0.0",
"karma-sinon": "^1.0.5", "karma-sinon": "^1.0.4",
"mocha": "^3.3.0", "karma-webpack": "^2.0.2",
"phantomjs-prebuilt": "^2.1.14", "mocha": "^3.1.2",
"sinon": "^2.2.0", "phantomjs-prebuilt": "^2.1.4",
"uglify-js": "^2.8.22", "sinon": "^1.17.2",
"watchify": "^3.9.0" "webpack": "^2.2.1"
}, },
"scripts": { "scripts": {
"build": "npm run build-debug && npm run build-min", "build": "npm run build-debug && npm run build-min",
"build-debug": "browserify src/clipboard.js -s Clipboard -t [babelify] -p [bannerify --file .banner ] -o dist/clipboard.js", "build-debug": "webpack",
"build-min": "uglifyjs dist/clipboard.js --comments '/!/' -m screw_ie8=true -c screw_ie8=true,unused=false -o dist/clipboard.min.js", "build-min": "cross-env NODE_ENV=production webpack --optimize-minimize",
"build-watch": "watchify src/clipboard.js -s Clipboard -t [babelify] -o dist/clipboard.js -v", "build-watch": "webpack --watch",
"test": "karma start --single-run", "test": "karma start --single-run",
"prepublish": "babel src --out-dir lib" "prepublish": "npm run build"
} }
} }

32
webpack.config.js Normal file
View File

@ -0,0 +1,32 @@
var path = require('path');
var webpack = require('webpack');
var production = process.env.NODE_ENV === 'production' || false;
module.exports = {
entry: './src/clipboard.js',
output: {
filename: production ? 'clipboard.min.js' : 'clipboard.js',
path: path.resolve(__dirname, 'dist'),
library: 'Clipboard',
libraryTarget: 'umd'
},
module: {
rules: [
{test: /\.js$/, exclude: /node_modules/, loader: "babel-loader"}
]
},
plugins: production ? [
new webpack.optimize.UglifyJsPlugin({
beautify: false,
mangle: {
screw_ie8: true,
keep_fnames: true
},
compress: {
screw_ie8: true
},
comments: false
})
] : []
};