Switch from Browserify to Webpack

2016-09-22 00:57:22 -05:00 · 2016-09-22 00:57:22 -05:00 · c8f79dbd2d
parent 1ceb3f0129
commit c8f79dbd2d
5 changed files with 180 additions and 118 deletions
--- a/.babelrc
+++ b/.babelrc
@ -0,0 +1,8 @@
+{
+    "plugins": [
+        "transform-object-rest-spread"
+    ],
+    "presets": [
+        "es2015"
+    ]
+}
--- a/.jshintignore
+++ b/.jshintignore
@ -1,4 +1,5 @@
-node_modules
-libs
 debian
+libs
+node_modules
 analytics.js
+webpack.config.babel.js
--- a/68
+++ b/68
@ -1,20 +1,17 @@
-NPM = npm
-BROWSERIFY = ./node_modules/.bin/browserify
-NODE_SASS = ./node_modules/.bin/node-sass
-UGLIFYJS = ./node_modules/.bin/uglifyjs
-EXORCIST = ./node_modules/.bin/exorcist
+BUILD_DIR = build
 CLEANCSS = ./node_modules/.bin/cleancss
-STYLES_MAIN = css/main.scss
-STYLES_UNSUPPORTED_BROWSER = css/unsupported_browser.scss
+DEPLOY_DIR = libs
+LIBJITSIMEET_DIR = node_modules/lib-jitsi-meet/
+NODE_SASS = ./node_modules/.bin/node-sass
+NPM = npm
+OUTPUT_DIR = .
 STYLES_BUNDLE = css/all.bundle.css
 STYLES_DESTINATION = css/all.css
-DEPLOY_DIR = libs
-BROWSERIFY_FLAGS = -d
-OUTPUT_DIR = .
-LIBJITSIMEET_DIR = node_modules/lib-jitsi-meet/
-IFRAME_API_DIR = ./modules/API/external
+STYLES_MAIN = css/main.scss
+STYLES_UNSUPPORTED_BROWSER = css/unsupported_browser.scss
+WEBPACK = ./node_modules/.bin/webpack

-all: update-deps compile compile-iframe-api uglify uglify-iframe-api deploy clean
+all: update-deps compile deploy clean

 # FIXME: there is a problem with node-sass not correctly installed (compiled)
 # a quick fix to make sure it is installed on every update
@ -23,13 +20,11 @@ update-deps:
 	$(NPM) update && $(NPM) install node-sass

 compile:
-	$(BROWSERIFY) $(BROWSERIFY_FLAGS) -e app.js -s APP | $(EXORCIST) $(OUTPUT_DIR)/app.bundle.js.map > $(OUTPUT_DIR)/app.bundle.js
-
-compile-iframe-api:
-	$(BROWSERIFY) $(BROWSERIFY_FLAGS) -e $(IFRAME_API_DIR)/external_api.js -s JitsiMeetExternalAPI | $(EXORCIST) $(OUTPUT_DIR)/external_api.js.map > $(OUTPUT_DIR)/external_api.js
+	$(WEBPACK)
+	$(WEBPACK) -p

 clean:
-	rm -f $(OUTPUT_DIR)/app.bundle.* $(OUTPUT_DIR)/external_api.*
+	rm -fr $(BUILD_DIR)

 deploy: deploy-init deploy-appbundle deploy-lib-jitsi-meet deploy-css deploy-local

@ -37,20 +32,26 @@ deploy-init:
 	mkdir -p $(DEPLOY_DIR)

 deploy-appbundle:
