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

View File

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