Question

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

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。我们还尝试了组合库和libraryTarget和externals，但没有成功。

有什么想法吗？谢谢！

在SPA应用程序中捆绑多个较小的应用程序

0 个答案: