将webpack es6项目分解为npm项目

Question

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

是否有人成功地将一个react应用项目拆分成私有的npm“功能”包？

我有一个很大的代码库，它开始让我很痛苦地开发，分裂成不同的包会很好。

我想

• 导出要在主包中使用的包中的组件、es6模块和流类型
• 单元测试包
• 不必分别与webpack/rollup捆绑(似乎没有必要，主项目应该捆绑所有js)。

当前堆栈的重要位数是

• 反应(或预先)
• 巴贝尔
• 流
• webpack
• es6模块(导入/导出语法)

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

我遇到了各种各样的问题，因为babel在导入的代码中没有解决jsx，而流类型在主项目中不可见。

Answer 1

我是和层包一起做的。

它允许进行“可继承”的项目，包括他们的webpack倾诉&附带了一个小的CLI工具，用正确的配置打电话给webpack。

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

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

这里有样本这里 & doc 这里

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

希望能有所帮助:)

Answer 2

我也有类似的要求。我们还希望保留源代码映射(这样您就不会尝试从原始代码中调试)。

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

1. 只需使用ln -s (对于Linux或Mac；我不知道在Windows中等效于什么)就可以将“包”链接到系统中。
2. 将webpack的resolve.symlinks属性设置为false。在我们的设置中，这意味着编辑webpack.config.js以拥有resolve: {symlinks: false }}。

然后，您的代码被拆分--但是就构建过程而言，没有什么改变。

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

例如，您的项目文件夹可能最终看起来如下所示：

• myapp
  • 钢筋混凝土
    • 子包:到子包/src的符号链接

​

- webpack.config.js, package.json, etc.

​

• 子包
  • src
  • 测试: src文件的单元测试
  • 单元测试的webpack.config.js

​

这很简单，而且很有效。

在解决这个问题之前，我们确实尝试过用自己的package.json包装一些独立的npm包。但我们无法使它工作，以便它建立和运行，并可以调试。