Improve Babel configuration and automatically load polyfills (#27333)
This commit is contained in:
parent
9c8891b39a
commit
0e3401bc1c
10 changed files with 30 additions and 126 deletions
|
@ -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
|
||||||
|
|
|
@ -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 }));
|
|
||||||
},
|
|
||||||
});
|
|
||||||
}
|
|
|
@ -1,2 +1 @@
|
||||||
import 'abortcontroller-polyfill/dist/abortcontroller-polyfill-only';
|
|
||||||
import 'requestidlecallback';
|
import 'requestidlecallback';
|
||||||
|
|
|
@ -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(),
|
||||||
]);
|
]);
|
||||||
}
|
}
|
||||||
|
|
|
@ -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: [
|
['formatjs'],
|
||||||
'@babel/preset-typescript',
|
'preval',
|
||||||
['@babel/react', reactOptions],
|
];
|
||||||
['@babel/env', envOptions],
|
|
||||||
],
|
|
||||||
plugins: [
|
|
||||||
['formatjs'],
|
|
||||||
'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;
|
||||||
};
|
};
|
||||||
|
|
|
@ -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,
|
||||||
};
|
};
|
||||||
|
|
|
@ -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,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
};
|
|
|
@ -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',
|
|
||||||
});
|
|
|
@ -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",
|
||||||
|
|
|
@ -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"
|
||||||
|
|
Loading…
Reference in a new issue