From 3f5d0e69fbf801a59aa367398ea93b51be7bb940 Mon Sep 17 00:00:00 2001 From: Mehanig Date: Tue, 23 May 2017 15:03:53 -0700 Subject: [PATCH] Build and handle jsfiles using webpack instead of django-pipeline. Also renames bundle.js to translations.js. --- .eslintignore | 2 +- .gitignore | 1 + package.json | 1 + requirements/common.txt | 3 +++ static/js/{src/main.js => translations.js} | 0 templates/zerver/index.html | 4 +--- tools/minify-js | 1 - tools/test-backend | 8 ++++++++ tools/webpack | 2 +- tools/webpack.config.js | 16 +++++++++------- tools/webpack.dev.config.js | 4 +++- tools/webpack.production.config.js | 5 +++++ zproject/settings.py | 15 ++++++++++----- zproject/test_settings.py | 7 ++----- 14 files changed, 45 insertions(+), 24 deletions(-) rename static/js/{src/main.js => translations.js} (100%) diff --git a/.eslintignore b/.eslintignore index d6f8f427bd..6b92edbe29 100644 --- a/.eslintignore +++ b/.eslintignore @@ -1,3 +1,3 @@ -static/js/bundle.js static/js/blueslip.js puppet/zulip_ops/files/statsd/local.js +static/webpack-bundles diff --git a/.gitignore b/.gitignore index 0f81a2685b..77786377fe 100644 --- a/.gitignore +++ b/.gitignore @@ -22,6 +22,7 @@ static/generated/pygments_data.js static/generated/github-contributors.json static/locale/language_options.json static/third/emoji-data +static/webpack-bundles /node_modules /staticfiles.json npm-debug.log diff --git a/package.json b/package.json index 94b2acc6e1..4b427c3af7 100644 --- a/package.json +++ b/package.json @@ -21,6 +21,7 @@ "string.prototype.codepointat": "0.2.0", "underscore": "1.8.3", "webpack": "2.5.1", + "webpack-bundle-tracker": "0.2.0", "winchan": "0.2.0", "xdate": "0.8.0", "zxcvbn": "4.4.1" diff --git a/requirements/common.txt b/requirements/common.txt index 737258507f..9742f93f74 100644 --- a/requirements/common.txt +++ b/requirements/common.txt @@ -157,6 +157,9 @@ uritemplate==3.0.0 # Django extension for static asset pipeline django-pipeline==1.6.12 +# Django extension for serving webpack modules +django-webpack-loader==0.5.0 + # Needed for iOS push notifications git+https://github.com/sharmaeklavya2/PyAPNs.git@remove-simplejson#egg=apns==2.0.1 diff --git a/static/js/src/main.js b/static/js/translations.js similarity index 100% rename from static/js/src/main.js rename to static/js/translations.js diff --git a/templates/zerver/index.html b/templates/zerver/index.html index 8a51cd35cc..2080751e33 100644 --- a/templates/zerver/index.html +++ b/templates/zerver/index.html @@ -37,9 +37,7 @@ var page_params = {{ page_params }}; {% endif %} {{ minified_js('app')|safe }} -{% if not pipeline %} - -{% endif %} +{{ render_bundle('translations') }} {% if debug %} {{ minified_js('app_debug')|safe }} diff --git a/tools/minify-js b/tools/minify-js index f179b9844b..37472eaf2e 100755 --- a/tools/minify-js +++ b/tools/minify-js @@ -87,7 +87,6 @@ if prev_deploy: # Always use the newly compiled handlebars templates and webpack bundle. if prev_deploy: changed_files.add(os.path.join(STATIC_PATH, 'templates/compiled.js')) - changed_files.add(os.path.join(STATIC_PATH, 'js/bundle.js')) JS_SPECS = settings.JS_SPECS CLOSURE_BINARY = '/usr/bin/closure-compiler' diff --git a/tools/test-backend b/tools/test-backend index 3433d1aeb4..eb232340c5 100755 --- a/tools/test-backend +++ b/tools/test-backend @@ -196,6 +196,10 @@ if __name__ == "__main__": default=False, help=("Run the tests which failed the last time " "test-backend was run. Implies --nonfatal-errors.")) + parser.add_option('--no-webpack', dest='no_webpack', + action="store_true", + default=False, + help="Do not run webpack in tests.") (options, args) = parser.parse_args() zerver_test_dir = 'zerver/tests/' @@ -301,6 +305,10 @@ if __name__ == "__main__": generate_fixtures_command.append('--force') subprocess.call(generate_fixtures_command) + if not options.no_webpack: + print("Running Webpack with webpack.dev.config.js") + subprocess.check_call('tools/webpack') + if options.processes is None: options.processes = 4 diff --git a/tools/webpack b/tools/webpack index eb8f2e165f..6298341ff0 100755 --- a/tools/webpack +++ b/tools/webpack @@ -21,7 +21,7 @@ def run(): # type: () -> None """Builds for production, writing the output to disk""" subprocess.check_call(['node', 'node_modules/.bin/webpack'] + - ['--config', 'tools/webpack.production.config.js']) + ['--config', 'tools/webpack.production.config.js', '-p']) def run_watch(port): # type: (str) -> None diff --git a/tools/webpack.config.js b/tools/webpack.config.js index 4a6c605d35..bf8b2a4a00 100644 --- a/tools/webpack.config.js +++ b/tools/webpack.config.js @@ -1,11 +1,13 @@ var path = require('path'); -module.exports = { - entry: [ - './static/js/src/main.js', - ], - output: { - path: path.resolve(__dirname, '../static/js'), - filename: 'bundle.js', +module.exports = { + context: path.resolve(__dirname, "../"), + entry: { + translations: ['./static/js/translations.js'], }, + output: { + path: path.resolve(__dirname, '../static/webpack-bundles'), + filename: '[name].js', + }, + plugins: [], }; diff --git a/tools/webpack.dev.config.js b/tools/webpack.dev.config.js index 1bd9a354ae..001f6fc3c9 100644 --- a/tools/webpack.dev.config.js +++ b/tools/webpack.dev.config.js @@ -1,8 +1,10 @@ var config = require('./webpack.config.js'); +var BundleTracker = require('webpack-bundle-tracker'); -config.entry.push('webpack-dev-server/client?http://0.0.0.0:9991/socket.io'); +config.entry.translations.push('webpack-dev-server/client?http://0.0.0.0:9991/socket.io'); config.devtool = 'eval'; config.output.publicPath = 'http://0.0.0.0:9991/webpack/'; +config.plugins.push(new BundleTracker({filename: 'static/webpack-bundles/webpack-stats-dev.json'})); config.devServer = { port: 9994, diff --git a/tools/webpack.production.config.js b/tools/webpack.production.config.js index cecb0d6aa4..f4dd7bbb62 100644 --- a/tools/webpack.production.config.js +++ b/tools/webpack.production.config.js @@ -1,3 +1,8 @@ var config = require('./webpack.config.js'); +var BundleTracker = require('webpack-bundle-tracker'); + +config.devtool = 'source-map'; +config.output.filename = '[name]-[hash].js'; +config.plugins.push(new BundleTracker({filename: 'static/webpack-bundles/webpack-stats-production.json'})); module.exports = config; diff --git a/zproject/settings.py b/zproject/settings.py index 35768b81a5..e5bfd9d9ed 100644 --- a/zproject/settings.py +++ b/zproject/settings.py @@ -312,6 +312,7 @@ TEMPLATES = [ 'jinja2.ext.i18n', 'jinja2.ext.autoescape', 'pipeline.jinja2.PipelineExtension', + 'webpack_loader.contrib.jinja2ext.WebpackExtension', ], 'context_processors': [ 'zerver.context_processors.zulip_default_context', @@ -360,6 +361,7 @@ INSTALLED_APPS = [ 'confirmation', 'guardian', 'pipeline', + 'webpack_loader', 'zerver', 'social_django', ] @@ -976,7 +978,6 @@ JS_SPECS = { 'js/ui_init.js', 'js/emoji_picker.js', 'js/compose_ui.js', - # JS bundled by webpack is also included here if PIPELINE_ENABLED setting is true ], 'output_filename': 'min/app.js' }, @@ -1008,12 +1009,16 @@ JS_SPECS = { } } -if PIPELINE_ENABLED: - # This is also done in test_settings.py, see comment there.. - JS_SPECS['app']['source_filenames'].append('js/bundle.js') - app_srcs = JS_SPECS['app']['source_filenames'] +WEBPACK_STATS_FILE = 'webpack-stats-dev.json' if DEVELOPMENT else 'webpack-stats-production.json' +WEBPACK_LOADER = { + 'DEFAULT': { + 'BUNDLE_DIR_NAME': 'webpack-bundles/', + 'STATS_FILE': os.path.join(STATIC_ROOT, 'webpack-bundles', WEBPACK_STATS_FILE), + } +} + ######################################################################## # LOGGING SETTINGS ######################################################################## diff --git a/zproject/test_settings.py b/zproject/test_settings.py index c98e9cecdf..7c1049aeb3 100644 --- a/zproject/test_settings.py +++ b/zproject/test_settings.py @@ -42,11 +42,6 @@ if USING_PGROONGA: DATABASES['default'] DATABASES['default']['OPTIONS']['options'] = pg_options -# In theory this should just go in zproject/settings.py inside the `if -# PIPELINE_ENABLED` statement, but because zproject/settings.py is processed -# first, we have to add it here as a hack. -JS_SPECS['app']['source_filenames'].append('js/bundle.js') - if "TORNADO_SERVER" in os.environ: # This covers the Casper test suite case TORNADO_SERVER = os.environ["TORNADO_SERVER"] @@ -99,6 +94,8 @@ CACHES['database'] = { } } +# Use production config from Webpack in tests +WEBPACK_LOADER['DEFAULT']['STATS_FILE'] = os.path.join(STATIC_ROOT, 'webpack-bundles', 'webpack-stats-production.json') if CASPER_TESTS: # Don't auto-restart Tornado server during casper tests