Webpack未能转接从npm封装中导入的模块

Question

我已经用这个.babelrc创建了一个npm包

{
  "presets": ["stage-3"]
}

webpack.config.js中的这一部分

module: {
  rules: [
    {
      test: /\.jsx?/,
      include: APP_DIR,
      loader: 'babel-loader'
    }
  ]
]

源代码包括如下内容：{ ...oldObject }，所以新闻ES6特性，它编译很好。

但是，在另一个项目中，我实际上需要这个包，我在package.json中有这个

"dependencies": {
  "r2d2": "git+ssh://git@xxxxxxxx:~/r2d2"
}

.babelrc包括：

{
  "presets": [
    "env",
    "stage-3"
  ]
}

webpack.config.js部分也是一样的。但是，如果我试图从这里编译，webpack抛出了这个错误：

ERROR in ./node_modules/r2d2/src/js/main.js
Module parse failed: Unexpected token (80:12)
You may need an appropriate loader to handle this file type.
|           .keys(Actions)
|           .reduce((result, key) => ({
|             ...result,
|             [key]: Actions[key](id)
|           }), {})
@ ./src/js/main.js 5:23-51

为什么是这样，我能做些什么来防止这种情况发生？

Answer 1

include: APP_DIR,

具体地说，只编译APP_DIR中的东西。

./node_modules/r2d2/src/js/main.js

不在该文件夹中，因此不会进行编译。

最简单的解决方法是将加载程序配置扩展到

rules: [
  {
    test: /\.jsx?/,
    include: [
      APP_DIR,
      __dirname + "/node_modules/r2d2",
    ],
    loader: 'babel-loader'
  }
]