使用 SystemJs 引用解耦模块答案

【问题标题】：Referencing decoupled modules with SystemJs使用 SystemJs 引用解耦模块
【发布时间】：2016-08-28 17:41:00
【问题描述】：

我有两个使用 TypeScript 开发的 Web 应用程序，它们使用了一些共享代码。

例如，在apps/app1/components/app1.component.ts 中，我对共享代码有导入语句，例如，

import {ClassA} from '../../../shared/classA';
import {ClassB} from '../../../shared/classB';

同样在apps/app2/components/app2.component.ts 我有相同的导入语句，即

import {ClassA} from '../../../shared/classA';
import {ClassB} from '../../../shared/classB';

其中ClassA 和ClassB 分别位于apps/shared/ClassA 和apps/shared/ClassB。

目前，要在浏览器中加载这些共享模块，我必须使用以下 map 和 packages 语句更新 apps/app1/systemjs.config.js 和 apps/app2/systemjs.config.js，

map: {
  'classA':    'apps/shared',
  'classB':    'apps/shared
},
packages: {
  'classA':    {main: 'classA', defaultExtension: 'js'},
  'classB':    {main: 'classB', defaultExtension: 'js'}
}

如果我只有两个类（classA 和 classB），这很好，但随着 apps/shared 中类数量的增加，维护变得更加困难。有什么方法可以告诉 systemJs 在单个语句中从 apps/shared 加载所有模块？类似的东西

map: {
  'shared':    'apps/shared'
},
packages: {
  'shared':    {main: 'shared', defaultExtension: 'js'}
}

同时保持我的 TypeScript 源中使用的相对模块分辨率（即上面的导入语句）？

【问题讨论】：

标签： typescript systemjs

【解决方案1】：

解决问题的一种方法是将共享代码安排在独立模块中，就像用于 node.js 的那样：

为您的库创建一个根文件夹
在根文件夹中创建 index.ts 文件，您将在其中公开所有必需的类 (example)
在 systemjs 配置映射中仅 index.ts

index.ts 可能看起来像这样：

export * from './lib/ClassA';
export * from './lib/ClassB';

如果需要，您还可以按照post 中所述的这种方式公开共享类的嵌套结构

是的，您必须至少维护一个额外的index.ts 文件。但另一方面，您只需要在那里进行一次类“映射”。

希望这对您有所帮助。

【讨论】：