使用 @babel 来转换 Array.prototype.flat，是否可行？

Question

使用 @babel 来转换 Array.prototype.flat，是否可行？

javascriptwebpackbabeljsbabel-loader

14

我在我的React应用程序中无意间使用了Array.prototype.flat，导致向后兼容性问题。我非常惊讶这没有通过转译解决 - 我以为这会导致es2015兼容的代码。

如何让Babel 7进行转译？（如果我对Babel 6的源代码阅读正确，那么在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

- DerKastellan

6

Babel不会像这样 "转译" 对象方法 - 它会转译不同的语法 - 如果需要，你需要使用一个 polyfill（如果已存在）或使用在 MDN 文档中记录的替代方案 - 还有 https://github.com/es-shims/Array.prototype.flat。 - Jaromanda X

感谢您为我解释清楚，@JaromandaX。 - DerKastellan

难道不是babel-polyfill吗？ - Colin D

你好，@ColinD。那时我不知道什么是polyfill，但它确实解决了我的问题。 - DerKastellan

我实际上是出于好奇才提出这个问题的，因为我有一个项目执行了 import babel-polyfill，但我仍然从 IE11 中收到关于 Object does not support property or method 'flat' 的错误。 - Colin D

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Colin D · Accepted Answer

这里有一个重要的注意事项：你不能“转换掉”它，只能使用polyfill。

为此，您可以使用：

安装core-js@3作为运行时依赖项
使用@babel/preset-env的配置来使用useBuiltIns: usage，这将在需要时导入所需的polyfills，而不是手动在源代码中导入@babel/polyfill

整个.babelrc的配置如下：

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

或者，您可以将@babel/polyfill作为运行时依赖项添加到您的package.json中，并在您的代码中导入import "@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一起使用。