Angular 没有开始使用 SystemJS 包答案

【问题标题】：Angular doesn't start using SystemJS bundleAngular 没有开始使用 SystemJS 包
【发布时间】：2017-03-15 22:04:42
【问题描述】：

自两周前以来，我一直在尝试一种奇怪的行为。

我正在考虑并且我决定进行回购并进行测试以隔离问题。

这是一个从 angular/quickstart 中提取的简单 repo。我添加了一个 gulp 文件来构建一个包，当我尝试加载它时，我遇到了同样的问题。应用程序未启动。

这是systemjs的配置：https://github.com/tolemac/systemjs-test/blob/master/systemjs.config.js

这是构建包的 gulpfile：https://github.com/tolemac/systemjs-test/blob/master/gulpfile.js

这是回购：https://github.com/tolemac/systemjs-test

复制说明：

mkdir systemjs-test
cd systemjs-test
git clone https://github.com/tolemac/systemjs-test.git .
npm install
gulp bundle
npm start

【问题讨论】：

我发现使用 SystemJS builder 有问题。要查看您是否属于这种情况，请查看未缩小的捆绑包，看看它是否有意义。我看到了无意义的输出（比如 true === true 有点像），所以我放弃了它并使用汇总来进行捆绑。
我正在考虑迁移到 webpack ...
buff，webpack 是超级工程师！！太多了。用 ts 慢。
@pixelbits 请阅读我的答案和他的 cmets

标签： angular systemjs systemjs-builder

【解决方案1】：

我试用了你的 repo，怀疑它生成的包看起来不正确：

(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? 
      factory(exports, require('@angular/core')) : 
      'function' === 'function' && true ? System.registerDynamic('npm:@angular/compiler/bundles/compiler.umd.js', ['@angular/core'], false, function ($__require, $__exports, $__module) {
        if (typeof factory === 'function') {
            return factory.call($__exports, $__exports, $__require('@angular/core'));
        } else {
            return factory;
        }

这里出了点问题。注意'function' === 'function' && true ? 声明...

我建议使用 Rollup 来捆绑您的应用。

Demo Starter App

【讨论】：

我已经做了一些测试，如果我不在供应商捆绑包中包含角度捆绑包，它就可以工作。那我觉得你的反应最好。

【解决方案2】：

嗯，我花在它上面的时间越来越多了。

通过阅读systemjs、systemjs-builder的源代码和builder用来识别加载模块的模块加载器代码的babel插件，我学到了很多东西。只是为了意识到问题是 SystemJS 不识别捆绑模块的格式...因此，systemjs 不执行加载的代码...然后解决方案是通过设置捆绑包的格式配置，这样：

packages: {
  ...
  ...
  ...
  'bundles/vendor.js': {
    format: "system"
  }
}

解决了！

【讨论】：

@pixelbits 我已经能够看到'function' === 'function' && true ? 来自哪里，systemjs-builder 使用 babel 编译器获取每个模块的 AST 以定位它使用 define 和其他的表达式。构建器替换此表达式以获得真正的表达式并将define 替换为System.dynamicRegister。在这些天学习 webpack、rollup 和 systemjs 之后，我确认我不喜欢 systemjs 用于大型应用程序。我会为包和库使用汇总，为必须快速发布和部署的小型应用程序使用 webpack。
这太好了，感谢您如此彻底地调查！