@babel/plugin-transform-runtime for react project

Question

我想用@babel/plugin-transform-runtime做出反应应用程序以支持IE9 如果我使用core-js, @babel/polyfill会污染全局范围。 实际上，另一个外部库(core-js被发现(与我的应用程序冲突。不幸的是，我必须包含外部库(shCore.js(

这就是为什么我想使用@babel/plugin-transform-runtime那么我应该怎么做才能使用 @babel/插件转换运行时为 IE9 制作反应应用程序

//package.json

{
"devDependencies": {
"@babel/core": "^7.8.3",
"@babel/plugin-proposal-class-properties": "^7.8.3",
"@babel/plugin-transform-runtime": "^7.8.3",
"@babel/preset-env": "^7.8.3",
"@babel/preset-react": "^7.8.3",
"@babel/runtime-corejs3": "^7.8.3",
"babel-loader": "^8.0.6",
"css-loader": "^3.2.1",
"html-webpack-plugin": "^3.2.0",
"style-loader": "^1.0.1",
"url-loader": "^3.0.0",
"webpack": "^4.41.5",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.10.2"
},
"dependencies": {
"@babel/runtime": "^7.8.3",
"axios": "^0.19.0",
"core-js": "^3.6.1",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-icons": "^3.8.0",
"react-redux": "^7.1.3",
"react-router-dom": "^5.1.2",
"redux": "^4.0.4",
"redux-actions": "^2.6.5",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.3.0"
}
}

webpac.config.js

module: {
rules: [
{
test: /.(js)$/,
exclude: {
test: path.resolve(__dirname, "node_modules"),
exclude: [
path.resolve(__dirname, "node_modules/react-dom"),  // <- something like this!!
]
},
loader: 'babel-loader',
options: {
presets: [
['@babel/preset-env', {'targets': {'browsers': ["ie > 8"]}}],
['@babel/preset-react', {'targets': {'browsers': ["ie > 8"]}}]
],
plugins: [
[
"@babel/plugin-transform-runtime", {
"absoluteRuntime": false,
"corejs": false,            
"helpers": true,                                  
"regenerator": true,                         
"useESModules": true,                             
}],
["@babel/plugin-proposal-class-properties", {loose: true}]
],
},
}
]

}，

Answer 1

如果你直接导入core-js或@babel/polyfill以及它提供的内置功能，如Promise，Set和Map，这些都会污染全局范围。虽然这对于应用或命令行工具来说可能是可以的，但如果您的代码是打算发布供其他人使用的库，或者您无法完全控制代码的运行环境，则会成为一个问题。

转换器会将这些内置函数别名化为 core-js，以便您可以无缝使用它们，而无需 polyfill。

参考从这里

Answer 2

对于 2022 年的读者：

我想使用 @babel/插件转换运行时制作反应应用程序以支持 IE9 [...]

如果您正在制作应用程序并希望与旧浏览器兼容，请改用@babel/preset-env。

[
'@babel/preset-env', {
useBuiltIns: 'usage', // or you can use `entry`,
// but this will require `import 'core-js'` the at entry point
corejs: 3.21,         // yarn add core-js@3
modules: false,
},
],