javascript - 将 webpack 和 babel 与父项目目录中的文件一起使用

Question

我有一个这样设置的项目，我正在尝试从 file-b.js 中获取 file-a.js。

project-name/
  node_modules/
  src/
    file-a.js
  tools/
    tool-name/
      node_modules/
      src/
        file-b.js
      webpack.config.js
      package.json
  package.json

我的 webpack 1.13.0 配置一直有效，直到我添加了 babel-loader 6.2.4 和 babel-preset-es2015 6.6.0 .然后我开始收到错误消息。

ERROR in /home/dan/dev/dan/project-name/src/file-a.js Module build failed: Error: Couldn't find preset "es2015" relative to directory "/home/dan/dev/dan/project-name/src"

现在我有一种预感，这是因为它正在上层 package.json 中寻找 babel-preset-es2015。我可以通过在该级别安装它来消除此错误，但随后我收到一条关于 babel 模块不存在的类似消息。

我尝试了各种方法，将上层 src 目录符号链接(symbolic link)到内部项目，使用了 resolve.root 和 resolve.alias 尝试手动解析没有嵌套路径的文件夹。使用context将项目根目录设置为外层文件夹，但它仍然选择了错误的node_modules。

如何强制 webpack 使用正确的 node_modules 文件夹？

Answer 1

默认情况下，webpack 在 ./node_modules、../node_modules 和 ../../node_modules 中查找。

要强制它只使用特定目录，您可以在 resolve 部分为模块 modulesDirectories 属性设置绝对路径:

module.exports = {
  // ...
  resolve: {
     modulesDirectories: [path.join(__dirname, 'node_modules')]
  }
}

有关 moduleDirectories 的更多详细信息 in webpack's documentation