Improve Babel configuration and automatically load polyfills (#27333)

This commit is contained in:
Renaud Chaput 2023-10-31 11:55:13 +01:00 committed by GitHub
parent 9c8891b39a
commit 0e3401bc1c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 30 additions and 126 deletions

View file

@ -1,5 +1,5 @@
# Node.js # In test, compile the NodeJS code as if we are in production
NODE_ENV=tests NODE_ENV=production
# Federation # Federation
LOCAL_DOMAIN=cb6e6126.ngrok.io LOCAL_DOMAIN=cb6e6126.ngrok.io
LOCAL_HTTPS=true LOCAL_HTTPS=true

View file

@ -1,30 +0,0 @@
import 'core-js/features/object/assign';
import 'core-js/features/object/values';
import 'core-js/features/symbol';
import 'core-js/features/promise/finally';
import { decode as decodeBase64 } from '../utils/base64';
if (!Object.hasOwn(HTMLCanvasElement.prototype, 'toBlob')) {
const BASE64_MARKER = ';base64,';
Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {
value: function (
this: HTMLCanvasElement,
callback: BlobCallback,
type = 'image/png',
quality: unknown,
) {
const dataURL: string = this.toDataURL(type, quality);
let data;
if (dataURL.includes(BASE64_MARKER)) {
const [, base64] = dataURL.split(BASE64_MARKER);
data = decodeBase64(base64);
} else {
[, data] = dataURL.split(',');
}
callback(new Blob([data], { type }));
},
});
}

View file

@ -1,2 +1 @@
import 'abortcontroller-polyfill/dist/abortcontroller-polyfill-only';
import 'requestidlecallback'; import 'requestidlecallback';

View file

@ -4,39 +4,18 @@
import { loadIntlPolyfills } from './intl'; import { loadIntlPolyfills } from './intl';
function importBasePolyfills() {
return import(/* webpackChunkName: "base_polyfills" */ './base_polyfills');
}
function importExtraPolyfills() { function importExtraPolyfills() {
return import(/* webpackChunkName: "extra_polyfills" */ './extra_polyfills'); return import(/* webpackChunkName: "extra_polyfills" */ './extra_polyfills');
} }
export function loadPolyfills() { export function loadPolyfills() {
const needsBasePolyfills = !( // Safari does not have requestIdleCallback.
'toBlob' in HTMLCanvasElement.prototype &&
'assign' in Object &&
'values' in Object &&
'Symbol' in window &&
'finally' in Promise.prototype
);
// Latest version of Firefox and Safari do not have IntersectionObserver.
// Edge does not have requestIdleCallback.
// This avoids shipping them all the polyfills. // This avoids shipping them all the polyfills.
/* eslint-disable @typescript-eslint/no-unnecessary-condition -- those properties might not exist in old browsers, even if they are always here in types */ const needsExtraPolyfills = !window.requestIdleCallback;
const needsExtraPolyfills = !(
window.AbortController &&
window.IntersectionObserver &&
window.IntersectionObserverEntry &&
'isIntersecting' in IntersectionObserverEntry.prototype &&
window.requestIdleCallback
);
/* eslint-enable @typescript-eslint/no-unnecessary-condition */
return Promise.all([ return Promise.all([
loadIntlPolyfills(), loadIntlPolyfills(),
needsBasePolyfills && importBasePolyfills(), // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- those properties might not exist in old browsers, even if they are always here in types
needsExtraPolyfills && importExtraPolyfills(), needsExtraPolyfills && importExtraPolyfills(),
]); ]);
} }

View file

