Build: switch from browserify to webpack (fixes #11366) (#11398)

Makefile.js

@@ -595,7 +595,7 @@ target.test = function() {
         errors++;
     }
 
-    target.browserify();
+    target.webpack();
 
     lastReturn = exec(`${getBinFile("karma")} start karma.conf.js`);
     if (lastReturn.code !== 0) {
@@ -796,7 +796,7 @@ target.gensite = function(prereleaseVersion) {
     // 13. Update demos, but only for non-prereleases
     if (!prereleaseVersion) {
         echo("> Updating the demos (Step 13)");
-        target.browserify();
+        target.webpack("production");
         cp("-f", "build/eslint.js", `${SITE_DIR}js/app/eslint.js`);
     } else {
         echo("> Skipped updating the demos (Step 13)");
@@ -809,28 +809,8 @@ target.gensite = function(prereleaseVersion) {
     echo("Done generating eslint.org");
 };
 
-target.browserify = function() {
-
-    // 1. create temp and build directory
-    if (!test("-d", TEMP_DIR)) {
-        mkdir(TEMP_DIR);
-    }
-
-    if (!test("-d", BUILD_DIR)) {
-        mkdir(BUILD_DIR);
-    }
-
-    // 2. browserify the temp directory
-    exec(`${getBinFile("browserify")} -x espree lib/linter.js -o ${BUILD_DIR}eslint.js -s eslint --global-transform [ babelify --presets [ @babel/preset-env ] ]`);
-
-    // 3. Browserify espree
-    exec(`${getBinFile("browserify")} -r espree -o ${TEMP_DIR}espree.js --global-transform [ babelify --presets [ @babel/preset-env ] ]`);
-
-    // 4. Concatenate Babel polyfill, Espree, and ESLint files together
-    cat("./node_modules/@babel/polyfill/dist/polyfill.js", `${TEMP_DIR}espree.js`, `${BUILD_DIR}eslint.js`).to(`${BUILD_DIR}eslint.js`);
-
-    // 5. remove temp directory
-    rm("-rf", TEMP_DIR);
+target.webpack = function(mode = "none") {
+    exec(`${getBinFile("webpack")} --mode=${mode} --output-path=${path.resolve(__dirname, BUILD_DIR)}`);
 };
 
 target.checkRuleFiles = function() {

docs/developer-guide/development-environment.md

@@ -83,7 +83,7 @@ Be sure to run this after making changes and before sending a pull request with
 
 Runs just the JavaScript and JSON linting on the repository
 
-#### npm run browserify
+#### npm run webpack
 
 Generates `build/eslint.js`, a version of ESLint for use in the browser
 

karma.conf.js

@@ -16,9 +16,6 @@ module.exports = function(config) {
 
         // list of files / patterns to load in the browser
         files: [
-            "node_modules/mocha/mocha.js",
-            "node_modules/chai/chai.js",
-            "node_modules/sinon/pkg/sinon.js",
             "build/eslint.js",
             "tests/lib/linter.js"
         ],
@@ -32,12 +29,14 @@ module.exports = function(config) {
         // preprocess matching files before serving them to the browser
         // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
         preprocessors: {
-            "tests/lib/linter.js": ["babel"]
+            "tests/lib/linter.js": ["webpack"]
         },
-        babelPreprocessor: {
-            options: {
-                presets: ["@babel/preset-env"]
-            }
+        webpack: {
+            mode: "none",
+            stats: "errors-only"
+        },
+        webpackMiddleware: {
+            logLevel: "error"
         },
 
 

lib/linter.js

@@ -11,6 +11,7 @@
 
 const eslintScope = require("eslint-scope"),
     evk = require("eslint-visitor-keys"),
+    espree = require("espree"),
     lodash = require("lodash"),
     CodePathAnalyzer = require("./code-path-analysis/code-path-analyzer"),
     ConfigOps = require("./config/config-ops"),
@@ -776,6 +777,8 @@ module.exports = class Linter {
         ruleMaps.set(this, new Rules());
         this.version = pkg.version;
         this.environments = new Environments();
+
+        this.defineParser("espree", espree);
     }
 
     /**

package.json

@@ -18,7 +18,7 @@
     "publish-release": "node Makefile.js publishRelease",
     "docs": "node Makefile.js docs",
     "gensite": "node Makefile.js gensite",
-    "browserify": "node Makefile.js browserify",
+    "webpack": "node Makefile.js webpack",
     "perf": "node Makefile.js perf",
     "profile": "beefy tests/bench/bench.js --open -- -t brfs -t ./tests/bench/xform-rules.js -r espree",
     "coveralls": "cat ./coverage/lcov.info | coveralls"
@@ -76,10 +76,9 @@
     "@babel/core": "^7.2.2",
     "@babel/polyfill": "^7.2.5",
     "@babel/preset-env": "^7.3.1",
-    "babelify": "^10.0.0",
+    "babel-loader": "^8.0.5",
     "beefy": "^2.1.8",
     "brfs": "^2.0.0",
-    "browserify": "^16.2.2",
     "chai": "^4.0.1",
     "cheerio": "^0.22.0",
     "common-tags": "^1.8.0",
@@ -96,10 +95,10 @@
     "istanbul": "^0.4.5",
     "jsdoc": "^3.5.5",
     "karma": "^3.1.4",
-    "karma-babel-preprocessor": "^8.0.0",
     "karma-chrome-launcher": "^2.2.0",
     "karma-mocha": "^1.3.0",
     "karma-mocha-reporter": "^2.2.3",
+    "karma-webpack": "^4.0.0-rc.6",
     "leche": "^2.2.3",
     "load-perf": "^0.2.0",
     "markdownlint": "^0.12.0",
@@ -111,7 +110,9 @@
     "shelljs": "^0.8.2",
     "sinon": "^3.3.0",
     "temp": "^0.9.0",
-    "through": "^2.3.8"
+    "through": "^2.3.8",
+    "webpack": "^4.29.3",
+    "webpack-cli": "^3.2.3"
   },
   "keywords": [
     "ast",

tests/lib/linter.js

@@ -32,10 +32,11 @@ function compatRequire(name, windowName) {
 // Requirements
 //------------------------------------------------------------------------------
 
-const assert = compatRequire("chai").assert,
-    sinon = compatRequire("sinon"),
-    path = compatRequire("path"),
-    Linter = compatRequire("../../lib/linter", "eslint");
+const assert = require("chai").assert,
+    sinon = require("sinon"),
+    path = require("path");
+
+const Linter = compatRequire("../../lib/linter", "eslint");
 
 //------------------------------------------------------------------------------
 // Constants

webpack.config.js

@@ -0,0 +1,23 @@
+module.exports = {
+    mode: "none",
+    entry: ["@babel/polyfill", "./lib/linter.js"],
+    output: {
+        filename: "eslint.js",
+        library: "eslint",
+        libraryTarget: "umd",
+        globalObject: "this"
+    },
+    module: {
+        rules: [
+            {
+                test: /\.js$/,
+                loader: "babel-loader",
+                options: {
+                    presets: ["@babel/preset-env"]
+                },
+                exclude: /node_modules/
+            }
+        ]
+    },
+    stats: "errors-only"
+};