Angular无.js文件却可在浏览器运行？编译转换机制咨询

为什么开发时本地看不到.js文件却能运行？ #

Angular CLI在开发模式（执行ng serve启动项目）下采用内存编译机制：

• 不会把TypeScript编译后的.js文件写入本地磁盘，而是在内存中完成编译、打包的全部流程，再通过内置的开发服务器直接把处理后的资源推送给浏览器。
• 只有执行ng build（默认生产环境）或ng build --configuration development时，才会将最终编译、打包好的产物写入dist文件夹，这时你就能看到预期的.js文件了。

开发者工具中JS文件的转换流程 #

你在浏览器开发者工具里看到的.js文件，是Angular底层依赖的webpack完成实时编译打包后的产物，完整流程大致如下：

• 第一步：TS转JS：TypeScript编译器（tsc）先把你的.ts代码转换成浏览器能识别的ES版本（比如ES5）的.js文件，同时完成类型校验。
• 第二步：打包合并：webpack将编译后的JS文件、Angular核心库、第三方依赖、样式资源等合并成几个bundle文件（比如main.js、polyfills.js）。
• 第三步：内存推送：开发服务器把这些存在内存里的bundle文件提供给浏览器，还支持热模块替换（HMR），修改代码后会自动重新编译并更新页面。
• 另外，开发者工具里能看到和原始.ts文件对应的source map，它的作用是把调试时看到的JS代码映射回你的TS源码，方便直接调试TypeScript代码。

内容的提问来源于stack exchange，提问作者user3742300