使用webpack ou npm在多个包中拆分javascript Javascript项目

Question

我正在尝试构建一个必须在Windows（PC），Android和iOS上运行的应用程序。

为此，我将使用Electron（用于Windows）和React Native（用于移动平台）。 两者都将使用React和Redux构建。 这样，我将能够在Redux Reducer和中间件中实现逻辑，并在两个项目中使用它们。

从现在开始，我使用webpack为Electron app做了POC。 Reducer目前直接在应用程序代码中。 我想在一个单独的包中提取Redux相关代码，以允许我在React Native项目中使用它。

我可以为包含reducers和middlware的Redux模块制作一个npm包，但这样，当我编译我的应用程序时，webpack将不会编译我的单独包，它将使用预编译版本。

所以我想要的是能够创建一个单独的包，但仍然在应用程序编译时编译它（因为它仍处于开发阶段，并且dev与主应用程序开发人员密切相关）。

我是否只能使用npm或webpack进行此操作？

我是Javascript dev堆栈的新手。

Answer 1

我认为你有不同的方法来处理这个问题。

1. 您可以使用NPM包。 但是在包的代码中，您不仅会存储原始源代码，还会存储编译代码。 我的意思是在发布该包之前，您需要在普通的ES5代码中编译它。
2. 我想你可以使用Git提供的子模块系统。 您应该有一个单独的存储库，其中包含reducers的公共代码。 在每个项目（电子，RN等）中，您将拥有一个带有git子模块的目录。 Webpack应该正常编译该目录中的代码而没有任何问题。

UPD：

关于子模块你可以在这里阅读好文章： https ： //git-scm.com/book/en/v2/Git-Tools-Submodules#Starting-with-Submodules

简而言之，在项目中它看起来像：

cd yourProjectFolder
git submodule add https://github.com/TalAter/awesome-service-workers submoduleDirectoryName

它将克隆存储库到您的项目，并创建.gitmodules文件。 子模块中的代码在当前项目存储库中不存在。 在远程存储库中，它只包含子模块的链接，但在您的机器上，您将拥有完整的代码，您将能够编译它。