Upgrade dev build tooling (Babel 6 -> 7, Webpack 1 -> 4) (#1235)

Upgrade dev build tooling (Babel 6 -> 7, Webpack 1 -> 4)
facebook · Nov 22, 2018 · 28d36a2 · 28d36a2
1 parent 780e4d3
commit 28d36a2
Show file tree

Hide file tree

Showing 15 changed files with 3,956 additions and 1,087 deletions.
diff --git a/.babelrc b/.babelrc
@@ -1,3 +1,7 @@
 {
-  "presets": ["react", "es2015", "stage-0"],
+  "plugins": [
+    ["@babel/plugin-transform-flow-strip-types"],
+    ["@babel/plugin-proposal-class-properties", { "loose": false }]
+  ],
+  "presets": ["@babel/preset-env", "@babel/preset-react", "@babel/preset-flow"]
 }
diff --git a/backend/integration/package.json b/backend/integration/package.json
@@ -3,7 +3,8 @@
     "babelify": "^6.1.3",
     "tap-browser-color": "^0.1.2",
     "tape": "^4.0.1",
-    "tape-catch": "^1.0.4"
+    "tape-catch": "^1.0.4",
+    "webpack-dev-server": "^3.1.10"
   },
   "dependencies": {
     "es6-map": "^0.1.1",

diff --git a/backend/integration/webpack.config.js b/backend/integration/webpack.config.js
@@ -11,6 +11,9 @@
  */
 'use strict';
 
+const {readFileSync} = require('fs');
+const {resolve} = require('path');
+
 module.exports = {
   devtool: 'cheap-module-eval-source-map',
   entry: {
@@ -29,23 +32,12 @@ module.exports = {
   },
 
   module: {
-
-    // require
-    unknownContextRegExp: /$^/,
-    unknownContextCritical: false,
-
-    // require(expr)
-    exprContextRegExp: /$^/,
-    exprContextCritical: false,
-
-    // require("prefix" + expr + "surfix")
-    wrappedContextRegExp: /$^/,
-    wrappedContextCritical: false,
-
-    loaders: [{
-      test: /\.js$/,
-      loader:  'babel',
-      exclude: /node_modules/,
-    }],
+    rules: [
+      {
+        test: /\.js$/,
+        loader: 'babel-loader',
+        options: JSON.parse(readFileSync(resolve(__dirname, '../../.babelrc'))),
+      },
+    ],
   },
 };
diff --git a/package.json b/package.json
@@ -1,13 +1,16 @@
 {
   "dependencies": {
+    "@babel/core": "^7.1.6",
+    "@babel/plugin-proposal-class-properties": "^7.1.0",
+    "@babel/plugin-transform-flow-strip-types": "^7.1.6",
+    "@babel/preset-env": "^7.1.6",
+    "@babel/preset-flow": "^7.0.0",
+    "@babel/preset-react": "^7.0.0",
     "adm-zip": "^0.4.7",
-    "babel-core": "6.3.21",
-    "babel-eslint": "6.0.4",
-    "babel-jest": "22.1.0",
-    "babel-loader": "6.2.0",
-    "babel-preset-es2015": "6.3.13",
-    "babel-preset-react": "6.3.13",
-    "babel-preset-stage-0": "6.3.13",
+    "babel-core": "^7.0.0-bridge",
+    "babel-eslint": "6",
+    "babel-jest": "^23.6.0",
+    "babel-loader": "^8.0.4",
     "child-process-promise": "^2.2.1",
     "classnames": "2.2.1",
     "cli-spinners": "^1.0.0",
@@ -22,23 +25,22 @@
     "gh-pages": "^1.0.0",
     "immutable": "3.7.6",
     "jest": "22.1.4",
-    "json-loader": "0.5.4",
     "log-update": "^2.0.0",
     "lru-cache": "^4.1.3",
     "memoize-one": "^3.1.1",
     "node-libs-browser": "0.5.3",
     "nullthrows": "^1.0.0",
     "object-assign": "4.0.1",
     "prop-types": "^15.6.1",
-    "raw-loader": "^0.5.1",
     "react": "^16.5.2",
     "react-color": "^2.11.7",
     "react-dom": "^16.5.2",
     "react-portal": "^3.1.0",
     "react-virtualized-auto-sizer": "^1.0.2",
     "react-window": "^1.1.1",
     "semver": "^5.5.1",
-    "webpack": "1.12.9"
+    "webpack": "^4.26.0",
+    "webpack-cli": "^3.1.2"
   },
   "license": "BSD-3-Clause",
   "repository": "facebook/react-devtools",

diff --git a/packages/react-devtools-core/webpack.backend.js b/packages/react-devtools-core/webpack.backend.js
@@ -9,38 +9,35 @@
  */
 'use strict';
 
-var webpack = require('webpack');
-var __DEV__ = process.env.NODE_ENV !== 'production';
+const {readFileSync} = require('fs');
+const {resolve} = require('path');
+const webpack = require('webpack');
+
+const __DEV__ = process.env.NODE_ENV !== 'production';
 
 module.exports = {
-  debug: true,
-  devtool: 'source-map',
+  mode: __DEV__ ? 'development' : 'production',
+  devtool: __DEV__ ? 'source-map' : false,
   entry: {
     backend: './src/backend.js',
   },
   output: {
-    path: __dirname + '/build', // eslint-disable-line no-path-concat
+    path: __dirname + '/build',
     filename: '[name].js',
-    library: 'ReactDevToolsBackend',
-    libraryTarget: 'umd',
   },
   plugins: __DEV__ ? [] : [
     // Ensure we get production React
     new webpack.DefinePlugin({
       'process.env.NODE_ENV': '"production"',
     }),
-    // Remove dead code but keep it readable:
-    new webpack.optimize.UglifyJsPlugin({
-      mangle: false,
-      beautify: true,
-    }),
   ],
   module: {
-    loaders: [{
-      test: /\.js$/,
-      loader: 'babel',
-      exclude: /node_modules/,
-    }],
+    rules: [
+      {
+        test: /\.js$/,
+        loader: 'babel-loader',
+        options: JSON.parse(readFileSync(resolve(__dirname, '../../.babelrc'))),
+      },
+    ],
   },
 };
-
diff --git a/packages/react-devtools-core/webpack.standalone.js b/packages/react-devtools-core/webpack.standalone.js
@@ -9,21 +9,20 @@
  */
 'use strict';
 
-var webpack = require('webpack');
-var __DEV__ = process.env.NODE_ENV !== 'production';
+const {readFileSync} = require('fs');
+const {resolve} = require('path');
+const webpack = require('webpack');
+
+const __DEV__ = process.env.NODE_ENV !== 'production';
 
 module.exports = {
-  debug: true,
-  devtool: 'source-map',
+  mode: __DEV__ ? 'development' : 'production',
+  devtool: __DEV__ ? 'source-map' : false,
+  target: 'electron-main',
+  externals: ['ws'],
   entry: {
     standalone: './src/standalone.js',
   },
-  // this lets us `require('fs')` etc
-  target: 'electron',
-  node: {
-    // don't replace __dirname, electron will handle it
-    __dirname: false,
-  },
   output: {
     path: __dirname + '/build', // eslint-disable-line no-path-concat
     filename: '[name].js',
@@ -35,18 +34,14 @@ module.exports = {
     new webpack.DefinePlugin({
       'process.env.NODE_ENV': '"production"',
     }),
-    // Remove dead code but keep it readable:
-    new webpack.optimize.UglifyJsPlugin({
-      mangle: false,
-      beautify: true,
-    }),
   ],
-  externals: ['ws'],
   module: {
-    loaders: [{
-      test: /\.js$/,
-      loader:  'babel',
-      exclude: /node_modules/,
-    }],
+    rules: [
+      {
+        test: /\.js$/,
+        loader: 'babel-loader',
+        options: JSON.parse(readFileSync(resolve(__dirname, '../../.babelrc'))),
+      },
+    ],
   },
 };
diff --git a/shells/plain/webpack.config.js b/shells/plain/webpack.config.js
@@ -9,8 +9,12 @@
  */
 'use strict';
 
+const {readFileSync} = require('fs');
+const {resolve} = require('path');
+
 module.exports = {
-  devtool: false, //'cheap-module-eval-source-map',
+  mode: 'development',
+  devtool: false,
   entry: {
     backend: './backend.js',
     container: './container.js',
@@ -19,12 +23,13 @@ module.exports = {
     path: __dirname + '/build',
     filename: '[name].js',
   },
-
   module: {
-    loaders: [{
-      test: /\.js$/,
-      loader:  'babel',
-      exclude: /node_modules/,
-    }],
+    rules: [
+      {
+        test: /\.js$/,
+        loader: 'babel-loader',
+        options: JSON.parse(readFileSync(resolve(__dirname, '../../.babelrc'))),
+      },
+    ],
   },
 };
diff --git a/shells/theme-preview/webpack.config.js b/shells/theme-preview/webpack.config.js
@@ -9,21 +9,26 @@
  */
 'use strict';
 
+const {readFileSync} = require('fs');
+const {resolve} = require('path');
+
 module.exports = {
-  devtool: false, //'cheap-module-eval-source-map',
+  mode: 'development',
+  devtool: 'cheap-module-eval-source-map',
   entry: {
     application: './application.js',
   },
   output: {
     path: __dirname + '/build',
     filename: '[name].js',
   },
-
   module: {
-    loaders: [{
-      test: /\.js$/,
-      loader:  'babel',
-      exclude: /node_modules/,
-    }],
+    rules: [
+      {
+        test: /\.js$/,
+        loader: 'babel-loader',
+        options: JSON.parse(readFileSync(resolve(__dirname, '../../.babelrc'))),
+      },
+    ],
   },
 };
diff --git a/shells/webextension/webpack.backend.js b/shells/webextension/webpack.backend.js
@@ -9,32 +9,28 @@
  */
 'use strict';
 
-var webpack = require('webpack');
+const {readFileSync} = require('fs');
+const {resolve} = require('path');
 
-var __DEV__ = process.env.NODE_ENV !== 'production';
+const __DEV__ = process.env.NODE_ENV !== 'production';
 
 module.exports = {
-  devtool: __DEV__ ? '#cheap-module-eval-source-map' : false,
+  mode: __DEV__ ? 'development' : 'production',
+  devtool: __DEV__ ? 'cheap-module-eval-source-map' : false,
   entry: {
     backend: './src/backend.js',
   },
   output: {
     path: __dirname + '/build',
     filename: '[name].js',
   },
-
   module: {
-    loaders: [{
-      test: /\.js$/,
-      loader:  'babel',
-      exclude: /node_modules/,
-    }],
+    rules: [
+      {
+        test: /\.js$/,
+        loader: 'babel-loader',
+        options: JSON.parse(readFileSync(resolve(__dirname, '../../.babelrc'))),
+      },
+    ],
   },
-
-  plugins: [new webpack.ProvidePlugin({
-    'Object.create': __dirname + '/helpers/object-create.js',
-    Map: __dirname + '/helpers/map.js',
-    WeakMap: __dirname + '/helpers/weak-map.js',
-    Set: __dirname + '/helpers/set.js',
-  })],
 };
diff --git a/shells/webextension/webpack.config.js b/shells/webextension/webpack.config.js
@@ -9,16 +9,20 @@
  */
 'use strict';
 
-var webpack = require('webpack');
-var __DEV__ = process.env.NODE_ENV !== 'production';
+const {readFileSync} = require('fs');
+const {resolve} = require('path');
+const webpack = require('webpack');
+
+const __DEV__ = process.env.NODE_ENV !== 'production';
 
 module.exports = {
-  devtool: __DEV__ ? '#cheap-module-eval-source-map' : false,
+  mode: __DEV__ ? 'development' : 'production',
+  devtool: __DEV__ ? 'cheap-module-eval-source-map' : false,
   entry: {
-    main: './src/main.js',
     background: './src/background.js',
-    inject: './src/GlobalHook.js',
     contentScript: './src/contentScript.js',
+    inject: './src/GlobalHook.js',
+    main: './src/main.js',
     panel: './src/panel.js',
   },
   output: {
@@ -30,17 +34,14 @@ module.exports = {
     new webpack.DefinePlugin({
       'process.env.NODE_ENV': '"production"',
     }),
-    // Remove dead code but keep it readable:
-    new webpack.optimize.UglifyJsPlugin({
-      mangle: false,
-      beautify: true,
-    }),
   ],
   module: {
-    loaders: [{
-      test: /\.js$/,
-      loader:  'babel',
-      exclude: /node_modules/,
-    }],
+    rules: [
+      {
+        test: /\.js$/,
+        loader: 'babel-loader',
+        options: JSON.parse(readFileSync(resolve(__dirname, '../../.babelrc'))),
+      },
+    ],
   },
 };