Use ES modules and dynamic import for Webpack latest builds (#16620)

This commit is contained in:
Steve Repsher 2023-05-30 14:27:49 -04:00 committed by GitHub
parent 70fbf68603
commit 7b350e31dd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 16 additions and 3 deletions

View File

@ -10,6 +10,12 @@ supports es6-module-dynamic-import
not Safari < 13 not Safari < 13
not iOS < 13 not iOS < 13
# Exclude KaiOS, QQ, and UC browsers due to lack of sufficient feature support data
# Babel ignores these automatically, but we need here for Webpack to output ESM with dynamic imports
not KaiOS > 0
not QQAndroid > 0
not UCAndroid > 0
# Exclude unsupported browsers # Exclude unsupported browsers
not dead not dead

View File

@ -77,6 +77,7 @@ module.exports.htmlMinifierOptions = {
module.exports.terserOptions = ({ latestBuild, isTestBuild }) => ({ module.exports.terserOptions = ({ latestBuild, isTestBuild }) => ({
safari10: !latestBuild, safari10: !latestBuild,
ecma: latestBuild ? 2015 : 5, ecma: latestBuild ? 2015 : 5,
module: latestBuild,
format: { comments: false }, format: { comments: false },
sourceMap: !isTestBuild, sourceMap: !isTestBuild,
}); });

View File

@ -41,7 +41,7 @@ const createWebpackConfig = ({
return { return {
name, name,
mode: isProdBuild ? "production" : "development", mode: isProdBuild ? "production" : "development",
target: ["web", latestBuild ? "es2017" : "es5"], target: `browserslist:${latestBuild ? "modern" : "legacy"}`,
// For tests/CI, source maps are skipped to gain build speed // For tests/CI, source maps are skipped to gain build speed
// For production, generate source maps for accurate stack traces without source code // For production, generate source maps for accurate stack traces without source code
// For development, generate "cheap" versions that can map to original line numbers // For development, generate "cheap" versions that can map to original line numbers
@ -163,6 +163,7 @@ const createWebpackConfig = ({
}, },
}, },
output: { output: {
module: latestBuild,
filename: ({ chunk }) => filename: ({ chunk }) =>
!isProdBuild || isStatsBuild || dontHash.has(chunk.name) !isProdBuild || isStatsBuild || dontHash.has(chunk.name)
? "[name].js" ? "[name].js"
@ -196,7 +197,7 @@ const createWebpackConfig = ({
: undefined, : undefined,
}, },
experiments: { experiments: {
topLevelAwait: true, outputModule: true,
}, },
}; };
}; };

View File

@ -1,8 +1,13 @@
import webpack from "../build-scripts/webpack.cjs"; import webpack from "../build-scripts/webpack.cjs";
export default webpack.createAppConfig({ const config = webpack.createAppConfig({
isProdBuild: false, isProdBuild: false,
latestBuild: true, latestBuild: true,
isStatsBuild: false, isStatsBuild: false,
isTestBuild: true, isTestBuild: true,
}); });
// instant-mocha forces a CJS library, so cannot output ESM
config.output.module = false;
export default config;