为开发环境配置 Lerna：使用共享包

Question

我有使用 Lerna 构建的 monorepo。它具有以下结构：

packages
  - create-react-app-example
  - utils

create-react-app-example 就像create-react-app 产生的一样。 IE。它使用 webpack 转译 ES6/ES7 代码，对文件更改等进行热模块替换；

utils 包只有 1 个具有一些实用功能的文件。这个函数是在create-react-app-example包里面使用的；它不使用 Webpack、Babel 或任何其他工具；

所以，一切都很简单。

但我很难尝试配置舒适的开发环境。

所以我想要的东西很少：

• 能够在utils包中使用es6/es7代码（这个包的代码应该以某种方式被转译）；
• 当utils包发生变化时主模块自动热更新；

---

我唯一想到的就是调整webpack.config.js of create-react-app-example：

• 更改 babel loader 的设置，使其不会排除 node_modules/utils 文件夹并对其进行转译；
• 并更改webpack watch 的参数，以便检测两个包中的更改

但我不喜欢上面的解决方案，它对我来说看起来很脏。

可能有一些更优雅的解决方案？

或者我也应该将 webpack.config 添加到 utils 包并以某种方式将其用作库？如果我没记错的话，Webpack 有这样的功能。

谢谢

Answer 1

能够在 utils 包中使用 es6/es7 代码（此代码 包应该以某种方式转译）；

如果您真的想将 utils 保留为单独的包，只需将 babel 配置为将其与 CRA 应用程序分开编译即可。您可以使用babel cli 来执行此操作，以下是如何执行此操作的示例：https://github.com/babel/example-node-server

当 utils 发生变化时自动热更新主模块 包装;

您配置 webpack watch 的想法听起来不错。文档here

您最终可能会得到 2 个 watch：babel 转译 utils 包，以及 webpack 用于构建和捆绑 CRA 应用程序。