-	cp $(OUTPUT_DIR)/app.bundle.min.js $(OUTPUT_DIR)/app.bundle.min.map \
-	$(OUTPUT_DIR)/app.bundle.js $(OUTPUT_DIR)/app.bundle.js.map \
-	$(OUTPUT_DIR)/external_api.js.map $(OUTPUT_DIR)/external_api.js \
-	$(OUTPUT_DIR)/external_api.min.map $(OUTPUT_DIR)/external_api.min.js \
-	$(OUTPUT_DIR)/analytics.js \
-	$(DEPLOY_DIR)
+	cp \
+		$(BUILD_DIR)/app.bundle.js \
+		$(BUILD_DIR)/app.bundle.js.map \
+		$(BUILD_DIR)/app.bundle.min.js \
+		$(BUILD_DIR)/app.bundle.min.map \
+		$(BUILD_DIR)/external_api.js \
+		$(BUILD_DIR)/external_api.js.map \
+		$(BUILD_DIR)/external_api.min.js \
+		$(BUILD_DIR)/external_api.min.map \
+		$(OUTPUT_DIR)/analytics.js \
+		$(DEPLOY_DIR)

 deploy-lib-jitsi-meet:
-	cp $(LIBJITSIMEET_DIR)/lib-jitsi-meet.min.js \
-	$(LIBJITSIMEET_DIR)/lib-jitsi-meet.min.map \
-	$(LIBJITSIMEET_DIR)/lib-jitsi-meet.js \
-	$(LIBJITSIMEET_DIR)/lib-jitsi-meet.js.map \
-	$(LIBJITSIMEET_DIR)/connection_optimization/external_connect.js \
-	$(DEPLOY_DIR)
+	cp \
+		$(LIBJITSIMEET_DIR)/lib-jitsi-meet.js \
+		$(LIBJITSIMEET_DIR)/lib-jitsi-meet.js.map \
+		$(LIBJITSIMEET_DIR)/lib-jitsi-meet.min.js \
+		$(LIBJITSIMEET_DIR)/lib-jitsi-meet.min.map \
+		$(LIBJITSIMEET_DIR)/connection_optimization/external_connect.js \
+		$(DEPLOY_DIR)

 deploy-css:
 	$(NODE_SASS) css/unsupported_browser.scss css/unsupported_browser.css ; \
@ -61,13 +62,6 @@ deploy-css:
 deploy-local:
 	([ ! -x deploy-local.sh ] || ./deploy-local.sh)

-uglify:
-	$(UGLIFYJS) -p relative $(OUTPUT_DIR)/app.bundle.js -o $(OUTPUT_DIR)/app.bundle.min.js --source-map $(OUTPUT_DIR)/app.bundle.min.map --in-source-map $(OUTPUT_DIR)/app.bundle.js.map
-
-uglify-iframe-api:
-	$(UGLIFYJS) -p relative $(OUTPUT_DIR)/external_api.js -o $(OUTPUT_DIR)/external_api.min.js --source-map $(OUTPUT_DIR)/external_api.min.map --in-source-map $(OUTPUT_DIR)/external_api.js.map
-
-
 source-package:
 	mkdir -p source_package/jitsi-meet/css && \
 	cp -r *.js *.html connection_optimization favicon.ico fonts images libs sounds LICENSE lang source_package/jitsi-meet && \
--- a/package.json
+++ b/package.json
@ -22,13 +22,13 @@
    "bootstrap": "3.1.1",
    "events": "*",
    "i18next-client": "1.7.7",
-    "jQuery-Impromptu": "git+https://github.com/trentrichardson/jQuery-Impromptu.git#v6.0.0",
+    "jQuery-Impromptu": "trentrichardson/jQuery-Impromptu#v6.0.0",
    "jquery": "~2.1.1",
    "jquery-contextmenu": "*",
    "jquery-ui": "1.10.5",
    "jssha": "1.5.0",
    "jws": "*",
-    "lib-jitsi-meet": "git+https://github.com/jitsi/lib-jitsi-meet.git",
+    "lib-jitsi-meet": "jitsi/lib-jitsi-meet",
    "postis": "^2.2.0",
    "retry": "0.6.1",
    "strophe": "^1.2.2",
