编写一个大型的Aurelia应用程序 - 一个页面上的多个应用程序

Question

所以我有一个由功能组成的大型应用程序。每个功能都可以通过菜单访问，该菜单实际上加载了包含该特定功能的aurelia应用程序的网页。这工作正常，因为它允许我一次完成一项功能，并使用可能不同的客户端技术。

但是，我现在需要在一个页面上拥有多个Aurelia应用程序：上面描述的“功能”应用程序和一个始终位于顶部导航栏中的“导航栏”应用程序。因此，安排如下。

我正在使用带有aurelia webpack插件的webpack。我已经尝试了各种安排来实现这一点，但我动辄就遇到了问题。我目前的模型是从单个webpack配置文件手动引导“功能”应用程序和“导航”应用程序：

entry: {
    packages: [
        "main","nav"
    ]
},

在每个模块中，我手动引导，例如：

bootstrap((aurelia: Aurelia) => {
    // init code
    aurelia.start())
    .then(() => aurelia.setRoot(PLATFORM.moduleName("app"), document.querySelector("#packages-app")));});

因此，“功能”应用程序被加载到特定的DOM元素中，类似于“nav”应用程序。

我的问题

1. 这是一种支持甚至是适当的分割功能的方法吗？
2. 我似乎在一个模块中获得了影响另一个模块的代码。在每个应用程序的模块中注入DI的Aurelia组件是否有任何共享状态？

Answer 1

这是一个完全有效的场景，正如你在Aurelia Webpack Plugin - aureliaApp option - "module not found"提出的另一个问题所回答的那样

这是一种支持甚至是适当的分割功能的方法吗？

是的，这是一个完全有效的场景，你可能并不孤单

我似乎在一个模块中获得了影响另一个模块的代码。在每个应用程序的模块中注入DI的Aurelia组件是否有任何共享状态？

通常在Aurelia应用程序中，DI可以用来处理这个问题。所以你可以做的是提前注册你的商店实例，例如：

// in your index.ts
import { bootstrap } from 'aurelia-bootstrapper';

// precreate store instance
const the_one_and_only_store = new Store(initState, options);

// bootstrap top nav application, with one instance of Aurelia
bootstrap(aurelia => {
  // do your configuration
  aurelia.container.registerInstance(Store, the_one_and_only_store);

  aurelia
    .start()
    .then(() => aurelia.setRoot(
      PLATFORM.moduleName('topnav'),
      document.querySelector('#topnav')
    );
});

// bootstrap main application, with another instance of Aurelia
bootstrap(aurelia => {
  // aurelia.use.standardConfiguration();
  // ...
  aurelia.container.registerInstance(Store, the_one_and_only_store);

  aurelia
    .start()
    .then(() => aurelia.setRoot(
      PLATFORM.moduleName('app'),
      document.querySelector('app')
    )
});

现在，两个应用程序中的所有Store注入都将指向您唯一的商店。