Babel does not transpile imported modules from 

2020-06-12 05:51发布

I got a problem with transpiling imported modules from node_modules. Babel for some reason doesn't transpile imported module from node_modules, but transpile modules imported from src.

Here is an example repo: 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"
  ]
}

2条回答
smile是对你的礼貌
2楼-- · 2020-06-12 06:12

The solution in this case is to transpile the module again, this can be done by modifying the exclude property in your webpack config:

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

Modules es6-module and another-es6-module will no longer be ignored by webpack and will be transpiled with the rest of your source code.

See the GitHub issue on the webpack project.

Tested with webpack@3.12.0, babel-core@6.26.3 and babel-core@6.26.3

查看更多
时光不老,我们不散
3楼-- · 2020-06-12 06:28

To expand upon my comments:

You really don't want to transpile all of node_modules – it'll take a long time, and most of the code there should already be ES5 (unless they're actually ES6 modules, in which case the ES6 entry point is announced as "module" in the package.json manifest).

query-string@6.x isn't, and it says so in its README:

This module targets Node.js 6 or later and the latest version of Chrome, Firefox, and Safari. If you want support for older browsers, use version 5: npm install query-string@5.

查看更多
登录 后发表回答