@babel/react项目的插件转换运行时

carvr3hs 于 2022-12-08 发布在 Babel

关注(0)|答案(2)|浏览(173)

我想使用@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}]
      ],
    },
  }
]

}，

babeljs

来源：https://stackoverflow.com/questions/60054299/babel-plugin-transform-runtime-for-react-project

2条答案

按热度按时间

bvn4nwqk1#

如果你直接导入core-js或@babel/polyfill以及它提供的内置函数，比如Promise，Set和Map，这些会污染全局范围。虽然这对于应用程序或命令行工具来说可能没问题，但如果你的代码是一个库，你打算发布给其他人使用，或者你不能精确控制代码运行的环境，这就成了一个问题。
转换器会将这些内置函数的别名设置为core-js，这样您就可以无缝地使用它们，而无需使用polyfill。
此处引用

赞(0）回复(0）举报 2022-12-08

laik7k3q2#

对于2022年的读者：
我想用@babel/plugin-transform-runtime来制作React应用程序，以支持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,
  },
],

赞(0）回复(0）举报 2022-12-08

我来回答

@babel/react项目的插件转换运行时

2条答案

相关问题

热门标签

最新问答