@ -36,101 +36,39 @@
    "toastr": "^2.0.3"
  },
  "devDependencies": {
+    "babel-core": "*",
+    "babel-loader": "*",
+    "babel-plugin-transform-object-rest-spread": "*",
    "babel-polyfill": "*",
    "babel-preset-es2015": "*",
-    "babelify": "*",
-    "browserify": "11.1.x",
-    "browserify-css": "^0.9.2",
-    "browserify-shim": "^3.8.10",
+    "babel-register": "*",
    "clean-css": "*",
-    "exorcist": "*",
+    "css-loader": "*",
+    "expose-loader": "*",
+    "file-loader": "*",
+    "imports-loader": "*",
    "jshint": "2.8.0",
    "node-sass": "^3.8.0",
    "precommit-hook": "3.0.0",
-    "uglify-js": "2.4.24",
-
-    "babel-core": "*",
-    "babel-loader": "*",
-    "babel-register": "*",
    "string-replace-loader": "*",
+    "style-loader": "*",
    "webpack": "*"
  },
  "license": "Apache-2.0",
  "scripts": {
-    "lint": "./node_modules/.bin/jshint .",
+    "lint": "jshint .",
    "validate": "npm ls"
  },
  "pre-commit": [
    "lint"
  ],
-  "browserify": {
-    "transform": [
-      "browserify-shim",
-      "browserify-css",
-      [
-        "babelify",
-        {
-          "ignore": "node_modules"
-        }
-      ]
-    ]
-  },
-  "babel": {
-    "presets": [
-      "es2015"
-    ]
-  },
  "browser": {
-    "jquery": "./node_modules/jquery/dist/jquery.js",
-    "jquery-ui": "./node_modules/jquery-ui/jquery-ui.js",
-    "strophe": "./node_modules/strophe/strophe.js",
+    "aui-css": "./node_modules/@atlassian/aui/dist/aui/css/aui.min.css",
+    "aui-experimental-css": "./node_modules/@atlassian/aui/dist/aui/css/aui-experimental.min.css",
+    "autosize": "./node_modules/autosize/build/jquery.autosize.js",
+    "popover": "./node_modules/bootstrap/js/popover.js",
    "strophe-disco": "./node_modules/strophejs-plugins/disco/strophe.disco.js",
    "strophe-caps": "./node_modules/strophejs-plugins/caps/strophe.caps.jsonly.js",
-    "toastr": "./node_modules/toastr/toastr.js",
-    "tooltip": "./node_modules/bootstrap/js/tooltip.js",
-    "popover": "./node_modules/bootstrap/js/popover.js",
-    "jQuery-Impromptu": "./node_modules/jQuery-Impromptu/dist/jquery-impromptu.js",
-    "autosize": "./node_modules/autosize/build/jquery.autosize.js",
-    "aui": "./node_modules/@atlassian/aui/dist/aui/js/aui.js",
-    "aui-experimental": "./node_modules/@atlassian/aui/dist/aui/js/aui-experimental.js",
-    "aui-css": "./node_modules/@atlassian/aui/dist/aui/css/aui.min.css",
-    "aui-experimental-css": "./node_modules/@atlassian/aui/dist/aui/css/aui-experimental.min.css"
-  },
-  "browserify-shim": {
-    "jquery": [
-      "$"
-    ],
-    "strophe": {
-      "exports": "Strophe",
-      "depends": [
-        "jquery:$"
-      ]
-    },
-    "strophe-disco": {
-      "depends": [
-        "strophe:Strophe"
-      ]
-    },
-    "tooltip": {
-      "depends": "jquery:jQuery"
-    },
-    "popover": {
-      "depends": "jquery:jQuery"
-    },
-    "jQuery-Impromptu": {
-      "depends": "jquery:jQuery"
-    },
-    "aui-experimental": {
-      "depends": "aui:AJS"
-    },
-    "jquery-contextmenu": {
-      "depends": "jquery:jQuery"
-    },
-    "autosize": {
-      "depends": "jquery:jQuery"
-    },
-    "browserify-css": {
-        "autoInject": true
-    }
+    "tooltip": "./node_modules/bootstrap/js/tooltip.js"
  }
 }
