build: replace jwl-dev-utils with react-dev-utils
This commit is contained in:
parent
c171597c7b
commit
ffc3e2f423
6 changed files with 1157 additions and 501 deletions
|
@ -7,26 +7,24 @@ const resolve = require('resolve');
|
||||||
const PnpWebpackPlugin = require('pnp-webpack-plugin');
|
const PnpWebpackPlugin = require('pnp-webpack-plugin');
|
||||||
const HtmlWebpackPlugin = require('html-webpack-plugin');
|
const HtmlWebpackPlugin = require('html-webpack-plugin');
|
||||||
const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
|
const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
|
||||||
const InlineChunkHtmlPlugin = require('jwl-dev-utils/InlineChunkHtmlPlugin');
|
const InlineChunkHtmlPlugin = require('react-dev-utils/InlineChunkHtmlPlugin');
|
||||||
const TerserPlugin = require('terser-webpack-plugin');
|
const TerserPlugin = require('terser-webpack-plugin');
|
||||||
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
|
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
|
||||||
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
|
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
|
||||||
const safePostCssParser = require('postcss-safe-parser');
|
const safePostCssParser = require('postcss-safe-parser');
|
||||||
const ManifestPlugin = require('webpack-manifest-plugin');
|
const ManifestPlugin = require('webpack-manifest-plugin');
|
||||||
const InterpolateHtmlPlugin = require('jwl-dev-utils/InterpolateHtmlPlugin');
|
const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
|
||||||
const WorkboxWebpackPlugin = require('workbox-webpack-plugin');
|
const WorkboxWebpackPlugin = require('workbox-webpack-plugin');
|
||||||
const WatchMissingNodeModulesPlugin = require('jwl-dev-utils/WatchMissingNodeModulesPlugin');
|
const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
|
||||||
const ModuleScopePlugin = require('jwl-dev-utils/ModuleScopePlugin');
|
const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent');
|
||||||
const getCSSModuleLocalIdent = require('jwl-dev-utils/getCSSModuleLocalIdent');
|
|
||||||
const paths = require('./paths');
|
const paths = require('./paths');
|
||||||
const getClientEnvironment = require('./env');
|
const getClientEnvironment = require('./env');
|
||||||
const ModuleNotFoundPlugin = require('jwl-dev-utils/ModuleNotFoundPlugin');
|
const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin');
|
||||||
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin-alt');
|
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin-alt');
|
||||||
const typescriptFormatter = require('jwl-dev-utils/typescriptFormatter');
|
|
||||||
const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
|
const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
|
||||||
|
|
||||||
const webpackDevClientEntry = require.resolve(
|
const webpackDevClientEntry = require.resolve(
|
||||||
'jwl-dev-utils/webpackHotDevClient'
|
'react-dev-utils/webpackHotDevClient'
|
||||||
);
|
);
|
||||||
|
|
||||||
// Source maps are resource heavy and can cause out of memory issue for large source files.
|
// Source maps are resource heavy and can cause out of memory issue for large source files.
|
||||||
|
@ -290,7 +288,7 @@ module.exports = function(webpackEnv) {
|
||||||
use: [
|
use: [
|
||||||
{
|
{
|
||||||
options: {
|
options: {
|
||||||
formatter: require.resolve('jwl-dev-utils/eslintFormatter'),
|
formatter: require.resolve('react-dev-utils/eslintFormatter'),
|
||||||
eslintPath: require.resolve('eslint')
|
eslintPath: require.resolve('eslint')
|
||||||
},
|
},
|
||||||
loader: require.resolve('eslint-loader')
|
loader: require.resolve('eslint-loader')
|
||||||
|
@ -490,7 +488,7 @@ module.exports = function(webpackEnv) {
|
||||||
entry: webpackDevClientEntry,
|
entry: webpackDevClientEntry,
|
||||||
// The expected exports are slightly different from what the overlay exports,
|
// The expected exports are slightly different from what the overlay exports,
|
||||||
// so an interop is included here to enable feedback on module-level errors.
|
// so an interop is included here to enable feedback on module-level errors.
|
||||||
module: require.resolve('jwl-dev-utils/refreshOverlayInterop'),
|
module: require.resolve('react-dev-utils/refreshOverlayInterop'),
|
||||||
// Since we ship a custom dev client and overlay integration,
|
// Since we ship a custom dev client and overlay integration,
|
||||||
// the bundled socket handling logic can be eliminated.
|
// the bundled socket handling logic can be eliminated.
|
||||||
sockIntegration: false
|
sockIntegration: false
|
||||||
|
@ -500,12 +498,6 @@ module.exports = function(webpackEnv) {
|
||||||
// a plugin that prints an error when you attempt to do this.
|
// a plugin that prints an error when you attempt to do this.
|
||||||
// See https://github.com/facebook/create-react-app/issues/240
|
// See https://github.com/facebook/create-react-app/issues/240
|
||||||
isEnvDevelopment && new CaseSensitivePathsPlugin(),
|
isEnvDevelopment && new CaseSensitivePathsPlugin(),
|
||||||
// If you require a missing module and then `npm install` it, you still have
|
|
||||||
// to restart the development server for Webpack to discover it. This plugin
|
|
||||||
// makes the discovery automatic so you don't have to restart.
|
|
||||||
// See https://github.com/facebook/create-react-app/issues/186
|
|
||||||
isEnvDevelopment &&
|
|
||||||
new WatchMissingNodeModulesPlugin(paths.appNodeModules),
|
|
||||||
isEnvProduction &&
|
isEnvProduction &&
|
||||||
new MiniCssExtractPlugin({
|
new MiniCssExtractPlugin({
|
||||||
// Options similar to the same options in webpackOptions.output
|
// Options similar to the same options in webpackOptions.output
|
||||||
|
@ -545,6 +537,8 @@ module.exports = function(webpackEnv) {
|
||||||
]
|
]
|
||||||
}),
|
}),
|
||||||
// TypeScript type checking
|
// TypeScript type checking
|
||||||
|
// This hasn't been tested since migrating away from `jwl-dev-utils` as we
|
||||||
|
// don't currently use TypeScript and we'll likely have to update the dependency anyway.
|
||||||
useTypeScript &&
|
useTypeScript &&
|
||||||
new ForkTsCheckerWebpackPlugin({
|
new ForkTsCheckerWebpackPlugin({
|
||||||
typescript: resolve.sync('typescript', {
|
typescript: resolve.sync('typescript', {
|
||||||
|
@ -571,7 +565,6 @@ module.exports = function(webpackEnv) {
|
||||||
],
|
],
|
||||||
watch: paths.appSrc,
|
watch: paths.appSrc,
|
||||||
silent: true,
|
silent: true,
|
||||||
formatter: typescriptFormatter
|
|
||||||
})
|
})
|
||||||
].filter(Boolean),
|
].filter(Boolean),
|
||||||
// Some libraries import Node modules but don't use them in the browser.
|
// Some libraries import Node modules but don't use them in the browser.
|
||||||
|
|
|
@ -1,10 +1,10 @@
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
const fs = require('fs');
|
const fs = require('fs');
|
||||||
const errorOverlayMiddleware = require('jwl-dev-utils/errorOverlayMiddleware');
|
const errorOverlayMiddleware = require('react-dev-utils/errorOverlayMiddleware');
|
||||||
const evalSourceMapMiddleware = require('jwl-dev-utils/evalSourceMapMiddleware');
|
const evalSourceMapMiddleware = require('react-dev-utils/evalSourceMapMiddleware');
|
||||||
const noopServiceWorkerMiddleware = require('jwl-dev-utils/noopServiceWorkerMiddleware');
|
const noopServiceWorkerMiddleware = require('react-dev-utils/noopServiceWorkerMiddleware');
|
||||||
const ignoredFiles = require('jwl-dev-utils/ignoredFiles');
|
const ignoredFiles = require('react-dev-utils/ignoredFiles');
|
||||||
const paths = require('./paths');
|
const paths = require('./paths');
|
||||||
const getHttpsConfig = require('./getHttpsConfig');
|
const getHttpsConfig = require('./getHttpsConfig');
|
||||||
|
|
||||||
|
|
|
@ -43,7 +43,6 @@
|
||||||
"html-webpack-plugin": "4.0.0-alpha.2",
|
"html-webpack-plugin": "4.0.0-alpha.2",
|
||||||
"http-client": "^4.3.1",
|
"http-client": "^4.3.1",
|
||||||
"identity-obj-proxy": "3.0.0",
|
"identity-obj-proxy": "3.0.0",
|
||||||
"jwl-dev-utils": "^6.1.3",
|
|
||||||
"load-js": "^3.0.3",
|
"load-js": "^3.0.3",
|
||||||
"lodash.memoize": "^4.1.2",
|
"lodash.memoize": "^4.1.2",
|
||||||
"mini-css-extract-plugin": "0.4.3",
|
"mini-css-extract-plugin": "0.4.3",
|
||||||
|
@ -61,6 +60,7 @@
|
||||||
"react-addons-shallow-compare": "^15.6.0",
|
"react-addons-shallow-compare": "^15.6.0",
|
||||||
"react-app-polyfill": "^0.1.3",
|
"react-app-polyfill": "^0.1.3",
|
||||||
"react-autosuggest": "9.3.2",
|
"react-autosuggest": "9.3.2",
|
||||||
|
"react-dev-utils": "^12.0.1",
|
||||||
"react-dnd": "^10.0.2",
|
"react-dnd": "^10.0.2",
|
||||||
"react-dom": "16.13.1",
|
"react-dom": "16.13.1",
|
||||||
"react-modal": "3.4.4",
|
"react-modal": "3.4.4",
|
||||||
|
|
|
@ -22,11 +22,11 @@ const webpack = require('webpack');
|
||||||
const bfj = require('bfj');
|
const bfj = require('bfj');
|
||||||
const configFactory = require('../config/webpack.config');
|
const configFactory = require('../config/webpack.config');
|
||||||
const paths = require('../config/paths');
|
const paths = require('../config/paths');
|
||||||
const checkRequiredFiles = require('jwl-dev-utils/checkRequiredFiles');
|
const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
|
||||||
const formatWebpackMessages = require('jwl-dev-utils/formatWebpackMessages');
|
const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
|
||||||
const printHostingInstructions = require('jwl-dev-utils/printHostingInstructions');
|
const printHostingInstructions = require('react-dev-utils/printHostingInstructions');
|
||||||
const FileSizeReporter = require('jwl-dev-utils/FileSizeReporter');
|
const FileSizeReporter = require('react-dev-utils/FileSizeReporter');
|
||||||
const printBuildError = require('jwl-dev-utils/printBuildError');
|
const printBuildError = require('react-dev-utils/printBuildError');
|
||||||
|
|
||||||
const measureFileSizesBeforeBuild =
|
const measureFileSizesBeforeBuild =
|
||||||
FileSizeReporter.measureFileSizesBeforeBuild;
|
FileSizeReporter.measureFileSizesBeforeBuild;
|
||||||
|
@ -53,7 +53,7 @@ const config = configFactory('production');
|
||||||
|
|
||||||
// We require that you explicitly set browsers and do not fall back to
|
// We require that you explicitly set browsers and do not fall back to
|
||||||
// browserslist defaults.
|
// browserslist defaults.
|
||||||
const { checkBrowsers } = require('jwl-dev-utils/browsersHelper');
|
const { checkBrowsers } = require('react-dev-utils/browsersHelper');
|
||||||
checkBrowsers(paths.appPath, isInteractive)
|
checkBrowsers(paths.appPath, isInteractive)
|
||||||
.then(() => {
|
.then(() => {
|
||||||
// First, read the current file sizes in build directory.
|
// First, read the current file sizes in build directory.
|
||||||
|
|
|
@ -19,15 +19,15 @@ const fs = require('fs');
|
||||||
const chalk = require('chalk');
|
const chalk = require('chalk');
|
||||||
const webpack = require('webpack');
|
const webpack = require('webpack');
|
||||||
const WebpackDevServer = require('webpack-dev-server');
|
const WebpackDevServer = require('webpack-dev-server');
|
||||||
const clearConsole = require('jwl-dev-utils/clearConsole');
|
const clearConsole = require('react-dev-utils/clearConsole');
|
||||||
const checkRequiredFiles = require('jwl-dev-utils/checkRequiredFiles');
|
const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
|
||||||
const {
|
const {
|
||||||
choosePort,
|
choosePort,
|
||||||
createCompiler,
|
createCompiler,
|
||||||
prepareProxy,
|
prepareProxy,
|
||||||
prepareUrls,
|
prepareUrls,
|
||||||
} = require('jwl-dev-utils/WebpackDevServerUtils');
|
} = require('react-dev-utils/WebpackDevServerUtils');
|
||||||
const openBrowser = require('jwl-dev-utils/openBrowser');
|
const openBrowser = require('react-dev-utils/openBrowser');
|
||||||
const paths = require('../config/paths');
|
const paths = require('../config/paths');
|
||||||
const configFactory = require('../config/webpack.config');
|
const configFactory = require('../config/webpack.config');
|
||||||
const createDevServerConfig = require('../config/webpackDevServer.config');
|
const createDevServerConfig = require('../config/webpackDevServer.config');
|
||||||
|
@ -63,7 +63,7 @@ if (process.env.HOST) {
|
||||||
|
|
||||||
// We require that you explictly set browsers and do not fall back to
|
// We require that you explictly set browsers and do not fall back to
|
||||||
// browserslist defaults.
|
// browserslist defaults.
|
||||||
const { checkBrowsers } = require('jwl-dev-utils/browsersHelper');
|
const { checkBrowsers } = require('react-dev-utils/browsersHelper');
|
||||||
checkBrowsers(paths.appPath, isInteractive)
|
checkBrowsers(paths.appPath, isInteractive)
|
||||||
.then(() => {
|
.then(() => {
|
||||||
// We attempt to use the default port but if it is busy, we offer the user to
|
// We attempt to use the default port but if it is busy, we offer the user to
|
||||||
|
@ -80,7 +80,7 @@ checkBrowsers(paths.appPath, isInteractive)
|
||||||
const appName = require(paths.appPackageJson).name;
|
const appName = require(paths.appPackageJson).name;
|
||||||
const urls = prepareUrls(protocol, HOST, port);
|
const urls = prepareUrls(protocol, HOST, port);
|
||||||
// Create a webpack compiler that is configured with custom messages.
|
// Create a webpack compiler that is configured with custom messages.
|
||||||
const compiler = createCompiler(webpack, config, appName, urls, useYarn);
|
const compiler = createCompiler({ webpack, config, appName, urls, useYarn });
|
||||||
// Load proxy config
|
// Load proxy config
|
||||||
const proxySetting = require(paths.appPackageJson).proxy;
|
const proxySetting = require(paths.appPackageJson).proxy;
|
||||||
const proxyConfig = prepareProxy(proxySetting, paths.appPublic);
|
const proxyConfig = prepareProxy(proxySetting, paths.appPublic);
|
||||||
|
|
Loading…
Reference in a new issue