fix: only load preset when needed

This commit is contained in:
Oliver Eyton-Williams
2020-01-16 11:27:26 +01:00
committed by mrugesh
parent 21833ab508
commit d87c16e65e

View File

@ -47,12 +47,6 @@ async function loadBabel() {
Babel = await import( Babel = await import(
/* webpackChunkName: "@babel/standalone" */ '@babel/standalone' /* webpackChunkName: "@babel/standalone" */ '@babel/standalone'
); );
presetEnv = await import(
/* webpackChunkName: "@babel/preset-env" */ '@babel/preset-env'
);
presetReact = await import(
/* webpackChunkName: "@babel/preset-react" */ '@babel/preset-react'
);
/* eslint-enable no-inline-comments */ /* eslint-enable no-inline-comments */
Babel.registerPlugin( Babel.registerPlugin(
'loopProtection', 'loopProtection',
@ -62,13 +56,19 @@ async function loadBabel() {
'testLoopProtection', 'testLoopProtection',
protect(testProtectTimeout, testLoopProtectCB, loopsPerTimeoutCheck) protect(testProtectTimeout, testLoopProtectCB, loopsPerTimeoutCheck)
); );
}
async function loadPresetEnv() {
if (presetEnv) return;
/* eslint-disable no-inline-comments */
presetEnv = await import(
/* webpackChunkName: "@babel/preset-env" */ '@babel/preset-env'
);
/* eslint-enable no-inline-comments */
babelOptionsJSBase = { babelOptionsJSBase = {
presets: [presetEnv] presets: [presetEnv]
}; };
babelOptionsJSX = {
plugins: ['loopProtection'],
presets: [presetEnv, presetReact]
};
babelOptionsJS = { babelOptionsJS = {
...babelOptionsJSBase, ...babelOptionsJSBase,
plugins: ['testLoopProtection'] plugins: ['testLoopProtection']
@ -79,6 +79,23 @@ async function loadBabel() {
}; };
} }
async function loadPresetReact() {
if (presetReact) return;
/* eslint-disable no-inline-comments */
presetReact = await import(
/* webpackChunkName: "@babel/preset-react" */ '@babel/preset-react'
);
if (!presetEnv)
presetEnv = await import(
/* webpackChunkName: "@babel/preset-env" */ '@babel/preset-env'
);
/* eslint-enable no-inline-comments */
babelOptionsJSX = {
plugins: ['loopProtection'],
presets: [presetEnv, presetReact]
};
}
const babelTransformCode = options => code => const babelTransformCode = options => code =>
Babel.transform(code, options).code; Babel.transform(code, options).code;
@ -128,6 +145,7 @@ const babelTransformer = ({ preview = false, protect = true }) => {
testJS, testJS,
async code => { async code => {
await loadBabel(); await loadBabel();
await loadPresetEnv();
return partial( return partial(
vinyl.transformHeadTailAndContents, vinyl.transformHeadTailAndContents,
tryTransform(babelTransformCode(options)) tryTransform(babelTransformCode(options))
@ -138,6 +156,7 @@ const babelTransformer = ({ preview = false, protect = true }) => {
testJSX, testJSX,
async code => { async code => {
await loadBabel(); await loadBabel();
await loadPresetReact();
return flow( return flow(
partial( partial(
vinyl.transformHeadTailAndContents, vinyl.transformHeadTailAndContents,
@ -164,6 +183,7 @@ async function transformSASS(element) {
async function transformScript(element) { async function transformScript(element) {
await loadBabel(); await loadBabel();
await loadPresetReact();
const scriptTags = element.querySelectorAll('script'); const scriptTags = element.querySelectorAll('script');
scriptTags.forEach(script => { scriptTags.forEach(script => {
script.innerHTML = tryTransform(babelTransformCode(babelOptionsJSX))( script.innerHTML = tryTransform(babelTransformCode(babelOptionsJSX))(