Angular2 的 System.config - 使用 javascript 还是 typescript？答案

【问题标题】：System.config for Angular2 - use javascript or typescript?Angular2 的 System.config - 使用 javascript 还是 typescript？
【发布时间】：2016-03-13 15:51:21
【问题描述】：

我刚刚涉足设置 Angular2 应用程序，但我不确定配置 index.html 的最佳方法是什么。我有两个示例可供参考：javascript 版本和 typescript 版本。由于 Angular2 使用的是打字稿，我认为打字稿版本是有意义的。 javascript 版本来自 Ari Lerner 的新 Angular2 书。以下是 2 个示例：

打字稿配置：

System.config({
    transpiler: 'typescript',
    typescriptOptions: {emitDecoratorMetadata: true},
    packages: {app: {defaultExtension: 'ts'}}
});
System.import('app/app');

Javascript 配置：

System.config({
  packages: {        
    app: {
      format: 'register',
      defaultExtension: 'js'
    }
  }
});
System.import('app/app.js')
    .then(null, console.error.bind(console));

我的问题是哪个最好用，为什么？

【问题讨论】：

您可以查看我为开始使用Typescript 制作的this 种子应用程序，您可能会发现它很有帮助

标签： configuration angular

【解决方案1】：

Angular2 app 可以用 Typescript 或 ES5/ES6 编写。在学习 angular2 的时候，你肯定发现 angular2 网站提供了两个 kinda docs（实际上是三个），现在检查你是否没有（你会看到 Angular2 for Typescript，@987654322 @、Angular2 for Dart。

现在由您决定为哪个平台编写 Angular2 应用程序。

1)。如果您打算使用typescript 编写 angular2 应用程序，显然您的目标 Web 浏览器将无法理解它，因此必须通过某种机制将 typescript 代码转换为目标 Web 浏览器可以理解的 javascript。所以代码的第一个 sn-p 意味着将 .ts 文件转换/转换为 .js 以便您的浏览器能够理解。

2)。如果您打算使用 Javascript/ES5/ES6 编写 angular2 应用程序，那么当然是您问题的第二部分。

建议：首先使用 Angular2 本身是从头开始用打字稿编写的。

【讨论】：

【解决方案2】：

首先，我认为JavaScript配置有一个小错误：

System.config({
  packages: {        
    app: {
      format: 'register',
      defaultExtension: 'js'
    }
  }
});
System.import('app/app'); // <------
  .then(null, console.error.bind(console));

关于你的问题：

我认为第一个配置（动态转换）对于性能无关紧要的小型应用程序来说很好。事实上，有一些额外的处理（在浏览器中）将应用程序代码转换为在模块加载级别上可由浏览器执行的东西。这种方法适用于在 plunkr 中执行的应用程序。

我会说利用 TypeScript 内容预编译的 JavaScript 配置效率更高，因为浏览器直接在 JavaScript 中执行模块代码（浏览器本身不进行转译）。

也就是说，如果你想拥有一些真正高效的东西（生产读取应用程序），你需要打包你的应用程序：

1) 将您的 TypeScript 代码预编译为 JavaScript
2) 将 JavaScript 代码收集到最少的 JS 文件集中，以尽量减少要加载的文件数量
3) 缩小 JavaScript 代码以减小其大小

第一种方法不允许所有这三点。第二种方法允许预编译和缩小，但您不能将整个应用程序代码收集到一个文件中。

为此，您需要利用 tsc 编译器的 outFile 参数。这样，您将所有模块放入一个可以缩小的文件中。在这种情况下，您不再需要配置 SystemJS。你需要导入主模块...

这些问题可以给你额外的提示：

【讨论】：