Question

我一直在浏览Angular2教程https://angular.io/docs/ts/latest/tutorial/。我已经从https://github.com/johnpapa/angular2-tour-of-heroes

克隆了代码

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

这是以这种方式导出JavaScript的节点，那么当在浏览器而不是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 = some用于我要导出的所有内容即可吗？

Answer 1

您看到的包装与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);";

使用TypeScript的Angular2：导出如何工作？

1 个答案: