TS-Module-Resolution

TS Module Resolution
  • Classic [default]

    前提:模块引入语句在文件( /root/src/folder/A.ts )中

​ 1、以相对路径的方式引入, import { b } from ‘./moduleB’ ,ts就会按照以下去查找b变量:

​ a. /root/src/folder/moduleB.ts

​ b. /root/src/folder/moduleB.d.ts

​ 2、非相对路径的方式引入,即直接引入模块名( import { b } from ‘moduleB’ ),则模块解析路径为:

​ a./root/src/folder/moduleB.ts

​ b. /root/src/folder/moduleB.d.ts

​ c./root/src/moduleB.ts

​ d… 即一层层向上找,直到根目录

  • Node (TS中Node模式的模块解析方式相较与于Node.js来说是简化了的)

    前提:模块引入语句在文件( /root/src/moduleA.ts )中

​ 1、相对路径方式的引入:var x = require(“./moduleB”),Node解析路径只会找这个相对路径下符合的模块,不会向上递归查找。

​ a. /root/src/moduleB.js 如果这个路径下的moduleB文件存在。

​ b. /root/src/moduleB 查找moduleB这个文件夹下是否存在package.json,并且package.json中包含{“main”: “lib/mainModule.js”},如果存在,Node.js就会从/root/src/moduleB/lib/mainModule.js中解析。

​ 2、非相对路径方式的模块名引入:var x = require(“moduleB”) ,Node会向上递归解析路径,直到找到符合的模块。

​ a. /root/src/node_modules/moduleB.js

​ b. /root/src/node_modules/moduleB/package.json (if it specifies a “main” property)

​ c. /root/src/node_modules/moduleB/index.js

​ d. /root/node_modules/moduleB.js

​ e. /root/node_modules/moduleB/package.json (if it specifies a “main” property)

​ f. /root/node_modules/moduleB/index.js

​ g. /node_modules/moduleB.js

​ h. /node_modules/moduleB/package.json (if it specifies a “main” property)

​ I. /node_modules/moduleB/index.js

TS中与模块解析相关的配置:

一、baseUrl
1、在命令行中配置,可参考http://www.typescriptlang.org/docs/handbook/module-resolution.html#classic
2、在tsconfig.json中配置baseUrl

为什么需要baseUrl ?

某些模块名与模块文件名不一致,baseUrl可以告诉TS Compiler去哪里寻找这些模块。

1
2
3
4
5
6
7
8
{
"compilerOptions":{
"baseUrl": ".", // 如果写了paths配置项,那么baseUrl是必填项
"paths": {
"jquery": ["node_modules/jquery/dist/jquery"] // 相对路径 相对于baseUrl 拼接起来就是./node_modules/jquery/dist/jquery
}
}
}
1
2
3
4
5
6
7
8
9
projectRoot
├── folder1
│ ├── file1.ts (imports 'folder1/file2' and 'folder2/file3')
│ └── file2.ts
├── generated
│ ├── folder1
│ └── folder2
│ └── file3.ts
└── tsconfig.json
1
2
3
4
5
6
7
8
9
10
11
12
13
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"*": [
"*", // 1
"generated/*" // 2
]
}
}
}
1、"*": 模块名即路径名 <moduleName> => <baseUrl>/<moduleName>
2、"generated/*": <moduleName> => <baseUrl>/<generated>/<moduleName>
二、rootDirs

Comments

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×