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

Question

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

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

从现在开始，我已经使用 webpack 为 Electron 应用程序完成了 POC。减速器目前直接在应用程序代码中。我想将 Redux 相关代码提取到一个单独的包中，以便我在 React Native 项目中使用它。

我可以为我的 Redux 模块创建一个 npm 包，其中包含减速器和中间件，但是这样，当我编译我的应用程序时，webpack 不会编译我的单独包，它将使用预编译版本。

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

我是否必须只使用 npm 或 webpack 来完成？

我是 Javascript 开发堆栈的新手。

Answer 1

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

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

更新：

关于子模块你可以在这里阅读好文章：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 文件。来自子模块的代码将不存在于当前项目存储库中。在远程存储库中，它将仅包含指向子模块的链接，但在您的机器上，您将拥有完整的代码并且您将能够编译它。