2

很抱歉这个冗长的问题，但这是一个复杂的设置。我们的应用程序是 Monorepo 中的 SPA。该应用程序是一种“外壳”，可以将较小的单个应用程序加载到其中。我们的文件夹结构如下：

Root/
  build/        - All our dev tools and config (including webpack)
  node_modules/ - All the dev dependencies for tooling are here
  projects/
    apps/
      shell/
      app1/
        node_modules/ - All the app dependencies and dev dependencies are here
        src/
        package.json
        tsconfig.json
      app2/
      ...etc
    components/
      comp1/
        src/
        package.json
        tsconfig.json
      comp2/
    core/
      bootstrapper/ 
        src/
          index.ts
        package.json

所以在这个结构中，“shell”应用程序是加载每个“app1”，“app2”等的应用程序。这意味着在shell应用程序中，存在对app1，app2等的依赖关系。但除此之外，每个个别应用程序也可以独立运行，而无需从 shell 运行。

组件是我们编写的组件，是应用程序或其他组件的依赖项。

引导程序包含框架代码的所有依赖项（在本例中为 aurelia 和 redux）。它是每个应用程序的 devDependency，但它是 shell 的依赖项。这允许开发人员在开发时独立运行应用程序（但不是在生产中，它总是从 shell 运行）。

目前，为了构建和发布东西，webpack 将 shell 中的所有内容捆绑到一个文件中，然后进行部署。一切都很好，一切正常，但这并不理想。

此项目中的每个应用程序都由不同的团队拥有。每个团队都有自己的发布周期，我们希望能够让他们在不影响其他人的情况下构建和部署自己的应用程序。理想的设置（捆绑后）是：

bootstrapper.hash.js // Contains our bootstrapper and framework code
app1.hash.js         // Contains the app and its dependencies (except bootstrapper and framework)
app2.hash.js         // etc
shell.hash.js        // The shell code

我们想要的是能够加载 shell 应用程序，并且只根据需要加载 app1/app2 js 文件。据我了解，我们需要使用脚本加载器来按需执行此操作，因为 webpack 不处理此用例，我对此很好。但我不知道的是，如何在没有引导程序代码的情况下构建每个单独的应用程序，并让它能够在运行时动态引入。

我们还希望应用程序在运行时可定位，而无需重新部署其他应用程序。如果我们添加一个 app3.hash.js，我们希望能够动态加载它。

我想不通的是如何以我们想要的方式捆绑应用程序。我得到的最接近的是使用 CommonsChunksPlugin，但这需要我们构建 shell。理想情况下，我们需要类似 DllPlugin 的工作原理，因此我们可以单独构建每个应用程序，但这需要从 shell 引用它的清单，这需要我们构建 shell。我们还尝试了 library 和 libraryTarget 和 externals 的组合，但没有成功。

有任何想法吗？谢谢！

4

0 回答 0