我也在使用 Javascript 和 Typescript 学习 Angular2 快速入门教程,在 javascript 版本中,我观察到组件和模块首先分配给一个变量(window.app,我将其理解为一些全局变量)可以跨 js 文件或脚本 block 访问),这很好。对于仅使用导出和导入的类型脚本版本,我尝试分析生成的 JavaScript 代码,但一无所获。有人可以解释一下 Tyepescript 中的导出和导入是如何工作的吗?
最佳答案
这里的文档很好地解释了 typescript 中的导入和导出 https://www.typescriptlang.org/docs/handbook/modules.html .
就像 toskv 在他的评论中所说,TypeScript 文件中的这些语句如何转换为 JavaScript 文件中的语句很大程度上取决于您在 tsconfig.json
中设置的模块系统文件。
例如,设置 "module": "commonjs"
将导致 TypeScript 编译器 ( tsc
) 将您的导入/导出语句转换为实质上的 node.js 样式 require()
声明。本文档有一些简单但有用的示例,说明了 node.js 模块如何工作:https://nodejs.org/api/modules.html 。
使用“systemjs”设置而不是“commonjs”将使 TypeScript 将您的导入/导出语句转换为 SystemJS 可以理解的格式,而我不是这方面的专家。
由于 Angular 2 项目还需要构建步骤来获取转译的 JavaScript 文件并将其转换为打包的“包”,因此该过程变得更加复杂。这些捆绑文件(取决于您的配置设置)是串联的、缩小的,甚至可能是丑化的。因此,查看最终运行的 JavaScript 代码确实没有帮助,因为它不是由人类编写的。
例如,Webpack 构建系统 (google webpack.js) 采用 require()
它在 JavaScript 代码中找到语句,并使用一些魔法将每个模块包装在自己的 __webpack_require__
中。函数,它允许构建系统获取整个项目文件结构并将其捆绑到一个或多个 JavaScript 文件中,这些文件仍然保持彼此的依赖关系。
换句话说,当您查看生成的 JavaScript 代码时,它并不意味着人类读者可以理解。流量可以简单地表示为 TS Source Code
> TS Transpilation into JS Code
> Module/Dependency Build Steps into Production JS Code
.
TL;DR TypeScript 实际上并不处理模块导入/导出。在转译过程中,它将这些语句转换为其他模块系统(node.js 或 SystemJS)可以理解的语句,这些语句又被转换为为 Angular 2 应用程序提供服务的生产代码。
关于javascript - Typescript 中的导出和导入如何工作?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41859167/