让 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 文件，甚至不想将它们包含在我的扩展程序中。看起来这些包应该在脚本加载时自行注册。

如果我不包含我的代码所在的路径“*”，我会得到一个 'require is not defined' 试图运行脚本。
如果我不包含 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 选项应该可以解决 angular 导入的问题。（'*': '/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',
    }
  }
});

让 SystemJS 使用 angular2 包？

Making SystemJS use angular2 bundle?

systemjs

angular