[DRAFT] webpack update (#1512)

* webpack update

* remove jshint

* remove unused import

* cleanup

* merge conflicts

* remove old artifacts

* debug logging for initial test validation

* linting

* test fixes

* more linting

* remove debug logging

* make javascript

* translations

* documentation update

* remove debug

* fix tinyMCE integration

* fix test

* remove npm update from `make javascript`

* version bump to 2.11.0

Author: Ben Warzeski

.env

@@ -0,0 +1,5 @@
+RC_ENV=development
+NODE_ENV=development
+BABEL_ENV=development
+NODE_PATH=./openassessment/xblock/static/js/src
+BROWSER=none

.eslintrc.js

@@ -0,0 +1,29 @@
+const { createConfig } = require('@edx/frontend-build');
+
+const config = createConfig('eslint');
+
+// These rule overrides should be removed at a later date, and the associated code fixed.
+config.rules["import/no-named-as-default"] = "off";
+config.rules["no-underscore-dangle"] = "off";
+config.rules["prefer-rest-params"] = "off";
+config.rules["no-unused-vars"] = "off";
+config.rules["no-param-reassign"] = "off";
+config.rules["no-alert"] = "off";
+config.rules["no-new"] = "off";
+config.rules["func-names"] = "off";
+config.rules["max-classes-per-file"] = "off";
+config.rules["prefer-destructuring"] = "off";
+config.rules["no-prototype-builtins"] = "off";
+
+config.globals["gettext"] = "readonly";
+config.globals["ngettext"] = "readonly";
+config.globals["$"] = "readonly";
+config.globals["MathJax"] = "readonly";
+config.globals["_"] = "readonly";
+config.globals["Logger"] = "readonly";
+config.globals["XBlock"] = "readonly";
+config.globals["Backbone"] = "readonly";
+config.globals["Backgrid"] = "readonly";
+config.globals["rewriteStaticLinks"] = "readonly";
+
+module.exports = config;

.jshintrc

@@ -69,9 +69,8 @@ update-npm-requirements: ## update NPM requrements
 	cp ./node_modules/backgrid/lib/backgrid*.js $(STATIC_JS)/lib/backgrid/
 	cp ./node_modules/backgrid/lib/backgrid*.css $(STATIC_CSS)/lib/backgrid/
 
-javascript: update-npm-requirements ## Minify JavaScript source files
-	node_modules/.bin/uglifyjs $(STATIC_JS)/src/oa_shared.js $(STATIC_JS)/src/*.js $(STATIC_JS)/src/lms/*.js $(STATIC_JS)/lib/backgrid/backgrid.min.js > "$(STATIC_JS)/openassessment-lms.min.js"
-	node_modules/.bin/uglifyjs $(STATIC_JS)/src/oa_shared.js $(STATIC_JS)/src/*.js $(STATIC_JS)/src/studio/*.js $(STATIC_JS)/lib/backgrid/backgrid.min.js > "$(STATIC_JS)/openassessment-studio.min.js"
+javascript: ## Webpack JavaScript source files
+	npm run build
 
 sass: ## Compile SASS files
 	python scripts/compile_sass.py
@@ -109,7 +108,6 @@ check_translations_up_to_date: extract_translations compile_translations generat
 ################
 
 quality: ## Run linting and code quality checks
-	./node_modules/.bin/jshint $(STATIC_JS)/src -c .jshintrc --verbose
 	npm run lint
 	./scripts/run-pycodestyle.sh
 	./scripts/run-pylint.sh

Makefile

@@ -0,0 +1,3 @@
+const { createConfig } = require('@edx/frontend-build');
+
+module.exports = createConfig('babel');

babel.config.js

@@ -79,14 +79,21 @@ If any changes are made to the .html files, it is necessary to re-do the transla
 
 The above command will generate translations files which will have to be checked into git.
 
-Minifying js/html
+Building JS
+------------
+This is required if there were any JS changes:
+
+- from local directory (not in lms shell)
+- ``npm run build``
+
+Minifying css
 -----------------
-This is required if there were any js/html changes:
+This is required if there were any scss changes:
 
 - be inside the shell
 - ``cd /edx/src/edx-ora2``
 - ``source edx-ora2/bin/activate``
-- ``make javascript sass``
+- ``make sass``
 
 Running Unit Tests
 ------------------
@@ -107,4 +114,4 @@ Other Resources
 ---------------
 `ORA user documentation <http://edx.readthedocs.org/projects/edx-partner-course-staff/en/latest/exercises_tools/open_response_assessments/index.html>`_
 
-`ORA analytics documentation <https://edx.readthedocs.io/projects/devdata/en/latest/internal_data_formats/ora2_data.html>`_
+`ORA analytics documentation <https://edx.readthedocs.io/projects/devdata/en/latest/internal_data_formats/ora2_data.html>`_

docs/developers_guide.rst

@@ -0,0 +1,15 @@
+default_env: &default_env
+  RC_ENV: development
+  NODE_ENV: development
+  BABEL_ENV: development
+  NODE_PATH: './openassessment/xblock/static/js/src'
+  BROWSER: none
+
+development:
+  <<: *default_env
+
+production:
+  <<: *default_env
+  RC_ENV: production
+  NODE_ENV: production
+  BABEL_ENV: production

env.yml

@@ -1,10 +1,11 @@
 // Karma configuration
+const webpackConfig = require('./webpack.dev.config.js');
 
 module.exports = function(config) {
   config.set({
 
     // base path that will be used to resolve all patterns (eg. files, exclude)
-    basePath: 'openassessment/xblock/static/',
+    basePath: 'openassessment/xblock/static',
 
 
     plugins: [
@@ -15,7 +16,8 @@ module.exports = function(config) {
       'karma-coverage',
       'karma-sinon',
       'karma-jasmine-html-reporter',
-      'karma-spec-reporter'
+      'karma-spec-reporter',
+      'karma-webpack'
     ],
 
     // frameworks to use
@@ -42,26 +44,17 @@ module.exports = function(config) {
         pattern: '../../../node_modules/moment/min/moment-with-locales.min.js',
         served: true, included: false
       },
-      {
-        pattern: '../../../node_modules/edx-ui-toolkit/src/js/utils/date-utils.js',
-        served: true, included: false
-      },
-      {
-        pattern: '../../../node_modules/edx-ui-toolkit/src/js/utils/string-utils.js',
-        served: true, included: false
-      },
       //
-      'js/src/oa_shared.js',
-      'js/src/*.js',
-      'js/src/lms/*.js',
-      'js/src/studio/*.js',
-      'js/spec/test_shared.js',
-      'js/spec/*.js',
-      'js/spec/lms/*.js',
-      'js/spec/studio/*.js',
+      { pattern: 'js/fixtures/*.html' },
+      { pattern: 'js/spec/*.js', watched: false },
+      { pattern: 'js/spec/**/*.js', watched: false },
+      { pattern: 'js/src/oa_shared.js', watched: false },
+      { pattern: 'js/src/*_index.js', watched: false },
+      { pattern: 'js/src/**/*.js', watched: false },
+
       // fixtures
       {
-        pattern: 'js/fixtures/*.html',
+        pattern: 'js/fixtures/*.json',
         served: true, included: false
       }
     ],