--- a/webpack.config.babel.js
+++ b/webpack.config.babel.js
@ -0,0 +1,121 @@
+import path from 'path';
+import process from 'process';
+import webpack from 'webpack';
+
+const aui_css
+    = path.resolve(__dirname, './node_modules/@atlassian/aui/dist/aui/css/');
+const minimize
+    = process.argv.indexOf('-p') != -1
+        || process.argv.indexOf('--optimize-minimize') != -1;
+const strophe = /\/node_modules\/strophe(js-plugins)?\/.*\.js$/;
+
+// The base Webpack configuration to bundle the JavaScript artifacts of
+// jitsi-meet such as app.bundle.js and external_api.js.
+const config = {
+    devtool: 'source-map',
+    module: {
+        loaders: [{
+            // Transpile ES2015 (aka ES6) to ES5.
+
+            exclude: [
+                path.resolve(__dirname, './modules/RTC/adapter.screenshare.js'),
+                path.resolve(__dirname, './node_modules/')
+            ],
+            loader: 'babel',
+            test: /\.js$/
+        },{
+            // Expose jquery as the globals $ and jQuery because it is expected
+            // to be available in such a form by multiple jitsi-meet
+            // dependencies including AUI, lib-jitsi-meet.
+
+            loader: 'expose?$!expose?jQuery',
+            test: /\/node_modules\/jquery\/.*\.js$/
+        },{
+            // Disable AMD for the Strophe.js library or its imports will fail
+            // at runtime.
+
+            loader: 'imports?define=>false&this=>window',
+            test: strophe
+        },{
+            // Allow CSS to be imported into JavaScript.
+
+            loaders: [
+                'style',
+                'css'
+            ],
+            test: /\.css$/
+        },{
+            // Emit the static assets of AUI such as images that are referenced
+            // by CSS into the output path.
+
+            include: aui_css,
+            loader: 'file',
+            query: {
+                context: aui_css,
+                name: '[path][name].[ext]'
+            },
+            test: /\.(gif|png|svg)$/
+        }],
+        noParse: [
+            // Do not parse the files of the Strophe.js library or at least
+            // parts of the properties of the Strophe global variable will be
+            // missing and strophejs-plugins will fail at runtime.
+            strophe
+        ]
+    },
+    node: {
+        // Allow the use of the real filename of the module being executed. By
+        // default Webpack does not leak path-related information and provides a
+        // value that is a mock (/index.js).
+        __filename: true
+    },
+    output: {
+        filename: '[name]' + (minimize ? '.min' : '') + '.js',
+        libraryTarget: 'umd',
+        path: path.resolve(__dirname, './build'),
+        sourceMapFilename: '[name].' + (minimize ? 'min' : 'js') + '.map'
+    },
+    resolve: {
+        alias: {
+            aui:
+                '@atlassian/aui/dist/aui/js/aui'
+                    + (minimize ? '.min' : '')
+                    + '.js',
+            'aui-experimental':
+                '@atlassian/aui/dist/aui/js/aui-experimental'
+                    + (minimize ? '.min' : '')
+                    + '.js',
+            jquery: 'jquery/dist/jquery' + (minimize ? '.min' : '') + '.js',
+            'jQuery-Impromptu':
+                'jQuery-Impromptu/dist/jquery-impromptu'
+                    + (minimize ? '.min' : '')
+                    + '.js',
+        },
+        packageAlias: 'browser'
+    }
+};
+
+export default [{
+    // The Webpack configuration to bundle app.bundle.js (aka APP).
+
+    ...config,
+    entry: {
+       'app.bundle': './app.js'
+    },
+    output: {
+        ...config.output,
+        library: 'APP'
+    }
+}, {
+    // The Webpack configuration to bundle external_api.js (aka
+    // JitsiMeetExternalAPI).
+
+    ...config,
+    entry: {
+       'external_api': './modules/API/external/external_api.js'
+    },
+    output: {
+        ...config.output,
+        library: 'JitsiMeetExternalAPI'
+    }
+}];