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..b06c1913a 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,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 && \ diff --git a/package.json b/package.json index 57164364d..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,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" } } diff --git a/webpack.config.babel.js b/webpack.config.babel.js new file mode 100644 index 000000000..0bdb3f0a8 --- /dev/null +++ b/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' + } +}];