Reactjs 将webpack es6 react项目拆分为npm包

我在这里寻求最佳实践

是否有人成功地将react web app项目拆分为私有npm“功能”包

我有一个很大的代码库，开发起来很痛苦，拆分成单独的包会很好

我想

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

当前堆栈的重要位是

• 反应（或预演）
• 巴别塔
• 流动
• 网页包
• es6模块（导入/导出语法）

在进行此项实验时，我尝试将部分代码复制到作用域私有npm包中，并将主项目babel配置为将

@scope

路径包含在

节点单元模块中

我遇到了各种各样的问题，babel在导入的代码中没有理解jsx，并且流类型在主项目中不可见，我有类似的要求。我们还希望保留源代码映射（所以您不想尝试从巴贝尔代码进行调试）

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

只需使用
ln-s
（对于Linux或Mac；我不知道Windows的等价物是什么）在中对“包”进行sym链接即可
将网页包的resolve.symlinks属性设置为false。在我们的设置中，这意味着编辑webpack.config.js时要有
resolve:{symlinks:false}}
然后您的代码被拆分——但就构建过程而言，没有任何更改

您可以使用每个“包”中的测试进行单元测试

例如，您的项目文件夹最终可能会显示如下内容：


myapp

src

子包：指向子包/src的符号链接

webpack.config.js、package.json等

分装

src
测试：src文件的单元测试
用于单元测试的webpack.config.js


这很简单，而且很有效

在解决这个问题之前，我们确实尝试过用自己的package.json将事物打包为独立的npm包。但我们无法让它正常工作，因此它无法构建和运行，也无法调试。
我正在使用

它允许创建“可继承”的项目，包括他们的webpack配置&附带一个小的CLI工具来调用具有正确配置的webpack

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

它还附带了一些不错的特性，比如glob解析，这有助于包含未知数量的文件

有样品和文件

插件可能需要一些改进；但我在我所有的项目中使用它已经有一段时间了，它相当稳定

希望能有所帮助：）
@Daniel我正在尝试做类似的事情（）。这个问题的知识有点让我不知所措。我正在尝试做类似的事情（stackoverflow.com/questions/57261894/…）。不过，这个问题的知识有点让我不知所措。如果你感兴趣的话，看看。