让 SystemJS 使用 angular2 包？

Question

我正在尝试在 Chrome 扩展程序中使用 angular2，但它没有识别出我已经加载了 angular2 包。这是我在文件/www/popup.html中的脚本标签：

<script src="lib/js/jquery.min.js"></script>
<script src="lib/js/es6-shim.min.js"></script>
<script src="lib/js/system-polyfills.js"></script>
<script src="lib/js/angular2-polyfills.js"></script>
<script src="lib/js/system.src.js"></script>

<!-- bundles should be used -->
<script src="lib/js/Rx.js"></script>
<script src="lib/js/angular2.dev.js"></script>
<script src="lib/js/router.dev.js"></script>

<script src="app/pages/popup-page.js"></script>

在/www/app/pages/popup-page.js 中，如果我设置到 angular2 和 rxjs 源的路径，它将起作用：

System.config({
  defaultJSExtensions: true, // Will prepend .js to the module names

  paths: {
    'angular2/*': '/node_modules/angular2/*', // finds
    'rxjs/*': '/node_modules/rxjs/*',         // finds
    '*': '/www/app/*'
  },
  packages: {
    "app": {
      format: 'register',
      defaultExtension: 'js',
    }
  }
});

但我不想让它单独加载每个 javascript 文件，甚至不希望将它们包含在我的扩展程序中。看起来这些包应该在脚本加载时自行注册。

1. 如果我不包含指向我的代码所在的路径“*”，我会在尝试运行脚本时收到“未定义要求”。

2. 如果我不包含 angular2 和 rxjs 的路径，我会让浏览器尝试为每个导入加载“/www/app/angular2/...”，而不是使用捆绑包

Answer 1

如果你加载一个包，该包的模块通过<script> 标签注册为系统模块，你不需要System.config 中的任何其他内容 - 它会通过内存中的注册名称解析导入。

通过在您的 html 文件导入语句中包含 <script src="lib/js/angular2.dev.js"></script>，例如 import {Component} from 'angular2/core'，无需任何额外配置即可工作。

从System.config 中删除path 选项应该可以解决角度导入问题。 （'*': '/www/app/*' - 这一行基本上将所有内容映射到/www/app 文件夹...）。

要为您自己的脚本设置路径，请使用System.config.package["app"]、more info here 中的map 选项。

Answer 2

我认为问题是defaultJSExtensions。如果我只是将我的System.config 更改为此它就可以工作：

System.config({
  packages: {
    "app": {
      defaultExtension: 'js',
    }
  }
});

我只是不知道任何地方有关于所有这些选项的文档。我查看了这些页面（还有更多我没有保存链接），但无法找到所有选项的参考或很好的解释：

• systemjs site
  • 链接到paths implementation 这是无用
  • 链接到ecma draft，其中第 15.2 节是 ES2015 模块的不错参考，但不是 systemjs 配置

Answer 3

您只需要映射“app”而不是“*”，如下所述：

System.config({
  defaultJSExtensions: true, // Will prepend .js to the module names

  paths: {
    'angular2/*': '/node_modules/angular2/*', // finds
    'rxjs/*': '/node_modules/rxjs/*',         // finds
    'app': '/www/app' // <------
  },
  packages: {
    "app": {
      format: 'register',
      defaultExtension: 'js',
    }
  }
});