Migrate from Browserify to Webpack (#372)

* Migrate from Browserify to Webpack

close #371

 Author:    Guillaume Vincent <guillaume@oslab.fr>

* remove browserify and associated modules and update tests

Author: guillaumevincent

karma.conf.js

@@ -1,27 +1,31 @@
-module.exports = function(karma) {
+var webpackConfig = require('./webpack.config.js');
+
+module.exports = function (karma) {
     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: [
             'src/**/*.js',
             'test/**/*.js',
             './node_modules/phantomjs-polyfill/bind-polyfill.js'
         ],
 
-        exclude: ['test/module-systems.js'],
-
         preprocessors: {
-            'src/**/*.js' : ['browserify'],
-            'test/**/*.js': ['browserify']
+            'src/**/*.js': ['webpack'],
+            'test/**/*.js': ['webpack']
+        },
+
+        webpack: {
+            module: webpackConfig.module,
+            plugins: webpackConfig.plugins
         },
 
-        browserify: {
-            debug: true,
-            transform: ['babelify']
+        webpackMiddleware: {
+            stats: 'errors-only'
         },
 
         browsers: ['PhantomJS']
     });
-}
+};

package.json

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

webpack.config.js

@@ -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
+            })
+        ] : []
+};