TypeScript 模块解析
注：本篇文章结合了ts中文官方文档和个人平常使用场景的见解所写，转载需注明出处。
相对 vs. 非相对模块导入
相对导入是以/，./或../开头的, 相对模块解析示例：
import a form './a';
import a form '../a';
import a form '/a';
其他形式导入为非相对模块导入，示例：
import {component} from 'react';
区别：
-
相对导入在解析时是相对于导入它的文件，并且不能解析为一个外部模块声明。 你应该为你自己写的模块使用相对导入，这样能确保它们在运行时的相对位置。
-
非相对模块的导入可以相对于baseUrl或通过路径映射来进行解析。 它们还可以被解析成 外部模块声明，使用非相对路径来导入你的外部依赖。
模块解析策略
主要就是两种：1. classic 2. node
-
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 -
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
注意：
- 设置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中配置的，可能会花些时间再去熟悉查找。
网友评论