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转换，然后遍历应该是contunue

当我尝试编译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＆amp;将代码切换为require

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

完美包含一切。

Answer 1

使用Lerna的一个好处是你可以将devDependencies拉到repo root，将它们从各个包中分解出来。如果在许多包中使用devDependencies，这可以显着改善引导时间。它可以也，在这种情况下，可以帮助你避免这种奇怪的巴贝尔行为。

如果您将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 root重新运行npm install。之后，npm run webpack中的packages/usage应该会成功。

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

Answer 2

在这里查看此错误：

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'),
  ],
},

lerna + webpack + babel-loader问题

捆绑类型

2 个答案: