我想使用@babel/plugin-transform-runtime制作react应用程序以支持IE9。如果我使用core-js, @babel/polyfill将污染全局范围。实际上，另一个外部库（已定义core-js）与我的应用程序冲突。不幸的是，我必须包含外部库（shCore.js）
这就是为什么我想使用@babel/plugin-transform-runtime。那么，我应该如何使用@babel/plugin-transform-runtime为IE9制作react应用程序呢
//软件包. 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"
}
}//网页包配置. 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}]
],
},
}
]}，
2条答案
按热度按时间bvn4nwqk1#
如果你直接导入core-js或@babel/polyfill以及它提供的内置函数，比如Promise，Set和Map，这些会污染全局范围。虽然这对于应用程序或命令行工具来说可能没问题，但如果你的代码是一个库，你打算发布给其他人使用，或者你不能精确控制代码运行的环境，这就成了一个问题。
转换器会将这些内置函数的别名设置为core-js，这样您就可以无缝地使用它们，而无需使用polyfill。
此处引用
laik7k3q2#
对于2022年的读者：
我想用@babel/plugin-transform-runtime来制作React应用程序，以支持IE9 [...]
如果您正在制作应用程序并希望与旧版浏览器兼容，请改用
@babel/preset-env。