Question

我对从node_modules导入的模块进行编译存在问题。 Babel出于某种原因不会转换从node_modules导入的模块，而是转换从src导入的模块。

以下是示例存储库：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"
  ]
}

Answer 1

根据我的评论进行扩展：

您真的不想转译所有node_modules –这将花费很长时间，并且大多数代码中应该已经有ES5（除非它们实际上是ES6模块，在这种情况下， ES6入口点在"module"清单中声明为package.json。

query-string@6.x 不是，而在its README中这样说：

此模块针对Node.js 6或更高版本以及最新版本的Chrome，Firefox和Safari。如果要支持较旧的浏览器，请使用版本5：npm install query-string@5。

Answer 2

在这种情况下，解决方案是再次转换模块，这可以通过修改webpack配置中的dict.AddOrUpdate(index, index, (key, value) => value);属性来完成：

exclude

模块{ test: /\.js$/, exclude: /node_modules\/(?!(es6-module|another-es6-module)\/).*/, },和es6-module将不再被webpack忽略，并将与其余的源代码一起转译。

请参见GitHub issue on the webpack project。

经过another-es6-module，webpack@3.12.0和babel-core@6.26.3的测试

Babel不会从'node_modules'转换导入的模块

2 个答案: