带有 TypeScript 的 Angular2：导出如何工作？答案

【问题标题】：Angular2 with TypeScript: how does exporting work?带有 TypeScript 的 Angular2：导出如何工作？
【发布时间】：2017-03-08 02:09:29
【问题描述】：

我一直在阅读 Angular2 教程 https://angular.io/docs/ts/latest/tutorial/ 。我已经从https://github.com/johnpapa/angular2-tour-of-heroes克隆了代码

我正在尝试了解 TypeScript 是如何工作的。当您在 TypeScript 中导出一个函数时，比如称为“fnc”，我在生成的 js 文件中看到这相当于执行 export.fnc = fnc。

以这种方式导出 JavaScript 是 Node 的事情，那么当在浏览器而不是 Node 中运行时，这段代码如何在前端工作？是否必须安装另一个包，以便在前端使用 TypeScript，然后再更改这些再次生成的 js 文件。

当我查看开发者工具中的代码时，我发现它现在已经被包装在一个

    (function(System, SystemJS) {(function(require, exports, module, __filename, __dirname, global, GLOBAL) {"use strict"
    ...
    }).apply(__cjsWrapper.exports, __cjsWrapper.args);
    })(System, System);

是什么改变了代码看起来像这样。这是在此处完成的特定于 TypeScript 的事情，还是仅在我使用的 Angular 应用程序中特定的事情？

最后，要将 JavaScript 模块合并到我的不是 TypeScript 的应用程序中，正确的做法是将 export.something = something 用于我想要导出的所有内容吗？

【问题讨论】：

感动回答..

标签： javascript angular typescript

【解决方案1】：

您可能想阅读 TypeScript 的文档。这是他们模块页面的链接：https://www.typescriptlang.org/docs/handbook/modules.html。

TypeScript 不能被某些浏览器读取，因此 Angular 2 的代码需要编译成浏览器可读的代码（通常是 ES5）。这是通过 webpack、gulp、browserify 等完成的。有许多不同的工具可以实现这种转译。

我建议，如果您正在开发 TypeScript 应用程序，请不要尝试将 vanilla JavaScript 与 TypeScript 一起使用，编译器通常不喜欢这样。但是，为了回答您的问题，在您使用 modules.exports https://nodejs.org/api/modules.html#modules_module_exports 导出的节点中

【讨论】：

这些工具，如 webpack 和 browserify，是通过 Angular 隐藏给你的，还是你仍然需要知道这些工具在做什么？ Gulp 是我在 package.json 中看到的唯一一个
John Papa 正在使用 tsc 转译和观察任何 TypeScript 更改，他使用 Gulp 捆绑所有内容。有很多方法可以设置 Angular 2 项目，我建议你看看 Angular CLI 项目。这是启动新项目、添加组件、指令等并且仍然遵循样式指南的最简单方法。
谢谢，我会阅读这个。使用 vanilla JavsScript 长边 TypeScript 有什么问题？我已经有很多想要在 Angular 应用程序中使用的 JavaScript 文件，所以我不想在 TypeScript 中全部重写。
一些编译器会抛出类型错误，因为他们试图将 JavaScript 更改为 Javascript，尽管他们期待 TypeScript（或 CoffeScript 或 ES6，或任何超集）
那么对于我现有的 JavaScript 文件，您有什么建议。用 TypeScript 重写它们？或者对于这种情况我应该选择使用Angular2以外的框架吗？

【解决方案2】：

您看到的包装与 Typescript 无关。您的脚本由 SystemJS 加载，并在呈现给浏览器之前被包装。您可以在 SystemJS function 中看到 getSource：

  return (wrap ? '(function(System, SystemJS) {' : '') + source + (wrap ? '\n})(System, System);' : '')
  // adds the sourceURL comment if not already present
  + (source.substr(lastLineIndex, 15) != '\n//# sourceURL='
    ? '\n//# sourceURL=' + address + (sourceMap ? '!transpiled' : '') : '')
  // add sourceMappingURL if load.metadata.sourceMap is set
  + (sourceMap && inlineSourceMap(sourceMap) || '');

关于浏览器如何加载 CommonJS 模块的问题，feature of SystemJS。最后申请的调用特定于CommonJS module handling：

case 'cjs':
...
   source = cjsWrapper + ") {" + source.replace(hashBangRegEx, '') + "\n}).apply(__cjsWrapper.exports, __cjsWrapper.args);";

【讨论】：