web-dev-qa-db-fra.com

Transpiler Array.prototype.flat avec @babel?

J'ai introduit par inadvertance un problème de compatibilité descendante dans mon React app en utilisant Array.prototype.flat. J'ai été très surpris que cela ne soit pas résolu en transpilant - je pensais que cela entraînerait un code compatible es2015.

Comment puis-je demander à Babel 7 de transpiler cela? (Si ma lecture des sources est correcte dans Babel 6, il y avait encore un plugin pour cela, mais comme cela a commencé à être déployé sur les navigateurs, le support a été abandonné?)

Outils:

Mes fichiers de configuration de niveau supérieur ressemblent à ceci:

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

Voici une note importante: vous ne pouvez pas "le transpiler". Vous pouvez uniquement remplir polyfil.

Pour ce faire, vous pouvez utiliser

  • core-js @ 3 installé en tant que dépendance d'exécution
  • une configuration de @ babel/preset-env pour avoir useBuiltIns: utilisation, ceci importe les polyfills nécessaires là où c'est nécessaire au lieu d'avoir manuellement import @ babel/polyfill dans le code source

L'ensemble du .babelrc est configuré comme ceci

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

Vous pouvez également avoir @ babel/polyfill comme dépendance d'exécution dans votre package.json et import "@babel/polyfill" dans votre code.

Tous les détails dont vous avez besoin sont sur cette page https://babeljs.io/docs/en/babel-polyfill mais il y a beaucoup de subtilité

J'ai créé cet exemple minimal pour démontrer

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

Après la compilation, vous obtenez des importations appropriées ajoutées à votre fichier https://github.com/cmdcolin/babel-array-flat-demo/blob/master/dist/index.js et cela fonctionne avec les anciennes versions du nœud.

6
Colin D