使用@babel将Array.prototype.flat展开？

Question

我无意中使用Array.prototype.flat在我的React应用程序中引入了向后兼容性问题。我很惊讶这没有通过转换得到解决 - 我认为这将导致es2015兼容代码。

我怎样才能让Babel 7转变为此？ （如果我在Babel 6中看到的消息来源是正确的，那么仍然有一个插件，但是因为这已经开始推广到浏览器支持已被删除？）

工具：

• @通天/核心@ 7.0.0
• Web [email protected]

我的顶级配置文件如下所示：

webpack.config.js

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'
          }
      ]
  }}

.babelrc

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

.browserslistrc

chrome 58
ie 11

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中，这适用于旧版本的节点。