Use ES modules and dynamic import for Webpack latest builds (#16849)
This commit is contained in:
parent
197638b282
commit
fa1a6affa7
|
@ -10,6 +10,12 @@ supports es6-module-dynamic-import
|
|||
not Safari < 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
|
||||
not dead
|
||||
|
||||
|
|
|
@ -77,6 +77,7 @@ module.exports.htmlMinifierOptions = {
|
|||
module.exports.terserOptions = ({ latestBuild, isTestBuild }) => ({
|
||||
safari10: !latestBuild,
|
||||
ecma: latestBuild ? 2015 : 5,
|
||||
module: latestBuild,
|
||||
format: { comments: false },
|
||||
sourceMap: !isTestBuild,
|
||||
});
|
||||
|
|
|
@ -41,7 +41,7 @@ const createWebpackConfig = ({
|
|||
return {
|
||||
name,
|
||||
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 production, generate source maps for accurate stack traces without source code
|
||||
// For development, generate "cheap" versions that can map to original line numbers
|
||||
|
@ -84,6 +84,13 @@ const createWebpackConfig = ({
|
|||
],
|
||||
moduleIds: isProdBuild && !isStatsBuild ? "deterministic" : "named",
|
||||
chunkIds: isProdBuild && !isStatsBuild ? "deterministic" : "named",
|
||||
splitChunks: {
|
||||
// Disable splitting for web workers with ESM output
|
||||
// Imports of external chunks are broken
|
||||
chunks: latestBuild
|
||||
? (chunk) => !chunk.canBeInitial() && !/^.+-worker$/.test(chunk.name)
|
||||
: undefined,
|
||||
},
|
||||
},
|
||||
plugins: [
|
||||
!isStatsBuild && new WebpackBar({ fancy: !isProdBuild }),
|
||||
|
@ -163,6 +170,7 @@ const createWebpackConfig = ({
|
|||
},
|
||||
},
|
||||
output: {
|
||||
module: latestBuild,
|
||||
filename: ({ chunk }) =>
|
||||
!isProdBuild || isStatsBuild || dontHash.has(chunk.name)
|
||||
? "[name].js"
|
||||
|
@ -196,7 +204,7 @@ const createWebpackConfig = ({
|
|||
: undefined,
|
||||
},
|
||||
experiments: {
|
||||
topLevelAwait: true,
|
||||
outputModule: true,
|
||||
},
|
||||
};
|
||||
};
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
import { Remote, wrap } from "comlink";
|
||||
import type { Api } from "./sort_filter_worker";
|
||||
import type { Api } from "./sort-filter-worker";
|
||||
|
||||
type FilterDataType = Api["filterData"];
|
||||
type FilterDataParamTypes = Parameters<FilterDataType>;
|
||||
|
@ -9,27 +9,28 @@ type SortDataParamTypes = Parameters<SortDataType>;
|
|||
|
||||
let worker: Remote<Api> | undefined;
|
||||
|
||||
const getWorker = () => {
|
||||
if (!worker) {
|
||||
worker = wrap(
|
||||
new Worker(
|
||||
/* webpackChunkName: "sort-filter-worker" */
|
||||
new URL("./sort-filter-worker", import.meta.url)
|
||||
)
|
||||
);
|
||||
}
|
||||
return worker;
|
||||
};
|
||||
|
||||
export const filterData = (
|
||||
data: FilterDataParamTypes[0],
|
||||
columns: FilterDataParamTypes[1],
|
||||
filter: FilterDataParamTypes[2]
|
||||
): Promise<ReturnType<FilterDataType>> => {
|
||||
if (!worker) {
|
||||
worker = wrap(new Worker(new URL("./sort_filter_worker", import.meta.url)));
|
||||
}
|
||||
|
||||
return worker.filterData(data, columns, filter);
|
||||
};
|
||||
|
||||
): Promise<ReturnType<FilterDataType>> =>
|
||||
getWorker().filterData(data, columns, filter);
|
||||
export const sortData = (
|
||||
data: SortDataParamTypes[0],
|
||||
columns: SortDataParamTypes[1],
|
||||
direction: SortDataParamTypes[2],
|
||||
sortColumn: SortDataParamTypes[3]
|
||||
): Promise<ReturnType<SortDataType>> => {
|
||||
if (!worker) {
|
||||
worker = wrap(new Worker(new URL("./sort_filter_worker", import.meta.url)));
|
||||
}
|
||||
|
||||
return worker.sortData(data, columns, direction, sortColumn);
|
||||
};
|
||||
): Promise<ReturnType<SortDataType>> =>
|
||||
getWorker().sortData(data, columns, direction, sortColumn);
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
import { Remote, wrap } from "comlink";
|
||||
import type { Api } from "./markdown_worker";
|
||||
import type { Api } from "./markdown-worker";
|
||||
|
||||
type RenderMarkdownType = Api["renderMarkdown"];
|
||||
type RenderMarkdownParamTypes = Parameters<RenderMarkdownType>;
|
||||
|
@ -12,8 +12,12 @@ export const renderMarkdown = async (
|
|||
hassOptions?: RenderMarkdownParamTypes[2]
|
||||
): Promise<ReturnType<RenderMarkdownType>> => {
|
||||
if (!worker) {
|
||||
worker = wrap(new Worker(new URL("./markdown_worker", import.meta.url)));
|
||||
worker = wrap(
|
||||
new Worker(
|
||||
/* webpackChunkName: "markdown-worker" */
|
||||
new URL("./markdown-worker", import.meta.url)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
return worker.renderMarkdown(content, markedOptions, hassOptions);
|
||||
};
|
||||
|
|
|
@ -1,8 +1,13 @@
|
|||
import webpack from "../build-scripts/webpack.cjs";
|
||||
|
||||
export default webpack.createAppConfig({
|
||||
const config = webpack.createAppConfig({
|
||||
isProdBuild: false,
|
||||
latestBuild: true,
|
||||
isStatsBuild: false,
|
||||
isTestBuild: true,
|
||||
});
|
||||
|
||||
// instant-mocha forces a CJS library, so cannot output ESM
|
||||
config.output.module = false;
|
||||
|
||||
export default config;
|
||||
|
|
Loading…
Reference in New Issue