@@ -74,11 +67,14 @@ module.exports = function(config) {
     // preprocess matching files before serving them to the browser
     // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
     preprocessors: {
-      'js/src/*.js': 'coverage',
-      'js/src/lms/*.js': 'coverage',
-      'js/src/studio/*.js': 'coverage'
+      'js/src/*_index.js': ['webpack'],
+      'js/src/**/*.js': ['webpack', 'coverage'],
+      'js/spec/*.js': ['webpack'],
+      'js/spec/**/*.js': ['webpack'],
+      'js/src/oa_shared.js': ['webpack'],
     },
 
+    webpack: webpackConfig,
 
     // test results reporter to use
     reporters: ['spec', 'coverage'],
@@ -105,12 +101,27 @@ module.exports = function(config) {
 
     // start these browsers
     // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
-    browsers: ['PhantomJS'],
+    browsers: ['HeadlessChrome'],
+    customLaunchers: {
+        HeadlessChrome: {
+            base: 'ChromeHeadless',
+            flags: [
+                '--no-sandbox',
+                '--headless',
+                '--disable-gpu',
+                '--disable-translate',
+                '--disable-extensions'
+            ]
+        }
+    },
 
     // Continuous Integration mode
     // if true, Karma captures browsers, runs the tests and exits
-    singleRun: true
+    singleRun: true,
 
-  });
+    resolve: {
+      extensions: ['', '.js'],
+    }
 
+  });
 };