@ -7,8 +7,8 @@ module.exports = (api) => {
}; };
const envOptions = { const envOptions = {
loose: true, useBuiltIns: "usage",
modules: false, corejs: { version: "3.30" },
debug: false, debug: false,
include: [ include: [
'transform-numeric-separator', 'transform-numeric-separator',
@ -18,29 +18,14 @@ module.exports = (api) => {
], ],
}; };
const config = { const plugins = [
presets: [
'@babel/preset-typescript',
['@babel/react', reactOptions],
['@babel/env', envOptions],
],
plugins: [
['formatjs'], ['formatjs'],
'preval', 'preval',
], ];
overrides: [
{
test: /tesseract\.js/,
presets: [
['@babel/env', { ...envOptions, modules: 'commonjs' }],
],
},
],
};
switch (env) { switch (env) {
case 'production': case 'production':
config.plugins.push(...[ plugins.push(...[
'lodash', 'lodash',
[ [
'transform-react-remove-prop-types', 'transform-react-remove-prop-types',
@ -63,14 +48,29 @@ module.exports = (api) => {
], ],
]); ]);
break; break;
case 'development': case 'development':
reactOptions.development = true; reactOptions.development = true;
envOptions.debug = true; envOptions.debug = true;
break; break;
case 'test':
envOptions.modules = 'commonjs';
break;
} }
const config = {
presets: [
'@babel/preset-typescript',
['@babel/react', reactOptions],
['@babel/env', envOptions],
],
plugins,
overrides: [
{
test: /tesseract\.js/,
presets: [
['@babel/env', { ...envOptions, modules: 'commonjs' }],
],
},
],
};
return config; return config;
}; };

View file

@ -2,7 +2,6 @@ const babel = require('./babel');
const css = require('./css'); const css = require('./css');
const file = require('./file'); const file = require('./file');
const materialIcons = require('./material_icons'); const materialIcons = require('./material_icons');
const nodeModules = require('./node_modules');
const tesseract = require('./tesseract'); const tesseract = require('./tesseract');
// Webpack loaders are processed in reverse order // Webpack loaders are processed in reverse order
@ -13,6 +12,5 @@ module.exports = {
file, file,
tesseract, tesseract,
css, css,
nodeModules,
babel, babel,
}; };

View file

@ -1,27 +0,0 @@
const { join } = require('path');
const { settings, env } = require('../configuration');
module.exports = {
test: /\.(js|mjs)$/,
include: /node_modules/,
exclude: [
/@babel(?:\/|\\{1,2})runtime/,
/tesseract.js/,
],
use: [
{
loader: 'babel-loader',
options: {
babelrc: false,
plugins: [
'transform-react-remove-prop-types',
],
cacheDirectory: join(settings.cache_path, 'babel-loader-node-modules'),
cacheCompression: env.NODE_ENV === 'production',
compact: false,
sourceMaps: false,
},
},
],
};

View file

@ -1,9 +0,0 @@
// Note: You must restart bin/webpack-dev-server for changes to take effect
const { merge } = require('webpack-merge');
const sharedConfig = require('./shared');
module.exports = merge(sharedConfig, {
mode: 'production',
});

View file

@ -49,7 +49,6 @@
"@reduxjs/toolkit": "^1.9.5", "@reduxjs/toolkit": "^1.9.5",
"@renchap/compression-webpack-plugin": "^6.1.4", "@renchap/compression-webpack-plugin": "^6.1.4",
"@svgr/webpack": "^5.5.0", "@svgr/webpack": "^5.5.0",
"abortcontroller-polyfill": "^1.7.5",
"arrow-key-navigation": "^1.2.0", "arrow-key-navigation": "^1.2.0",
"async-mutex": "^0.4.0", "async-mutex": "^0.4.0",
"autoprefixer": "^10.4.14", "autoprefixer": "^10.4.14",

View file

@ -2904,11 +2904,6 @@ abort-controller@^3.0.0:
dependencies: dependencies:
event-target-shim "^5.0.0" event-target-shim "^5.0.0"
abortcontroller-polyfill@^1.7.5:
version "1.7.5"
resolved "https://registry.yarnpkg.com/abortcontroller-polyfill/-/abortcontroller-polyfill-1.7.5.tgz#6738495f4e901fbb57b6c0611d0c75f76c485bed"
integrity sha512-JMJ5soJWP18htbbxJjG7bG6yuI6pRhgJ0scHHTfkUjf6wjP912xZWvM+A4sJK3gqd9E8fcPbDnOefbA9Th/FIQ==
accepts@~1.3.4, accepts@~1.3.5, accepts@~1.3.8: accepts@~1.3.4, accepts@~1.3.5, accepts@~1.3.8:
version "1.3.8" version "1.3.8"
resolved "https://registry.yarnpkg.com/accepts/-/accepts-1.3.8.tgz#0bf0be125b67014adcb0b0921e62db7bffe16b2e" resolved "https://registry.yarnpkg.com/accepts/-/accepts-1.3.8.tgz#0bf0be125b67014adcb0b0921e62db7bffe16b2e"