web-dev-qa-db-fra.com

Babel ne transpile pas les modules importés de 'node_modules'

J'ai eu un problème avec le transpilage des modules importés de node_modules. Babel pour une raison quelconque ne transpile pas le module importé de node_modules, mais transpile les modules importés de src.

Voici un exemple de dépôt: https://github.com/NikitaKA/babeltest

main.js 

// result code contains const and let, but it shouldn't. :(

index.js 

import qs from 'query-string; // not transpiled
import lib from './lib' // transpiled

const query = qs.parse(window.location.search);

webpack.config.js 

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  }
};

. babelrc 

{
  "presets": [
    ["@babel/preset-env", {
      "modules": false,
      "targets": {
        "chrome": 39
      }
    }],
    ["@babel/preset-stage-1", {
      "modules": false,
      "decoratorsLegacy": true,
      "pipelineProposal": "minimal"
    }]
  ],
  "plugins": [
    "transform-es2015-constants",
    "@babel/plugin-transform-block-scoping",
    "@babel/plugin-transform-runtime"
  ]
}
javascriptwebpackbabel
7
NikitaK

Pour développer mes commentaires:

Vous ne voulez vraiment pas tout transpiler node_modules - cela prendra beaucoup de temps, et la plupart du code devrait déjà être ES5 (à moins qu'il ne s'agisse en fait de modules ES6, auquel cas le point d'entrée ES6 est annoncé comme "module" dans le package.json manifeste).

[email protected] n'est pas , et il le dit dans son README :

Ce module cible Node.js 6 ou version ultérieure et la dernière version de Chrome, Firefox et Safari. Si vous souhaitez prendre en charge les anciens navigateurs, utilisez la version 5: npm install query-string@5.

5
AKX

La solution dans ce cas est de transpiler à nouveau le module, cela peut être fait en modifiant la propriété exclude dans votre configuration webpack:

{
  test: /\.js$/,
  exclude: /node_modules\/(?!(es6-module|another-es6-module)\/).*/,
},

Modules es6-module et another-es6-module ne sera plus ignoré par webpack et sera transposé avec le reste de votre code source.

Voir le problème GitHub sur le projet webpack .

Testé avec [email protected], [email protected] et [email protected]

1
Rafal Enden