From 2fb96b2fd6b82e29f010e4a6572b62bbf7b86c0b Mon Sep 17 00:00:00 2001 From: "Kyle D. McCormick" Date: Tue, 11 Jul 2023 17:13:06 -0400 Subject: [PATCH] build: `npm run webpack` TODO: will copy in commit message from PR when squash-merging Part of: https://github.com/openedx/edx-platform/issues/31604 --- .../0017-reimplement-asset-processing.rst | 20 ++++++++++++++++--- package.json | 4 +++- webpack.common.config.js | 10 +++++++--- webpack.dev.config.js | 2 +- webpack.prod.config.js | 2 +- 5 files changed, 29 insertions(+), 9 deletions(-) diff --git a/docs/decisions/0017-reimplement-asset-processing.rst b/docs/decisions/0017-reimplement-asset-processing.rst index f52406f4963f..8405d605fed4 100644 --- a/docs/decisions/0017-reimplement-asset-processing.rst +++ b/docs/decisions/0017-reimplement-asset-processing.rst @@ -160,11 +160,11 @@ The three top-level edx-platform asset processing actions are *build*, *collect* Python wrapper around a call to webpack. Invokes the ``./manage.py [lms|cms] print_setting`` multiple times in order to determine Django settings, adding which can add 20+ seconds to the build. - - ``scripts/build-assets.sh webpack --static-root "$(./manage.py lms print_setting STATIC_ROOT)"``. + - ``npm run webpack`` or ``npm run webpack-dev`` - Bash wrapper around a call to webpack. The script will accept parameters rather than looking up Django settings itself. + Simple shell script defined in package.json to invoke Webpack in prod or dev mode. The script will look for several environment variables, with a default defined for each one. See **Build Configuration** for details. The script will NOT invoke ``print_setting``; we leave to distributions the tasking of setting environment variables appropriately. - The print_setting command will still be available for distributions to use to extract ``STATIC_ROOT`` from Django settings, but it will only need to be run once. As described in **Build Configuration** below, unnecessary Django settings will be removed. Some distributions may not even need to look up ``STATIC_ROOT``; Tutor, for example, will probably render ``STATIC_ROOT`` directly into the environment variable ``OPENEDX_BUILD_ASSETS_OPTS`` variable, described in the **Build Configuration**. + To continue using ``print_setting``, one could run: ``STATIC_ROOT_LMS="$(./manage.py lms print_setting STATIC_ROOT_LMS)" npm run webpack`` * - + **Build stage 4: Compile default SCSS** into CSS for legacy LMS/CMS frontends. @@ -261,6 +261,18 @@ Furthermore, to facilitate a Python-free build reimplementation, we will remove OPENEDX_BUILD_ASSETS_OPTS=\ '--webpack-config path/to/webpack.my.config.js' + * - STATIC_ROOT_LMS + + - TODO + + - TODO + + * - STATIC_ROOT_CMS + + - TODO + + - TODO + * - JS_ENV_EXTRA_CONFIG - Global configuration object available to edx-platform JS modules. Defaults empty. Only known use is to add configuration and plugins for the TinyMCE editor. @@ -304,6 +316,8 @@ Either way, the migration path is straightforward: - ``scripts/build-assets.sh css`` * - ``openedx-assets themes`` - ``scripts/build-assets.sh themes`` + * - ``openedx-assets webpack [--env=dev]`` + - ``npm run webpack[-dev]`` * - ``openedx-assets collect`` - ``./manage.py [lms|cms] collectstatic --noinput`` * - ``openedx-assets watch-themes`` diff --git a/package.json b/package.json index ebdcf240e153..5927c685b1c1 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,9 @@ "version": "0.1.0", "repository": "https://github.com/openedx/edx-platform", "scripts": { - "postinstall": "scripts/copy-node-modules.sh" + "postinstall": "scripts/copy-node-modules.sh", + "webpack": "NODE_ENV=${NODE_ENV:-production} \"$(npm bin)/webpack\" --progress --config=${WEBPACK_CONFIG_PATH:-webpack.prod.config.js}", + "webpack-dev": "NODE_ENV=development WEBPACK_CONFIG_PATH=webpack.dev.config.js npm run webpack" }, "dependencies": { "@babel/core": "7.19.0", diff --git a/webpack.common.config.js b/webpack.common.config.js index ee0c0d98e143..01e033e73c5a 100644 --- a/webpack.common.config.js +++ b/webpack.common.config.js @@ -26,6 +26,9 @@ var defineFooter = new RegExp('(' + defineCallFooter.source + ')|(' + defineDirectFooter.source + ')|(' + defineFancyFooter.source + ')', 'm'); +var staticRootLms = process.env.STATIC_ROOT_LMS || "./test_root/staticfiles"; +var staticRootCms = process.env.STATIC_ROOT_CMS || (staticRootLms + "/studio"); + var workerConfig = function() { try { return { @@ -39,7 +42,7 @@ var workerConfig = function() { }, plugins: [ new BundleTracker({ - path: process.env.STATIC_ROOT_LMS, + path: staticRootLms, filename: 'webpack-worker-stats.json' }), new webpack.DefinePlugin({ @@ -131,14 +134,15 @@ module.exports = Merge.smart({ }, plugins: [ + new webpack.ProgressPlugin(), // report progress during compilation new webpack.NoEmitOnErrorsPlugin(), new webpack.NamedModulesPlugin(), new BundleTracker({ - path: process.env.STATIC_ROOT_CMS, + path: staticRootCms, filename: 'webpack-stats.json' }), new BundleTracker({ - path: process.env.STATIC_ROOT_LMS, + path: staticRootLms, filename: 'webpack-stats.json' }), new webpack.ProvidePlugin({ diff --git a/webpack.dev.config.js b/webpack.dev.config.js index 3987e82fdf7d..90018a901002 100644 --- a/webpack.dev.config.js +++ b/webpack.dev.config.js @@ -21,7 +21,7 @@ module.exports = _.values(Merge.smart(commonConfig, { }), new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify('development'), - 'process.env.JS_ENV_EXTRA_CONFIG': process.env.JS_ENV_EXTRA_CONFIG + 'process.env.JS_ENV_EXTRA_CONFIG': process.env.JS_ENV_EXTRA_CONFIG || "{}" }) ], module: { diff --git a/webpack.prod.config.js b/webpack.prod.config.js index d71031cffc43..cff1f23699fd 100644 --- a/webpack.prod.config.js +++ b/webpack.prod.config.js @@ -18,7 +18,7 @@ var optimizedConfig = Merge.smart(commonConfig, { plugins: [ new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify('production'), - 'process.env.JS_ENV_EXTRA_CONFIG': process.env.JS_ENV_EXTRA_CONFIG + 'process.env.JS_ENV_EXTRA_CONFIG': process.env.JS_ENV_EXTRA_CONFIG || "{}" }), new webpack.LoaderOptionsPlugin({ // This may not be needed; legacy option for loaders written for webpack 1 minimize: true