如何理解TypeScript模块的解析和编译？

观察编译结果

编译成的目标, 是可以在tsconfig.json配置的

配置ES6

tsconfig.json

    {
      "compilerOptions": { 
        "module": "ES6", // 配置结果的模块化标准
        "removeComments": true // 是否编译后清除注释
      }
    }

这时我们运行 tsc --watch 监听代码变动去自动执行编译

🙉导出对比:

🙉导入对比:

如果编写时使用es6模块化, 配置模块化标准也是es6, 最终会没什么变化

配置CommonJS

tsconfig.json

    {
      "compilerOptions": { 
        "module": "CommonJS", // 配置结果的模块化标准
        "removeComments": true // 是否编译后清除注释
        "noImplicitUseStrict": true // 关闭"use strict"
      }
    }

🙉导出对比:

• 1.设置__esmodule = true
• 2.编译后第一步设置变量为undefined
• 3.设置变量的值
• 4.使用变量，调用函数

🙉导入对比:

如果编写时使用es6模块化, 配置的模块化标准是CommonJS, 最终导出的声明会变成exports属性,默认的导出会变成exports.default属性

导入的声明会变成require, 变量名变为myModule_序号, 导入的值需要[.default], 导入解构的值直接[.xxx]

模块解析策略

🙉什么是模块解析： 应该从什么位置寻找模块

TS中有两种解析策略

• classic

曾经是TypeScript的默认解析策略，如今，这种策略主要是为了向后兼容而存在的。不建议使用

• node解析

此解析策略尝试在运行时模拟 Node.js 模块解析机制

 - 唯一的变化就是`编译前`寻找js文件变为寻找ts文件
 - 使用相对路径

// 如果没找到相对路径，会默认找到package.json中main路径
require('./xxx') 

• 使用绝对路径

    // 会默认找到node_modules文件夹
    require('xxx') 

需注意点

1. 如果要保证完全用node解析，必须加上一个配置

tsconfig.json

{
  "compilerOptions": { 
     // 设置模块解析方式
    "moduleResolution": "node"
  }
}