TypeScript 模块解析

TypeScript 模块解析

注：本篇文章结合了ts中文官方文档和个人平常使用场景的见解所写，转载需注明出处。

相对 vs. 非相对模块导入

相对导入是以/，./或../开头的, 相对模块解析示例：

import a form './a';
import a form '../a';
import a form '/a';

其他形式导入为非相对模块导入，示例：

import {component} from 'react';

区别：

• 相对导入在解析时是相对于导入它的文件，并且不能解析为一个外部模块声明。 你应该为你自己写的模块使用相对导入，这样能确保它们在运行时的相对位置。

• 非相对模块的导入可以相对于baseUrl或通过路径映射来进行解析。 它们还可以被解析成 外部模块声明，使用非相对路径来导入你的外部依赖。

模块解析策略

主要就是两种：1. classic 2. node

1. classic : 以前是TypeScript默认的解析策略。 现在，它存在的理由主要是为了向后兼容。
   classic 下分为相对和非相对模块导入
   相对： 在引入文件所在目录层级找form后名称对应的文件

   /root/dir/moduleA.js中有一句 import {b} form './moduleB'
   那么寻找的顺序就是：
   /root/dir/moduleB.ts
   /root/dir/moduleB.d.ts
   

   非相对：先在引入文件所在目录层级找form后名称对应的文件，找不到就去父级找，最终找到根目录下

   /root/dir/moduleA.js中有一句 import {b} form 'moduleB'
   那么寻找的顺序就是：
   /root/dir/moduleB.ts
   /root/dir/moduleB.d.ts
   /root/moduleB.ts
   /root/moduleB.d.ts
   /moduleB.ts
   /moduleB.d.ts
   

2. node :
   node 下分为相对和非相对模块导入
   相对： 在引入文件所在目录层级找form后名称对应的文件，找不到之后找文件夹下面是否有含types的package.json文件，之后组合路径，再找不到最后会找文件夹下面的index.后缀

   /root/dir/moduleA.js中有一句 import {b} form './moduleB'
   那么寻找的顺序就是：
   /root/dir/moduleB.ts
   /root/dir/moduleB.tsx
   /root/dir/moduleB.d.ts
   /root/dir/moduleB/package.json (如果指定了"types"属性)
   /root/dir/moduleB/index.ts
   /root/dir/moduleB/index.tsx
   /root/dir/moduleB/index.d.ts
   

   非相对：在引入文件所在目录层级node_modules找form后名称对应的文件，找不到之后找node_modules中对应文件夹下面是否有含types的package.json文件，之后组合路径，再找不到最后会找node_modules对应文件夹下面的index.后缀，之后如果本层级没有就递归从父级找，最终找到根目录下

   /root/dir/moduleA.js中有一句 import {b} form 'moduleB'
   那么寻找的顺序就是：
   /root/dir/node_modules/moduleB.ts
   /root/dir/node_modules/moduleB.tsx
   /root/dir/node_modules/moduleB.d.ts
   /root/dir/node_modules/moduleB/package.json (如果指定了"types"属性)
   /root/dir/node_modules/moduleB/index.ts
   /root/dir/node_modules/moduleB/index.tsx
   /root/dir/node_modules/moduleB/index.d.ts
   
   /root/node_modules/moduleB.ts
   /root/node_modules/moduleB.tsx
   /root/node_modules/moduleB.d.ts
   /root/node_modules/moduleB/package.json (如果指定了"types"属性)
   /root/node_modules/moduleB/index.ts
   /root/node_modules/moduleB/index.tsx
   /root/node_modules/moduleB/index.d.ts
   
   /node_modules/moduleB.ts
   /node_modules/moduleB.tsx
   /node_modules/moduleB.d.ts
   /node_modules/moduleB/package.json (如果指定了"types"属性)
   /node_modules/moduleB/index.ts
   /node_modules/moduleB/index.tsx
   /node_modules/moduleB/index.d.ts
   

注意：

1. 设置baseUrl来告诉编译器到哪里去查找模块，增加查找效率，非相对模块导入都会被当做相对于baseUrl
   • 命令行中baseUrl的值（如果给定的路径是相对的，那么将相对于当前路径进行计算）
   • tsconfig.json里的baseUrl属性（如果给定的路径是相对的，那么将相对于‘tsconfig.json’路径进行计算）

路径映射

有时候模块不在baseUrl下面需要自己去映射，比如你想自定义模块路经
示例： 有可能项目中用到一个公共组件你可能会这样写import moduleName from '../../component/module‘ 但是这样维护相对路径有可能会非常长比较难定位，这时我们配置一下(假设src是项目根目录下的文件夹， component为src下一级文件夹)

// tsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".", // This must be specified if "paths" is.
    "paths": {
      "@component/*": ["src/component/*"] // 此处映射是相对于"baseUrl"
    }
  }
}

// webpack
resolve: {
  alias: {
    '@components': path.resolve(__dirname, './src/component'),
  }
}

这样配置下来就能愉快的 import moduleName from '@component/module

注意

src
└── views
└── view1.ts (imports './template1')
└── view2.ts
└── component1
└── component2
tsconfig.json

• "paths"是相对于"baseUrl"进行解析，如果baseUrl是‘./src’, 那么paths 就应该是"@component1/": ["./component1/"]
• paths 还可以指定多个路径 比如 @component/*": ["./component1/*", "./component2/*"]
  这样模块查找就会去两个地方匹配模块，一个是src/component/*另一个是src/component2/*

利用rootDirs指定虚拟目录

比如：

// 文件夹结构
src
└── views
    └── view1.ts (imports './template1')
    └── view2.ts

generated
└── templates
        └── views
            └── template1.ts (imports './view2')

// tsconfig.json
{
  "compilerOptions": {
    "rootDirs": [
      "src/views",
      "generated/templates/views"
    ]
  }
}

这样view1.ts (imports './template1') 就会直接去generated/templates/views 下面去找模块，而不用使用相对路径回退再一步一步去找模块， 同理template1.ts (imports './view2') 也会先去rootDirs 数组里看看别的路径中有没有对应模块，这样节省了写相对路径带来的苦恼，但是有一点不好，就是可能开发项目中写的一个简单的相对路径，对应的文件在目录中没有，这是你一时忘了是在rootDir中配置的，可能会花些时间再去熟悉查找。

最后，这篇文章讲了大部分关于ts模块解析的东西，结合实际希望对大家能有用处，有什么说的不对的地方，希望能够留言。 对模块解析有疑问的同学可以去ts中文官方文档去看，比较全面。