lerna + webpack + babel-loader 问题

Question

这里是重现问题的地方：

https://github.com/reggi/webpack-lerna-babel-loader-issue

目标：我正在尝试使用 webpack 构建 ./packages/usage/index.js。

• 我有 4 个包 alpha、beta、gamma、usage。
• alpha、beta、gamma 没有使用 babel，应该只使用 index.js 来使用
• usage 正在使用 babel，应该使用 babel-loader 进行转换，然后遍历应该继续

当我尝试编译 babel 时，奇怪的是请求其他部门。

$ lerna bootstrap
Lerna v2.0.0-beta.20
Linking all dependencies
Successfully bootstrapped 4 packages.
$ cd packages/usage
$ npm run webpack

> @reggi/usage@1.0.0 webpack /Users/thomasreggi/Desktop/webpack-issue/packages/usage
> webpack

Hash: 27e6d9d1d4147417b516
Version: webpack 1.13.1
Time: 429ms
    Asset     Size  Chunks             Chunk Names
bundle.js  2.11 kB       0  [emitted]  main
    + 3 hidden modules

ERROR in ../alpha/index.js
Module not found: Error: Cannot resolve module 'babel' in /Users/thomasreggi/Desktop/webpack-issue/packages/alpha
 @ ../alpha/index.js 1:11-33

启用{ exclude: /(node_modules|bower_components)/ } 我明白了。

$ npm run webpack

> @reggi/usage@1.0.0 webpack /Users/thomasreggi/Desktop/webpack-issue/packages/usage
> webpack

Hash: 99d08ad8b664833bba1c
Version: webpack 1.13.1
Time: 401ms
    Asset     Size  Chunks             Chunk Names
bundle.js  2.25 kB       0  [emitted]  main
    + 4 hidden modules

ERROR in ../alpha/~/@reggi/beta/index.js
Module not found: Error: Cannot resolve module 'babel' in /Users/thomasreggi/Desktop/webpack-issue/packages/alpha/node_modules/@reggi/beta
 @ ../alpha/~/@reggi/beta/index.js 1:17-82

捆绑的类型

没有babel-loader，不包括node_modules

https://github.com/reggi/webpack-lerna-babel-loader-issue/blob/master/packages/usage/bundle-without-exclude.js#L70

找不到模块“@reggi/beta”

babel-loader 不包括node_modules

https://github.com/reggi/webpack-lerna-babel-loader-issue/blob/master/packages/usage/bundle-with-exclude.js#L77

找不到模块\"/Users/thomasreggi/Desktop/webpack-issue/packages/beta\"

没有babel-loader & 将代码切换到require

https://github.com/reggi/webpack-lerna-babel-loader-issue/blob/master/packages/usage/bundle-without-babel.js#L97

完美地包含所有内容。

Answer 1

在这里查看这个错误：

ERROR in ../alpha/~/@reggi/beta/index.js
Module not found: Error: Cannot resolve module 'babel' in /Users/thomasreggi/Desktop/webpack-issue/packages/alpha/node_modules/@reggi/beta

看起来问题在于找到 babel 加载器，因为 require.resolve 不会在同级目录 node_modules 中查找它。

尝试配置 webpack 告诉它在哪里解析 babel 加载器（在 usage 项目中）：

resolveLoader: {
  modulesDirectories: [
    path.resolve(__dirname, 'node_modules'),
  ],
},

Answer 2

使用 Lerna 的一个好处是您可以将 devDependencies 拉到 repo 根目录，以将它们从单个包中提取出来。如果在许多包中使用devDependencies，这可以显着缩短引导时间。在这种情况下，它也可以帮助您避免这种奇怪的 babel 行为。

如果您将devDependencies 从packages/usage 移动到根：

diff --git a/package.json b/package.json
index d3728db..e9b313b 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,8 @@
 {
   "devDependencies": {
-    "lerna": "2.0.0-beta.20"
+    "babel-loader": "^6.2.4",
+    "babel-preset-es2015": "^6.9.0",
+    "lerna": "2.0.0-beta.20",
+    "webpack": "^1.13.1"
   }
 }
diff --git a/packages/usage/package.json b/packages/usage/package.json
index 7186ddf..387ddc4 100644
--- a/packages/usage/package.json
+++ b/packages/usage/package.json
@@ -17,10 +17,5 @@
     "presets": [
       "es2015"
     ]
-  },
-  "devDependencies": {
-    "babel-loader": "^6.2.4",
-    "babel-preset-es2015": "^6.9.0",
-    "webpack": "^1.13.1"
   }
 }

然后在您的 repo 根目录下重新运行 npm install。之后，packages/usage 中的 npm run webpack 应该会成功。

另请注意，使用 Lerna，您可以在此处使用 lerna run webpack 简化您的工作流程。