web-dev-qa-db-ja.com

@babelでArray.prototype.flatをトランスピリングしますか？

Reactアプリを使用してArray.prototype.flatを使用することにより、誤って下位互換性の問題を引き起こしました。これがトランスパイリングで解決されないことに非常に驚きました-これによりes2015互換コードが生成されると思いました。

どうすればBabel 7にこれをトランスパイルさせることができますか？ （私のソースの読み取りがBabel 6で正しい場合は、まだプラグインがありましたが、これがブラウザーにロールアウトされ始めたため、サポートが削除されましたか？）

ツール：

トップレベルの構成ファイルは次のようになります。

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
javascriptwebpackbabeljsbabel-loader
13
DerKastellan

ここに重要な注意があります：あなたは「それを取り除く」ことはできません。これをポリフィルすることができます。

これを行うために使用できます

  • ランタイム依存関係としてインストールされたcore-js @ 3
  • @ babel/preset-envの設定でuseBuiltIns：を使用します。これにより、ソースコードに手動で@ babel/polyfillをインポートする代わりに、必要な場所に必要なポリフィルをインポートします

.babelrc全体は次のように構成されています

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

または、package.jsonのランタイム依存関係として@ babel/polyfillを使用し、コードで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 これは古いバージョンで動作しますノードの。

6
Colin D