Ecmascript 6 使用SystemJS/JSPM加载多版本的Web组件依赖项？

这只是一个免责声明——这是一个假设的场景，因为我正试图找出使用and之类的工具处理web组件直接依赖和可传递依赖的最佳方法

情景1 假设我有两个web组件-

component-a

和

component-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^",
  }   

 import 'elements/app-frontend';

`jspm_packages/momentjs/momentjs@1.8.0`

 import 'js/momentjs';

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

因此，我假设momentjs将遵循类似的方法并像这样导入（在

component-a

和

component-b

的typescript文件中）：

 import 'js/momentjs';

在上述情况下，

momentjs

依赖项不知道将获取哪个版本，因为导入声明不知道该版本（因为它是在设计时编写的）

稍后，当组件用于和组件用于应用程序时，JSPM会找出

momentjs

依赖性的最佳安装方式

在这种情况下，我们假设它安装在如下布局中：

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

 import 'elements/app-frontend';

`jspm_packages/momentjs/momentjs@1.8.0`

 import 'js/momentjs';

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

那么JSPM是如何意识到导入语句

import'js/momentjs'

转换为导入

JSPM\u包/momentjs的呢/momentjs@1.8.0

在这种情况下，它是相当琐碎的，但在下面的场景2中，它变得更加棘手……我认为

情景2 与场景一相同，只是

momentjs

上的版本要求是相互排斥的。例如

component-a

需要版本

1.2.4

，

component-b

需要版本

2.4.4

因此，这两个组件都执行如下导入：

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

 import 'elements/app-frontend';

`jspm_packages/momentjs/momentjs@1.8.0`

 import 'js/momentjs';

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

但是

jspm\u软件包

会像这样安装两个版本：

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

 import 'elements/app-frontend';

`jspm_packages/momentjs/momentjs@1.8.0`

 import 'js/momentjs';

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

那么现在SystemJS如何知道

组件a

需要版本

1.4.4

和

组件b

需要版本

2.4.4

总结如下： 1） JSPM可以使用同一依赖项的多个版本吗

根据本文和它的答案，但是每个组件如何获得正确的版本呢

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

3） SystemJS是否有办法理解并将正确版本的依赖项注入web组件

蒂亚， 奥立

如果组件需要几个其他模块，比如CSS等，又会发生什么呢

我不知道你的意思。您可以通过usting SystemJS导入多个模块和其他内容（可能通过插件）

1） JSPM可以使用同一依赖项的多个版本吗

我想你部分回答了这个问题。JSPM总是只为每个组件选择和安装一个版本，它最符合其他组件的要求。如果存在冲突，JSPM将要求手动选择

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

config.js文件为安装的软件包分配导入名称（不确定名称）。实际上，可以使用

jspminstall x=npm:package

语法更改这些名称。这将导致类似配置的错误

"x": "npm:package@1.2.3"

然后，您可以

导入x

和

导入npm：package@1.2.3

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

我认为config.js的结构已经满足了您的所有需要。它包含依赖项及其版本

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

3） SystemJS是否有办法理解并将正确版本的依赖项注入web组件

我希望SystemJS在请求

component-a

或

component-b

时使用此信息导入正确的版本

---

我不知道如何让JSPM以这种方式安装软件包，保留一个软件包的多个版本。我认为这应该是一个单独的专门问题。

出于好奇，您是否使用ES6

import

语法？另外，关于2），您想要什么样的元数据？您好-我更新了问题，希望让它更清楚-让我们假设ES6

import

语法。元数据将是SystemJS需要的元数据，以便根据package.json依赖关系声明将正确版本的momentjs注入相应的组件。因此，元数据本质上是package.json中的依赖项名称和版本要求（当版本固定时）。如果没有修复，那么JSPM在执行依赖项解析步骤后会提供元数据。ES6导入肯定是更好的选择。如果没有它们，我认为你将无法有效地捆绑OK-Cool，其他模块的部分应该非常简单-谢谢。我在看Polymer.import语句，我认为它假设所有其他模块都集中到一个html导入中。Guy Bedford和文档确实说JSPM支持多版本依赖性。。。只是不清楚怎么做。我想知道SystemJS将如何确定组件a需要版本1.4.4，而组件b需要版本2.4.4的相同依赖项。我更新了我的答案。我还没有试过，请看看它是否适合你。关于

Polymer.import

它没有多大用处。它基本上只是插入一个