remove es6 module build, as we use some unsupported syntax in there

chrome 61 supports modules, but support for the coalesce operator
was only added in chrome 80. We don't transpile any syntax in the
es6 build, so things break in chrome 61 - 79. Let's just have everyone
use the legacy build which is only ~150kb instead of ~30kb and
not run the risk of running into more issues like this.

Alternatively, we can transpile some of the more recent syntax
features we use like coalescing operator, but don't feel like
making an exhaustive list of these atm.
This commit is contained in:
Bruno Windels 2021-02-03 18:53:33 +01:00
parent dc23d9f584
commit a4642540b4
1 changed files with 3 additions and 18 deletions

View File

@ -56,8 +56,7 @@ async function build() {
const assets = new AssetMap(targetDir);
const imageAssets = await copyFolder(path.join(projectDir, "images"), path.join(targetDir, "images"));
assets.addSubMap(imageAssets);
await assets.write(`bundle-esm.js`, await buildJs("src/main.js", assets));
await assets.write(`bundle-legacy.js`, await buildJsLegacy("src/main.js", assets, ["src/polyfill.js"]));
await assets.write(`bundle.js`, await buildJsLegacy("src/main.js", assets, ["src/polyfill.js"]));
await assets.write(`bundle.css`, await buildCss("css/main.css", targetDir, assets));
await assets.writeUnhashed(".well-known/apple-app-site-association", buildAppleAssociatedAppsFile(createClients()));
await assets.writeUnhashed("index.html", await buildHtml(assets));
@ -70,9 +69,8 @@ async function buildHtml(assets) {
const doc = cheerio.load(devHtml);
doc("link[rel=stylesheet]").attr("href", assets.resolve(`bundle.css`));
const mainScripts = [
`<script type="module">import {main} from "./${assets.resolve(`bundle-esm.js`)}"; main(document.body);</script>`,
`<script type="text/javascript" nomodule src="${assets.resolve(`bundle-legacy.js`)}"></script>`,
`<script type="text/javascript" nomodule>bundle.main(document.body);</script>`
`<script type="text/javascript" src="${assets.resolve(`bundle.js`)}"></script>`,
`<script type="text/javascript">bundle.main(document.body);</script>`
];
doc("script#main").replaceWith(mainScripts.join(""));
return doc.html();
@ -86,19 +84,6 @@ function createReplaceUrlPlugin(assets) {
return replace(replacements);
}
async function buildJs(mainFile, assets, extraFiles = []) {
// create js bundle
const bundle = await rollup({
input: extraFiles.concat(mainFile),
plugins: [multi(), terser(), createReplaceUrlPlugin(assets)],
});
const {output} = await bundle.generate({
format: 'es',
});
const code = output[0].code;
return code;
}
async function buildJsLegacy(mainFile, assets, extraFiles = []) {
// compile down to whatever IE 11 needs
const babelPlugin = babel.babel({