使用 SystemJS / JSPM 加载多版本 Web 组件依赖项?

Loading multi versioned Web Component dependencies with SystemJS / JSPM?

只是一个免责声明 - 这是一个假设场景,因为我正在尝试使用 JSPM and SystemJS 之类的方法找出处理 Web 组件直接和传递依赖项的最佳方法。

场景 1

假设我有 2 个 Web 组件 - component-acomponent-b。一个是用 momentjs@1.2.4 构建的,另一个是用 momentjs@1.6.4.

构建的

每个组件作者在他们的 package.json 文件中将 Polymer 列为对等依赖项,将 momentjs 列为直接依赖项,如下所示:

  "dependencies": {
    "moment.js": ">= 1.0.1 <= 1.8.0"
  }   
  "peerDependencies": {
    "Polymer.js": "0.5.0^",
  }   

因此,在这种情况下,当开发人员声明对这两个组件的 package.json 依赖项时,程序包管理器可以找出 moment.js 的最佳版本进行安装并使其可用。让我们假设这是版本 1.8.0.

太棒了 - 只有一个版本的 moment.js 可以处理两个组件。现在组件如何加载/注入依赖项? JSPM and SystemJS目前是否有能力支持这个?

例如,在本文 Taming Polymer with SystemJS and Typescript 中,作者像这样执行委托给 SystemJS 的导入:

 import 'elements/app-frontend';

所以我想 momentjs 会采用类似的方法并像这样导入(在 component-acomponent-b 的打字稿文件中:

 import 'js/momentjs';

在上述情况下,momentjs 依赖项不知道将获取哪个版本,因为导入声明不知道该版本(因为它是在设计时编写的)。

稍后,当在应用程序中使用该组件并且在应用程序中使用该组件时,JSPM 找出最适合安装 momentjs 依赖项的方法。

在这种情况下,我们假设它安装在这样的布局中:

`jspm_packages/momentjs/momentjs@1.8.0`

那么 JSPM 如何意识到导入语句 import 'js/momentjs' 转换为 jspm_packages/momentjs/momentjs@1.8.0 的导入?

在这种情况下,它相当微不足道,但在下面的场景 2 中会变得更加棘手……我认为。

场景 2

除了 momentjs 上的版本要求互斥外,与方案一相同。例如 component-a 需要版本 1.2.4component-b 需要版本 2.4.4

所以两个组件都像这样执行导入:

 import 'js/momentjs';

但是 jspm_packages 会像这样安装两个版本:

`jspm_packages/momentjs/momentjs@1.4.4`
`jspm_packages/momentjs/momentjs@2.4.4`

那么现在 SystemJS 怎么知道 component-a 需要版本 1.4.4component-b 需要版本 2.4.4

总结一下: 1) JSPM 可以拥有相同依赖项的多个版本吗?

根据这篇文章 Introduction to the Jspm package manager and the SystemJs module loader and an answer from guybeford 确实如此,但是每个组件如何获得正确的版本?

2) SystemJS / JSPM 是否有为每个组件配置版本元数据的方法?

3) SystemJS 是否有办法理解依赖项的正确版本并将其注入到 Web 组件中?

TIA, 奥莱

Also what happens if the component requires several other modules, like CSS etc?

我不确定你的意思。您可以使用 SystemJS 导入多个模块和其他内容(可能通过插件)。

1) Is JSPM ok with having multiple versions of the same dependency?

我认为您部分地回答了这个问题。 JSPM 将始终 select 并为每个组件只安装一个版本,它最符合其他组件的要求。如果有冲突,JSPM会要求手动选择。

So how does JSPM become aware the import statement import 'js/momentjs' translates to the import of jspm_packages/momentjs/momentjs@1.8.0?

config.js 文件为已安装的包分配导入名称(不确定命名法)。实际上可以使用 jspm install x=npm:package 语法更改这些名称。这将导致像

这样的配置
"x": "npm:package@1.2.3"

然后您可以 import ximport npm:package@1.2.3

2) Does SystemJS / JSPM have a way of configuring version meta data for each component?

我认为config.js的结构有你需要的一切。它包含与其版本的依赖关系。

"component-a": {
  "momentjs": "momentjs@1.2.4"
},
"component-b": {
  "momentjs": "momentjs@1.6.4"
}

3) Does SystemJS have a way of understanding and injecting the right version of a dependency into the web component?

我希望 SystemJS 在请求 component-acomponent-b 时使用此信息导入正确的版本。

我不确定如何让 JSPM 通过这种方式安装包,同时保留一个包的多个版本。我认为它值得一个单独的、专门的问题。