Merge pull request #903 from jitsi/webpack

Switch from Browserify to Webpack

.babelrc

@@ -0,0 +1,8 @@
+{
+    "plugins": [
+        "transform-object-rest-spread"
+    ],
+    "presets": [
+        "es2015"
+    ]
+}

.jshintignore

@@ -1,4 +1,5 @@
-node_modules
-libs
 debian
+libs
+node_modules
 analytics.js
+webpack.config.babel.js

Makefile

@@ -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
-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
+NODE_SASS = ./node_modules/.bin/node-sass
+NPM = npm
+OUTPUT_DIR = .
+STYLES_BUNDLE = css/all.bundle.css
+STYLES_DESTINATION = css/all.css
+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,10 @@ 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) -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 +31,20 @@ 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.min.js \
+		$(BUILD_DIR)/app.bundle.min.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.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 +55,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 && \

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,95 +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"
+    "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"
   }
 }

webpack.config.babel.js

@@ -0,0 +1,119 @@
+import process from 'process';
+import webpack from 'webpack';
+
+const aui_css = __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: [
+                __dirname + '/modules/RTC/adapter.screenshare.js',
+                __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: __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'
+    }
+}];