Question

我无意中通过使用http://mycdn/myAsyncComponent在我的React应用程序中引入了向后兼容性问题。我很惊讶没有通过编译解决此问题-我认为这将导致与es2015兼容的代码。

我如何获得Babel 7的声音？（如果我在Babel 6中正确地阅读了源代码，那么仍然有一个用于此的插件，但是由于它已经开始向浏览器推出，因此对它的支持被放弃了？）

工具：

@ babel / core @ 7.0.0
webpack@4.18.0

我的顶级配置文件如下：

webpack.config.js

Array.prototype.flat

.babelrc

var path = require('path')

module.exports = {
  entry: "./src/index.js",
  output: {
      path: path.join(__dirname, 'dist', 'assets'),
      filename: "bundle.js",
      sourceMapFilename: "bundle.map"
  },
  devtool: '#source-map',
  module: {
      rules: [
          {
              test: /\.js$/,
              exclude: /(node_modules)/,
              loader: 'babel-loader'
          }
      ]
  }}

.browserslistrc

{
  "presets": [ "@babel/preset-env", "@babel/react" ],
  "plugins": [["@babel/plugin-proposal-pipeline-operator", { "proposal": "minimal" }]]
}

Answer 1

这里有个重要的注意事项：您不能“将其移走”。您只能对此进行填充。

为此，您可以使用

core-js @ 3已安装为运行时依赖项
@ babel / preset-env的配置具有useBuiltIns：用法，这将在需要的地方导入所需的polyfill，而不是在源代码中手动导入@ babel / polyfill

整个.babelrc的配置如下

  "presets": [                                                                                                                                               
    [                                                                                                                                                        
      "@babel/preset-env",                                                                                                                                   
      {                                                                                                                                                      
        "targets": {                                                                                                                                         
          "node": 4                                                                                                                                          
        },                                                                                                                                                   
        "useBuiltIns": "usage",                                                                                                                              
        "corejs": 3                                                                                                                                          
      }                                                                                                                                                      
    ]                                                                                                                                                        
  ]                                                                                                                                                          
}

或者，您可以在package.json和代码中的import "@babel/polyfill"中将@ babel / polyfill作为运行时依赖项。

您需要的所有详细信息都在此页面https://babeljs.io/docs/en/babel-polyfill上，但是有很多细微之处

我创建了这个最小的示例来演示

https://github.com/cmdcolin/babel-array-flat-demo

编译后，您将正确的导入添加到文件https://github.com/cmdcolin/babel-array-flat-demo/blob/master/dist/index.js中，这适用于旧版本的节点。

用@babel转译Array.prototype.flat吗？

webpack.config.js

.babelrc

.browserslistrc

1 个答案: