lerna + webpack + babel-loader 问题

Question

这是重新创建问题的地方：

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

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

• 我有 4 个包裹alpha, beta, gamma, usage.
• alpha, beta,gamma不使用 babel，应该只使用 index.js
• usage正在使用 babel 并且应该使用转换babel-loader然后遍历应该继续

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

$ 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

使用 Lerna 的一大好处是，您可以提取devDependencies存储库根目录，将它们从各个包中提取出来。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"
   }
 }

然后在您的存储库根目录重新运行npm install。之后你的npm run webpackinpackages/usage应该会成功。

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