From 1ceb3f0129dce899b03f24f7acbf2ccab0dafcdc Mon Sep 17 00:00:00 2001 From: Lyubomir Marinov Date: Tue, 20 Sep 2016 12:24:28 -0500 Subject: [PATCH 1/5] Switch lib-jitsi-meet from Browserify to Webpack Since the library lib-jitsi-meet does not publish its binaries, it is always been necessary to produce the binaries i.e. lib-jitsi-meet.js and lib-jitsi-meet.js as part of the npm install step. Which means that any modifications to the devDependencies of lib-jitsi-meet's package.json always have to be reflected in jitsi-meet's package.json. Because Webpack replaced Browserify in lib-jitsi-meet, Webpack has to become a devDependency of jitsi-meet. --- package.json | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index 57164364d..170d5ae30 100644 --- a/package.json +++ b/package.json @@ -47,7 +47,13 @@ "jshint": "2.8.0", "node-sass": "^3.8.0", "precommit-hook": "3.0.0", - "uglify-js": "2.4.24" + "uglify-js": "2.4.24", + + "babel-core": "*", + "babel-loader": "*", + "babel-register": "*", + "string-replace-loader": "*", + "webpack": "*" }, "license": "Apache-2.0", "scripts": { From c8f79dbd2ddb6668e262a0b0e4f2024d35042346 Mon Sep 17 00:00:00 2001 From: Lyubomir Marinov Date: Thu, 22 Sep 2016 00:57:22 -0500 Subject: [PATCH 2/5] Switch from Browserify to Webpack --- .babelrc | 8 +++ .jshintignore | 5 +- Makefile | 68 ++++++++++------------ package.json | 96 ++++++------------------------- webpack.config.babel.js | 121 ++++++++++++++++++++++++++++++++++++++++ 5 files changed, 180 insertions(+), 118 deletions(-) create mode 100644 .babelrc create mode 100644 webpack.config.babel.js diff --git a/.babelrc b/.babelrc new file mode 100644 index 000000000..e69c55796 --- /dev/null +++ b/.babelrc @@ -0,0 +1,8 @@ +{ + "plugins": [ + "transform-object-rest-spread" + ], + "presets": [ + "es2015" + ] +} diff --git a/.jshintignore b/.jshintignore index efacec50a..4729d5d4b 100644 --- a/.jshintignore +++ b/.jshintignore @@ -1,4 +1,5 @@ -node_modules -libs debian +libs +node_modules analytics.js +webpack.config.babel.js diff --git a/Makefile b/Makefile index 065b02449..34ebba13e 100644 --- a/Makefile +++ b/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 +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 && \ diff --git a/package.json b/package.json index 170d5ae30..cc89aee5c 100644 --- 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" } } diff --git a/webpack.config.babel.js b/webpack.config.babel.js new file mode 100644 index 000000000..d2924535a --- /dev/null +++ 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' + } +}]; From 818ddad2c3f7c58e1c43273590675987102267e3 Mon Sep 17 00:00:00 2001 From: Lyubomir Marinov Date: Fri, 23 Sep 2016 10:12:03 -0500 Subject: [PATCH 3/5] Do not distribute unminimized artifacts The build process is capable of bundling both minimized and unminimized artifacts for lib-jitsi-meet, jitsi-meet and external_api. However, there does not seem to be a good reason to (1) always wait for the building of the two versions and (2) distributing the unminimized artifacts. --- Makefile | 7 ------- 1 file changed, 7 deletions(-) diff --git a/Makefile b/Makefile index 34ebba13e..b06c1913a 100644 --- a/Makefile +++ b/Makefile @@ -20,7 +20,6 @@ update-deps: $(NPM) update && $(NPM) install node-sass compile: - $(WEBPACK) $(WEBPACK) -p clean: @@ -33,12 +32,8 @@ deploy-init: deploy-appbundle: 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 \ @@ -46,8 +41,6 @@ deploy-appbundle: deploy-lib-jitsi-meet: 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 \ From 43d0582b2fb4c6de2a80e3ec8f7ea876d72f57bd Mon Sep 17 00:00:00 2001 From: Lyubomir Marinov Date: Wed, 28 Sep 2016 14:15:02 -0500 Subject: [PATCH 4/5] Don't use path.resolve --- webpack.config.babel.js | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/webpack.config.babel.js b/webpack.config.babel.js index d2924535a..0bdb3f0a8 100644 --- a/webpack.config.babel.js +++ b/webpack.config.babel.js @@ -1,9 +1,7 @@ -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 aui_css = __dirname + '/node_modules/@atlassian/aui/dist/aui/css/'; const minimize = process.argv.indexOf('-p') != -1 || process.argv.indexOf('--optimize-minimize') != -1; @@ -18,8 +16,8 @@ const config = { // Transpile ES2015 (aka ES6) to ES5. exclude: [ - path.resolve(__dirname, './modules/RTC/adapter.screenshare.js'), - path.resolve(__dirname, './node_modules/') + __dirname + '/modules/RTC/adapter.screenshare.js', + __dirname + '/node_modules/' ], loader: 'babel', test: /\.js$/ @@ -72,7 +70,7 @@ const config = { output: { filename: '[name]' + (minimize ? '.min' : '') + '.js', libraryTarget: 'umd', - path: path.resolve(__dirname, './build'), + path: __dirname + '/build', sourceMapFilename: '[name].' + (minimize ? 'min' : 'js') + '.map' }, resolve: { From c6f81668def5c7d59475206b19e55c1fa92cf962 Mon Sep 17 00:00:00 2001 From: Hristo Terezov Date: Wed, 28 Sep 2016 17:07:15 -0500 Subject: [PATCH 5/5] Remove an unnecessary exclude from Webpack --- webpack.config.babel.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/webpack.config.babel.js b/webpack.config.babel.js index 0bdb3f0a8..21453ecd9 100644 --- a/webpack.config.babel.js +++ b/webpack.config.babel.js @@ -15,10 +15,7 @@ const config = { loaders: [{ // Transpile ES2015 (aka ES6) to ES5. - exclude: [ - __dirname + '/modules/RTC/adapter.screenshare.js', - __dirname + '/node_modules/' - ], + exclude: __dirname + '/node_modules/', loader: 'babel', test: /\.js$/ },{