拆分webpack es6将项目反应到npm包

Question

我在这里要求最好的做法。

有没有人成功地将反应网络应用项目拆分为私人npm'功能'套餐？

我有一个很大的代码库，开始是一个痛苦的开发和分成单独的包将是好的。

我想要

• 从包中导出React组件，es6模块和流类型以在主包中使用
• 单独的单元测试包
• 不必用webpack /汇总单独捆绑每一个（似乎没必要，主项目应捆绑所有js）

当前堆栈的重要位是

• React（或preact）
• 巴别
• 流
• 的WebPack
• es6 modules（导入/导出语法）

在尝试此操作时，我尝试将部分代码复制到作用域的私有npm包中，并配置主项目babel以在@scope内包含node_modules路径。

我在导入的代码中遇到了babel not undestanding jsx的各种问题，并且在主项目中看不到流类型

Answer 1

我正在使用webpack-inherit。

它允许制作“可继承的”项目，包括其Webpack配置，并附带一个小型CLI工具，以使用正确的配置调用Webpack

它处理node_modules和webpack来制作可继承的“代码层”，甚至在编译节点脚本或使用monorepo结构时也可以工作

它还具有一些不错的功能，例如glob解析，可帮助包括未知数量的文件。

有示例here和文档here

该插件可能需要改进。但我已经在所有项目中使用了一段时间，它非常稳定

希望对您有所帮助：）

Answer 2

我有类似的要求。我们还希望保留源代码映射（因此您不会尝试从babelled代码进行调试）。

我们找到了一个使用符号链接的简单解决方案：

1. 只需sym-link＆＃34;包＆＃34;在，使用ln -s（对于Linux或Mac;我不知道Windows的等价物是什么）。
2. 将webpack的resolve.symlinks属性设置为false。在我们的设置中，这意味着要编辑webpack.config.js以获得resolve: {symlinks: false }}。

然后你的代码被拆分 - 但就构建过程而言，没有任何改变。

您可以在每个＆＃34;包＆＃34;。

中进行单元测试

E.g。您的项目文件夹可能最终看起来像这样：

• MyApp的
  • SRC
    • subpackage：subpackage / src的符号链接
  • webpack.config.js，package.json等
• 子包
  • SRC
  • 测试：src文件的单元测试
  • 用于单元测试的webpack.config.js

这很简单，也很有效。

在确定之前，我们尝试使用自己的package.json将包装作为独立的npm包。但我们无法让它工作，以便它可以构建和运行，并且可以进行调试。