From ed69b346814eddd418b77b0f5f644eca41992677 Mon Sep 17 00:00:00 2001 From: Ryan Christian Date: Mon, 7 Feb 2022 19:37:03 -0600 Subject: [PATCH] refactor: Revising the babel setup --- packages/cli/babel/index.js | 13 ++--- packages/cli/lib/lib/babel-config.js | 9 +-- .../lib/lib/webpack/webpack-base-config.js | 56 ++++++++----------- packages/cli/package.json | 3 - packages/cli/tests/images/build.js | 30 +++++----- packages/cli/tests/lib/cli.js | 3 +- packages/cli/tests/lib/utils.js | 4 +- yarn.lock | 2 +- 8 files changed, 52 insertions(+), 68 deletions(-) diff --git a/packages/cli/babel/index.js b/packages/cli/babel/index.js index 6d54506f8..ae2740088 100644 --- a/packages/cli/babel/index.js +++ b/packages/cli/babel/index.js @@ -1,4 +1,3 @@ -var isProd = (process.env.BABEL_ENV || process.env.NODE_ENV) === 'production'; /** * test env detection is used to default mode for * preset-env modules to "commonjs" otherwise, testing framework @@ -6,9 +5,6 @@ var isProd = (process.env.BABEL_ENV || process.env.NODE_ENV) === 'production'; */ var isTest = (process.env.BABEL_ENV || process.env.NODE_ENV) === 'test'; -// default supported browsers for prod nomodule bundles: -var defaultBrowserList = ['> 0.25%', 'IE >= 9']; - // default supported browsers for all dev bundles (module/nomodule is not used): // see https://github.com/babel/babel/blob/master/packages/babel-compat-data/data/native-modules.json var defaultBrowserListDev = [ @@ -21,10 +17,9 @@ var defaultBrowserListDev = [ 'ios_saf >= 10.3', 'edge >= 16', 'opera >= 48', - 'samsung >= 8.2' + 'samsung >= 8.2', ]; -// preact-cli babel configs var babelConfigs = require('../lib/lib/babel-config'); /** @@ -34,9 +29,9 @@ var babelConfigs = require('../lib/lib/babel-config'); module.exports = function preactCli(ctx, userOptions = {}) { // set default configs based on user environment var presetOptions = { - env: isProd ? 'production' : 'development', + env: 'development', modules: isTest ? 'commonjs' : false, - browsers: isProd ? defaultBrowserList : defaultBrowserListDev, + browsers: defaultBrowserListDev, }; // user specified options always the strongest @@ -46,7 +41,7 @@ module.exports = function preactCli(ctx, userOptions = {}) { // yay! return the configs return babelConfigs( - { env: { production: presetOptions.env === 'production' } }, + { env: { production: false } }, { modules: presetOptions.modules, browsers: presetOptions.browsers } ); }; diff --git a/packages/cli/lib/lib/babel-config.js b/packages/cli/lib/lib/babel-config.js index df2bb1a90..5acd8bfa3 100644 --- a/packages/cli/lib/lib/babel-config.js +++ b/packages/cli/lib/lib/babel-config.js @@ -3,7 +3,7 @@ module.exports = function (env, options = {}) { return { presets: [ - [ + !isProd && [ require.resolve('@babel/preset-env'), { bugfixes: true, @@ -14,13 +14,10 @@ module.exports = function (env, options = {}) { exclude: ['transform-regenerator'], }, ], - ], + ].filter(Boolean), plugins: [ - require.resolve('@babel/plugin-syntax-dynamic-import'), - require.resolve('@babel/plugin-transform-object-assign'), + !isProd && require.resolve('@babel/plugin-transform-object-assign'), [require.resolve('@babel/plugin-proposal-decorators'), { legacy: true }], - require.resolve('@babel/plugin-proposal-class-properties'), - require.resolve('@babel/plugin-proposal-object-rest-spread'), isProd && require.resolve('babel-plugin-transform-react-remove-prop-types'), require.resolve('babel-plugin-macros'), diff --git a/packages/cli/lib/lib/webpack/webpack-base-config.js b/packages/cli/lib/lib/webpack/webpack-base-config.js index 8c511eb98..ec26508f8 100644 --- a/packages/cli/lib/lib/webpack/webpack-base-config.js +++ b/packages/cli/lib/lib/webpack/webpack-base-config.js @@ -71,13 +71,12 @@ module.exports = function createBaseConfig(env) { let babelrc = readJson(resolve(cwd, babelConfigFile)) || {}; // use browserslist config environment, config default, or default browsers - // default browsers are > 0.25% global market share or Internet Explorer >= 9 - const browserslistDefaults = ['> 0.25%', 'IE >= 9']; + // default browsers are '> 0.5%, last 2 versions, Firefox ESR, not dead' const browserlistConfig = Object(browserslist.findConfig(cwd)); const browsers = (isProd ? browserlistConfig.production : browserlistConfig.development) || browserlistConfig.defaults || - browserslistDefaults; + 'defaults'; let userNodeModules = findAllNodeModules(cwd); let cliNodeModules = findAllNodeModules(__dirname); @@ -308,36 +307,29 @@ module.exports = function createBaseConfig(env) { summary: false, clear: true, }), - ...(tsconfig - ? [ - new ForkTsCheckerWebpackPlugin({ - typescript: { - configFile: tsconfig, - diagnosticOptions: { - syntactic: true, - }, - }, - }), - ] - : []), - ...(isProd - ? [ - new webpack.LoaderOptionsPlugin({ minimize: true }), - new webpack.optimize.ModuleConcatenationPlugin(), + tsconfig && + new ForkTsCheckerWebpackPlugin({ + typescript: { + configFile: tsconfig, + diagnosticOptions: { + syntactic: true, + }, + }, + }), + isProd && new webpack.LoaderOptionsPlugin({ minimize: true }), + new webpack.optimize.ModuleConcatenationPlugin(), - // strip out babel-helper invariant checks - new ReplacePlugin({ - include: /babel-helper$/, - patterns: [ - { - regex: /throw\s+(new\s+)?(Type|Reference)?Error\s*\(/g, - value: s => `return;${Array(s.length - 7).join(' ')}(`, - }, - ], - }), - ] - : []), - ], + // strip out babel-helper invariant checks + new ReplacePlugin({ + include: /babel-helper$/, + patterns: [ + { + regex: /throw\s+(new\s+)?(Type|Reference)?Error\s*\(/g, + value: s => `return;${Array(s.length - 7).join(' ')}(`, + }, + ], + }), + ].filter(Boolean), optimization: { ...(isProd && { moduleIds: 'deterministic' }), diff --git a/packages/cli/package.json b/packages/cli/package.json index 8372c03aa..6c00ad56f 100644 --- a/packages/cli/package.json +++ b/packages/cli/package.json @@ -72,10 +72,7 @@ }, "dependencies": { "@babel/core": "^7.13.16", - "@babel/plugin-proposal-class-properties": "^7.13.0", "@babel/plugin-proposal-decorators": "^7.13.15", - "@babel/plugin-proposal-object-rest-spread": "^7.13.8", - "@babel/plugin-syntax-dynamic-import": "^7.8.3", "@babel/plugin-transform-object-assign": "^7.12.13", "@babel/plugin-transform-react-jsx": "^7.13.12", "@babel/preset-env": "^7.13.15", diff --git a/packages/cli/tests/images/build.js b/packages/cli/tests/images/build.js index d9e35338e..fd7433b53 100644 --- a/packages/cli/tests/images/build.js +++ b/packages/cli/tests/images/build.js @@ -9,18 +9,18 @@ exports.default = { 'ssr-build/ssr-bundle.77c49.css': 1281, 'ssr-build/ssr-bundle.77c49.css.map': 2070, - 'ssr-build/ssr-bundle.js': 11090, + 'ssr-build/ssr-bundle.js': 9801, 'ssr-build/ssr-bundle.js.map': 30625, - 'bundle.b891a.js': 21323, - 'bundle.b891a.js.map': 85534, - 'bundle.b891a.legacy.js': 22514, - 'bundle.b891a.legacy.js.map': 106422, + 'bundle.6d2a5.js': 21323, + 'bundle.6d2a5.js.map': 85534, + 'bundle.6d2a5.legacy.js': 22514, + 'bundle.6d2a5.legacy.js.map': 106422, 'bundle.9bde9.css': 945, 'bundle.9bde9.css.map': 1758, - 'dom-polyfills.b1d0e.legacy.js': 14068, - 'dom-polyfills.b1d0e.legacy.js.map': 24195, + 'dom-polyfills.ed461.legacy.js': 13338, + 'dom-polyfills.ed461.legacy.js.map': 24195, 'es-polyfills.legacy.js': 42540, 'favicon.ico': 15086, @@ -29,17 +29,17 @@ exports.default = { 'preact_prerender_data.json': 11, 'push-manifest.json': 450, - 'route-home.chunk.cbec8.js': 326, - 'route-home.chunk.cbec8.js.map': 1615, - 'route-home.chunk.cbec8.legacy.js': 363, - 'route-home.chunk.cbec8.legacy.js.map': 1913, + 'route-home.chunk.25907.js': 306, + 'route-home.chunk.25907.js.map': 1615, + 'route-home.chunk.25907.legacy.js': 363, + 'route-home.chunk.25907.legacy.js.map': 1913, 'route-home.chunk.f1c94.css': 112, 'route-home.chunk.f1c94.css.map': 224, - 'route-profile.chunk.5cd6c.js': 3517, - 'route-profile.chunk.5cd6c.js.map': 13159, - 'route-profile.chunk.5cd6c.legacy.js': 3561, - 'route-profile.chunk.5cd6c.legacy.js.map': 16479, + 'route-profile.chunk.d1e1a.js': 2469, + 'route-profile.chunk.d1e1a.js.map': 9736, + 'route-profile.chunk.d1e1a.legacy.js': 2624, + 'route-profile.chunk.d1e1a.legacy.js.map': 12373, 'route-profile.chunk.e0d39.css': 118, 'route-profile.chunk.e0d39.css.map': 231, }; diff --git a/packages/cli/tests/lib/cli.js b/packages/cli/tests/lib/cli.js index 6b7171a1f..366e521f9 100644 --- a/packages/cli/tests/lib/cli.js +++ b/packages/cli/tests/lib/cli.js @@ -10,7 +10,8 @@ function linkPackage(name, from, to) { symlink(join(from, 'node_modules', name), join(to, 'node_modules', name)); } -// Removes optimize-plugin unless the test needs it. +// Disables the slow portions of `optimize-plugin` for +// the tests that don't rely on its functionality. async function handleOptimize(cwd, options) { if (!options || !options.optimize) { const configFile = `${cwd}/preact.config.js`; diff --git a/packages/cli/tests/lib/utils.js b/packages/cli/tests/lib/utils.js index a451517ff..440cc8286 100644 --- a/packages/cli/tests/lib/utils.js +++ b/packages/cli/tests/lib/utils.js @@ -65,7 +65,9 @@ const disableOptimize = ` const optimizePlugin = helpers.getPluginsByName(config, 'OptimizePlugin')[0]; if (optimizePlugin) { - config.plugins.splice(optimizePlugin.index, 1); + const { plugin } = optimizePlugin; + plugin.options.downlevel = false; + plugin.options.minify = false; } `; diff --git a/yarn.lock b/yarn.lock index bec6705c8..5106961d7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -528,7 +528,7 @@ "@babel/helper-plugin-utils" "^7.13.0" "@babel/plugin-syntax-numeric-separator" "^7.10.4" -"@babel/plugin-proposal-object-rest-spread@^7.13.8", "@babel/plugin-proposal-object-rest-spread@^7.14.2": +"@babel/plugin-proposal-object-rest-spread@^7.14.2": version "7.14.2" resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.14.2.tgz#e17d418f81cc103fedd4ce037e181c8056225abc" integrity sha512-hBIQFxwZi8GIp934+nj5uV31mqclC1aYDhctDu5khTi9PCCUOczyy0b34W0oE9U/eJXiqQaKyVsmjeagOaSlbw==