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

Question

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

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

工具：

• @ babel / core @ 7.0.0
• webpack@4.18.0

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

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