TypeScript——模块解析

模块解析1、相对模块导入2、非相对模块导入3、模块解析策略4、模块解析策略之Classic4.1、解析相对模块导入4.2、解析非相对模块导入5、模块解析策略之Node5.1、解析相对模块导入5.2、解析非相对模块导入6、--baseUrl6.1、设置--baseUrl6.2、解析--baseUrl7、paths7.1、设置paths7.2、使用通配符7.3、使用场景8、rootDirs9、导入外部模块声明10、--traceResolution当在程序中导入了一个模块时编译器会去查找并读取导入模块的定义我们将该过程叫作模块解析。模块解析的过程受以下因素影响相对模块导入与非相对模块导入。模块解析策略。模块解析编译选项。1、相对模块导入在模块导入语句中若模块名以下列符号开始那么它就是相对模块导入。/./..///“/”表示系统根目录示例如下import{a}from/mod;//此例中导入了系统根目录下的mod模块。//“./”表示当前目录示例如下import{a}from./mod;//此例中导入了当前目录下的mod模块。//“../”表示上一级目录示例如下import{a}from../mod;//此例中导入了上一级目录下的mod模块。在解析相对模块导入语句中的模块名时将参照当前模块文件所在的目录位置。例如有如下目录结构的工程C:\ |-- app | |-- foo | | |-- a.ts | | -- b.ts | -- bar | -- c.ts -- d.ts在“a.ts”模块中可以使用如下相对模块导入语句来导入“b.ts”模块importbfrom./b;在“b.ts”模块中可以使用如下相对模块导入语句来导入“c.ts”模块importcfrom../bar/c;在“c.ts”模块中可以使用如下相对模块导入语句来导入系统根目录下的“d.ts”模块importdfrom/d;2、非相对模块导入在模块导入语句中若模块名不是以“/”​、​“./”和“…/”符号开始那么它就是非相对模块导入。例如下面的两个导入语句都是非相对模块导入import{Observable}fromrxjs;import{Component}fromangular/core;3、模块解析策略TypeScript提供了两种模块解析策略分别是Classic策略。Node策略。模块解析策略可以使用“–moduleResolution”编译选项来指定示例如下tsc--moduleResolutionClassic模块解析策略也可以在“tsconfig.json”配置文件中使用moduleResolution属性来设置示例如下{compilerOptions:{moduleResolution:Node}}当没有设置模块的解析策略时默认的模块解析策略与“–module”编译选项的值有关。​“–module”编译选项用来设置编译生成的JavaScript代码使用的模块格式。若“–module”编译选项的值为CommonJS则默认的模块解析策略为Node。示例如下tsc--moduleCommonJS这等同于tsc--moduleCommonJS--moduleResolutionNode若“–module”编译选项的值不为CommonJS则默认的模块解析策略为Classic。示例如下tsc--moduleES6这等同于tsc--moduleES6--moduleResolutionClassic4、模块解析策略之ClassicClassic模块解析策略是TypeScript最早提供的模块解析策略它尝试将模块名视为一个文件进行解析。4.1、解析相对模块导入在Classic模块解析策略下相对模块导入的解析过程包含以下两个阶段将导入的模块名视为文件并在指定目录中查找TypeScript文件。将导入的模块名视为文件并在指定目录中查找JavaScript文件。假设有如下目录结构的工程C:\app -- a.ts在“a.ts”模块文件中使用相对模块导入语句导入了模块b。示例如下import*asBfrom./b;在Classic模块解析策略下模块b的解析过程如下查找“C:/app/b.ts”​。查找“C:/app/b.tsx”​。查找“C:/app/b.d.ts”​。查找“C:/app/b.js”​。查找“C:/app/b.jsx”​。在查找模块文件的过程中一旦找到匹配的文件就会停止搜索。4.2、解析非相对模块导入在Classic模块解析策略下非相对模块导入的解析过程包含以下三个阶段将导入的模块名视为文件从当前目录开始向上遍历至系统根目录并查找Type-Script文件。将导入的模块名视为安装的声明文件从当前目录开始向上遍历至系统根目录并在每一级目录下的“node_modules/types”文件夹中查找安装的声明文件。将导入的模块名视为文件从当前目录开始向上遍历至系统根目录并查找Java-Script文件。在Classic模块解析策略下非相对模块导入的解析与相对模块导入的解析相比较有以下几点不同解析相对模块导入时只会查找指定的一个目录解析非相对模块导入时会向上遍历整个目录树。解析非相对模块导入比解析相对模块导入多了一步即在每一层目录的“node_modules/types”文件夹中查找是否安装了要导入的声明文件。例如有如下目录结构的工程C:\app -- a.ts在“a.ts”模块文件中使用非相对模块导入语句导入了模块b。示例如下import*asBfromb;下面分别介绍在Classic模块解析策略下模块b的解析过程。第一阶段遍历目录树并查找TypeScript文件。具体步骤如下查找文件“C:/app/b.ts”​。查找文件“C:/app/b.tsx”​。查找文件“C:/app/b.d.ts”​。查找文件“C:/b.ts”​。查找文件“C:/b.tsx”​。查找文件“C:/b.d.ts”​。第二阶段遍历目录树并在每一级目录下查找是否在“node_modules/types”文件夹中安装了要导入的声明文件。具体步骤如下查找文件“C:/app/node_modules/types/b.d.ts”​。如果“C:/app/node_modules/types/b/package.json”文件存在且包含了typings属性或types属性假设属性值为“typings.d.ts”​​那么查找文件“C:/app/node_modules/types/b/typings.d.ts”​。查找文件“C:/app/node_modules/types/b/typings.d.ts.ts”​注意尝试添加“.ts”文件扩展名​。查找文件“C:/app/node_modules/types/b/typings.d.ts.tsx”​注意尝试添加“.tsx”文件扩展名​。查找文件“C:/app/node_modules/types/b/typings.d.ts.d.ts”​注意尝试添加“.d.ts”文件扩展名​。若存在目录“C:/app/node_modules/types/b/typings.d.ts/”​则查找文件“C:/app/node_modules/types/b/typings.d.ts/index.ts”​。查找文件“C:/app/node_modules/types/b/typings.d.ts/index.tsx”​。查找文件“C:/app/node_modules/types/b/typings.d.ts/index.d.ts”​。查找文件“C:/app/node_modules/types/b/index.d.ts”​。查找文件“C:/node_modules/types/b.d.ts”​注意第46步与第13步的流程相同区别是在上一级目录“C:/”中继续搜索​。如果文件“C:/node_modules/types/b/package.json”存在且包含了typings属性或types属性假设属性值为“./typings.d.ts”​​那么查找文件“C:/node_modules/types/b/typings.d.ts”​。查找文件“C:/node_modules/types/b/typings.d.ts.ts”​注意尝试添加“.ts”文件扩展名​。查找文件“C:/node_modules/types/b/typings.d.ts.tsx”​注意尝试添加“.tsx”文件扩展名​。查找文件“C:/node_modules/types/b/typings.d.ts.d.ts”​注意尝试添加“.d.ts”文件扩展名​。若存在目录“C:/node_modules/types/b/typings.d.ts/”​则查找文件“C:/node_modules/types/b/typings.d.ts/index.ts”​。查找文件“C:/node_modules/types/b/typings.d.ts/index.tsx查找文件“C:/node_modules/types/b/typings.d.ts/index.d.ts”​。查找文件“C:/node_modules/types/b/index.d.ts”​。第三阶段遍历目录树并查找JavaScript文件。具体步骤如下查找文件“C:/app/b.js”​。查找文件“C:/app/b.jsx”​。查找文件“C:/b.js”​。查找文件“C:/b.jsx”​。在查找模块文件的过程中一旦找到匹配的文件就会停止搜索。5、模块解析策略之NodeNode模块解析策略是TypeScript 1.6版本中引入的它因模仿了Node.js的模块解析策略[插图]而得名。在实际工程中我们可能更想要使用Node模块解析策略因为它的功能更加丰富。5.1、解析相对模块导入在Node模块解析策略下相对模块导入的解析过程包含以下几个阶段将导入的模块名视为文件并在指定目录中查找TypeScript文件。将导入的模块名视为目录并在该目录中查找“package.json”文件然后解析“package.json”文件中的typings属性和types属性。将导入的模块名视为文件并在指定目录中查找JavaScript文件。将导入的模块名视为目录并在该目录中查找“package.json”文件然后解析“package.json”文件中的main属性。假设有如下目录结构的工程C:\app -- a.ts在“a.ts”模块文件中使用相对模块导入语句导入了模块b。示例如下import*asBfrom./b;下面分别介绍在Node模块解析策略下模块b的解析过程。第一阶段将导入的模块名视为文件并在指定目录中依次查找TypeScript文件。具体步骤如下查找文件“C:/app/b.ts”​。查找文件“C:/app/b.tsx”​。查找文件“C:/app/b.d.ts”​。第二阶段将导入的模块名视为目录并在该目录中查找“package.json”文件然后解析“package.json”文件中的typings属性和types属性。具体步骤如下如果“C:/app/b/package.json”文件存在且包含了typings属性或types属性假设属性值为“typings.d.ts”​​那么查找文件“C:/app/b/typings.d.ts”​。查找文件“C:/app/b/typings.d.ts.ts”​注意尝试添加“.ts”文件扩展名​。查找文件“C:/app/b/typings.d.ts.tsx”​注意尝试添加“.tsx”文件扩展名​。查找文件“C:/app/b/typings.d.ts.d.ts”​注意尝试添加“.d.ts”文件扩展名​。如果存在目录“C:/app/b/typings.d.ts/”​那么查找文件“C:/app/b/typings.d.ts/index.ts”​。查找文件“C:/app/b/typings.d.ts/index.tsx”​。查找文件“C:/app/b/typings.d.ts/index.d.ts”​。查找文件“C:/app/b/index.ts”​。查找文件“C:/app/b/index.tsx”​。查找文件“C:/app/b/index.d.ts”​。第三阶段将导入的模块名视为文件并在指定目录中依次查找JavaScript文件。具体步骤如下查找文件“C:/app/b.js”​。查找文件“C:/app/b.jsx”​。第四阶段将导入的模块名视为目录并在该目录中查找“package.json”文件然后解析“package.json”文件中的main属性。具体步骤如下如果“C:/app/b/package.json”文件存在且包含了main属性假设属性值为“main.js”​​那么查找文件“C:/app/b/main.js”​。查找文件“C:/app/b/main.js.js”​注意尝试添加“.js”文件扩展名​。查找文件“C:/app/b/main.js.jsx”​注意尝试添加“.jsx”文件扩展名​。查找文件“C:/app/b/main.js”​注意尝试删除文件扩展名后再添加“.js”文件扩展名​。查找文件“C:/app/b/main.jsx”​注意尝试删除文件扩展名后再添加“.jsx”文件扩展名​。如果存在目录“C:/app/b/main.js/”​那么查找文件“C:/app/b/main.js/index.js”​。查找文件“C:/app/b/main.js/index.jsx”​。查找文件“C:/app/b/index.js”查找文件“C:/app/b/index.jsx”5.2、解析非相对模块导入在Node模块解析策略下非相对模块导入的解析过程包含以下几个阶段将导入的模块名视为文件并在当前目录下的“node_modules”文件夹中查找Type-Script文件。将导入的模块名视为目录并在当前目录下的“node_modules”文件夹中查找给定目录下的“package.json”文件然后解析“package.json”文件中的typings属性和types属性。将导入的模块名视为安装的声明文件并在当前目录下的“node_modules/types”文件夹中查找安装的声明文件。重复第13步的查找过程从当前目录开始向上遍历至系统根目录。将导入的模块名视为文件并在当前目录下的“node_modules”文件夹中查找Java-Script文件。将导入的模块名视为目录并在当前目录下的“node_modules”文件夹中查找给定目录下的“package.json”文件然后解析“package.json”文件中的main属性。重复第56步的查找过程从当前目录开始向上遍历至系统根目录。假设有如下目录结构的工程C:\app -- a.ts在“a.ts”模块文件中使用非相对模块导入语句导入了模块b。示例如下import*asBfromb;下面分别介绍在Node模块解析策略下模块b的解析过程。第一阶段将导入的模块名视为文件并在当前目录下的“node_modules”文件夹中查找TypeScript文件。具体步骤如下查找文件“C:/app/node_modules/b.ts”​。查找文件“C:/app/node_modules/b.tsx”​。查找文件“C:/app/node_modules/b.d.ts”​。第二阶段将导入的模块名视为目录并在当前目录下的“node_modules”文件夹中查找给定目录下的“package.json”文件然后解析“package.json”文件中的typings属性和types属性。具体步骤如下如果“C:/app/node_modules/b/package.json”文件存在且包含了typings属性或types属性假设属性值为“typings.d.ts”​​那么查找文件“C:/app/node_modules/b/typings.d.ts”​。查找文件“C:/app/node_modules/b/typings.d.ts.ts”​注意尝试添加“.ts”文件扩展名​。查找文件“C:/app/node_modules/b/typings.d.ts.tsx”​注意尝试添加“.tsx”文件扩展名​。查找文件“C:/app/node_modules/b/typings.d.ts.d.ts”​注意尝试添加“.d.ts”文件扩展名​。若存在目录“C:/app/node_modules/b/typings.d.ts/”​则查找文件“C:/app/node_modules/b/typings.d.ts/index.ts”​。查找文件“C:/app/node_modules/b/typings.d.ts/index.tsx”​。查找文件“C:/app/node_modules/b/typings.d.ts/index.d.ts”​。查找文件“C:/app/node_modules/b/index.ts”​。查找文件“C:/app/node_modules/b/index.tsx”​。查找文件“C:/app/node_modules/b/index.d.ts”​。第三阶段将导入的模块名视为安装的声明文件并在当前目录下的“node_modules/types”文件夹中查找安装的声明文件。具体步骤如下查找文件“C:/app/node_modules/types/b.d.ts”​。如果“C:/app/node_modules/types/b/package.json”文件存在且包含了typings属性或types属性假设属性值为“typings.d.ts”​​那么查找文件“C:/app/node_modules/types/b/typings.d.ts”​。查找文件“C:/app/node_modules/types/b/typings.d.ts.ts”​注意尝试添加“.ts”文件扩展名​。查找文件“C:/app/node_modules/types/b/typings.d.ts.tsx”​注意尝试添加“.tsx”文件扩名​。查找文件“C:/app/node_modules/types/b/typings.d.ts.d.ts”​注意尝试添加“.d.ts”文件扩展名​。如果存在目录“C:/app/node_modules/types/b/typings.d.ts/”​那么查找文件“C:/app/node_modules/types/b/typings.d.ts/index.ts”​。查找文件“C:/app/node_modules/types/b/typings.d.ts/index.tsx”​。查找文件“C:/app/node_modules/types/b/typings.d.ts/index.d.ts”​。查找文件“C:/app/node_modules/types/b/index.d.ts”​。第四阶段重复第一阶段至第三阶段的查找步骤只不过是在上一级目录“C:/”下继续搜索。第五阶段将导入的模块名视为文件并在当前目录中的“node_modules”文件夹下查找JavaScript文件查找文件“C:/app/node_modules/b.js”​。查找文件“C:/app/node_modules/b.jsx”​。第六阶段将导入的模块名视为目录并在当前目录下的“node_modules”文件夹中查找给定目录下的“package.json”文件然后解析“package.json”文件中的main属性。具体步骤如下如果“C:/app/node_modules/b/package.json”文件存在且包含了main属性假设属性值为“main.js”​​那么查找文件“C:/app/node_modules/b/main.js”​。查找文件“C:/app/node_modules/b/main.js.js”​注意尝试添加“.js”文件扩展名​。查找文件“C:/app/node_modules/b/main.js.jsx”​注意尝试添加“.jsx”文件扩展名​。查找文件“C:/app/node_modules/b/main.js”​注意尝试删除文件扩展名后再添加“.js”文件扩展名​。查找文件“C:/app/node_modules/b/main.jsx”​注意尝试删除文件扩展名后再添加“.jsx”文件扩展名​。如果存在目录“C:/app/node_modules/b/main.js/”​那么查找文件“C:/app/node_modules/b/main.js/index.js”​。查找文件“C:/app/node_modules/b/main.js/index.jsx”​。查找文件“C:/app/node_modules/b/index.js”​。查找文件“C:/app/node_modules/b/index.jsx”​。第七阶段重复第五阶段至第六阶段的查找步骤只不过是在上一级目录“C:/”下继续搜索。在查找模块文件的过程中一旦找到匹配的文件就会停止搜索。6、–baseUrl“–baseUrl”编译选项用来设置非相对模块导入的基准路径。在解析相对模块导入时将不受“–baseUrl”编译选项值的影响。6.1、设置–baseUrl该编译选项既可以在命令行上指定也可以在“tsconfig.json”配置文件中进行设置。在命令行上使用“–baseUrl”编译选项示例如下tsc--baseUrl./此例中将“–baseUrl”编译选项的值设置为当前目录“./”​参照的是执行tsc命令时所在的目录。在“tsconfig.json”配置文件中使用baseUrl属性来设置“–baseUrl”编译选项示例如下{compilerOptions:{baseUrl:./}}此例中将baseUrl设置为当前目录“./”​参照的是“tsconfig.json”配置文件所在的目录。6.2、解析–baseUrl当设置了“–baseUrl”编译选项时非相对模块导入的解析过程包含以下几个阶段根据“–baseUrl”的值和导入的模块名计算出导入模块的路径。将导入的模块名视为文件并查找TypeScript文件。将导入的模块名视为目录在该目录中查找“package.json”文件然后解析“package.json”文件中的typings属性和types属性。将导入的模块名视为目录在该目录中查找“package.json”文件然后解析“package.json”文件中的main属性。忽略“–baseUrl”的设置并回退到使用Classic模块解析策略或Node模块解析策略来解析模块。当设置了“–baseUrl”编译选项时相对模块导入的解析过程不受影响将使用设置的Classic模块解析策略或Node模块解析策略来解析模块。假设有如下目录结构的工程C:\app |-- bar | -- b.ts |-- foo | -- a.ts -- tsconfig.json“tsconfig.json”文件的内容如下{compilerOptions:{baseUrl:./}}此例中将“–baseUrl”编译选项的值设置为“tsconfig.json”配置文件所在的目录即“C:\app”​。“a.ts”文件的内容如下import*asBfrombar/b;在解析非相对模块导入“‘bar/b’”时编译器会使用“–baseUrl”编译选项设置的基准路径“C:\app”计算出目标路径“C:\app\bar\b”​然后根据上文列出的具体步骤去解析该模块。因此最终能够成功地将模块“‘bar/b’”解析为“C:\app\bar\b.ts”​。7、pathspaths编译选项用来设置模块名和模块路径的映射用于设置非相对模块导入的规则。7.1、设置pathspaths编译选项只能在“tsconfig.json”配置文件中设置不支持在命令行上使用。由于paths是基于“–baseUrl”进行解析的所以必须同时设置“–baseUrl”和paths编译选项。假设有如下目录结构的工程C:\app |-- bar | -- b.ts |-- foo | -- a.ts -- tsconfig.json“tsconfig.json”文件的内容如下{compilerOptions:{baseUrl:./,paths:{b:[bar/b]}}}此例中的paths设置会将对模块b的非相对模块导入映射到“C:\app\bar\b”路径。“a.ts”文件的内容如下import*asBfromb;编译器在解析非相对模块导入b时发现存在匹配的paths路径映射因此会使用路径映射中的地址“C:\app\bar\b”作为模块路径去解析模块b。7.2、使用通配符在设置paths时还可以使用通配符“*”​它能够匹配任意路径。假设有如下目录结构的工程C:\app |-- bar | -- b.ts |-- foo | -- a.ts -- tsconfig.json“tsconfig.json”文件的内容如下{compilerOptions:{baseUrl:./,paths:{bar/*:[bar/*]}}}此例中的paths设置会将对模块“bar/…”的导入映射到“C:\app\bar…”路径下。两个星号通配符代表相同的路径。“a.ts”文件的内容如下import*asBfrombar/b;编译器在解析非相对模块导入“‘bar/b’”时发现存在匹配的paths路径映射因此会使用路径映射后的地址“C:\app\bar\b”作为模块路径去解析模块b。7.3、使用场景在大型工程中程序会被拆分到不同的目录中并且在每个目录下还会具体划分出子目录这就可能导致出现如下模块导入语句import{logger}from../../../../core/logger/logger;此例中先向上切换若干层目录找到core目录然后再切换到logger目录。该代码的缺点是在编写时需要花费额外的精力来确定切换目录的层数并且很容易出错。就算一些代码编辑器能够帮助用户自动添加模块导入语句该代码仍然具有较差的可读性。这种情况下使用paths设置能够很好地缓解这个问题。假设有如下目录结构的工程C:\app |-- src | |-- a | | -- b | | -- c | | -- c.ts | -- core | -- logger | -- logger.ts -- tsconfig.json如果没有配置paths编译选项那么在“c.ts”中需要使用如下方式导入“logger.ts”模块import{logger}from../../../core/logger/logger;下面我们在“tsconfig.json”文件中配置paths和“–baseUrl”编译选项。示例如下{compilerOptions:{baseUrl:./src,paths:{core/*:[core/*]}}}然后就可以像下面这样在“c.ts”模块文件中使用路径映射来导入“logger.ts”模块import{logger}fromcore/logger/logger;8、rootDirsrootDirs编译选项能够使用不同的目录创建出一个虚拟目录在使用时就好像这些目录被合并成了一个目录一样。在解析相对模块导入时编译器会在rootDirs编译选项构建出来的虚拟目录中进行搜索。rootDirs编译选项需要在“tsconfig.json”配置文件中设置它的值是由路径构成的数组。假设有如下目录结构的工程C:\app |-- bar | -- b.ts |-- foo | -- a.ts -- tsconfig.json“tsconfig.json”文件的内容如下{compilerOptions:{rootDirs:[bar,foo]}}此例中的rootDirs创建了一个虚拟目录它包含了“C:\app\bar”和“C:\app\foo”目录下的内容。“a.ts”文件的内容如下import*asBfrom./b;编译器在解析相对模块导入“‘./b’”时将会同时查找“C:\app\bar”目录和“C:\app\foo”目录。9、导入外部模块声明在Classic模块解析策略和Node模块解析策略中编译器都是在尝试查找一个与导入模块相匹配的文件。但如果最终未能找到这样的模块文件并且导入语句是非相对模块导入那么编译器将继续在外部模块声明中查找导入的模块。例如有如下目录结构的工程C:\app |-- foo | |---a.ts | -- typings.d.ts -- tsconfig.json“typings.d.ts”文件的内容如下declaremodulemod{exportfunctionadd(x:number,y:number):number;}在“a.ts”文件中可以使用非相对模块导入语句来导入外部模块“mod”​。示例如下import*asModfrommod;Mod.add(1,2);注意在“a.ts”文件中无法使用相对模块导入来导入外部模块“mod”​示例如下import*asM1from./mod;// ~~~~~~~// 错误无法找到模块./modimport*asM2from./typings;// ~~~~~~~~~~~// 错误typings.d.ts不是一个模块10、–traceResolution在启用了“–traceResolution”编译选项后编译器会打印出模块解析的具体步骤。不论是在学习TypeScript语言的过程中还是在调试代码的过程中都可以通过启用该选项来了解编译器解析模块时的具体行为。随着TypeScript版本的更新模块解析算法也许会有所变化而“–traceResolution”的输出结果能够真实反映当前使用的TypeScript版本中的模块解析算法。该编译选项可以在命令行上指定也可以在“tsconfig.json”配置文件中设置。在命令行上使用“–traceResolution”编译选项示例如下tsc--traceResolution在“tsconfig.json”配置文件中使用traceResolution属性来设置示例如下{compilerOptions:{traceResolution:true}}例如有如下目录结构的工程C:\app -- a.ts在“a.ts”文件中使用相对模块导入语句导入了模块b。示例如下import*asBfrom./b;在“C:\app”目录下执行tsc命令并使用“–traceResolution”编译选项来打印模块解析过程。示例如下tsc a.ts--moduleResolutionclassic--traceResolutiontsc命令的执行结果如下01Resolving module./bfromC:/app/a.ts.02 Explicitly specified module resolution kind:Classic.03 FileC:/app/b.tsdoes not exist. 04 FileC:/app/b.tsxdoes not exist. 05 FileC:/app/b.d.tsdoes not exist. 06 FileC:/app/b.jsdoes not exist. 07 FileC:/app/b.jsxdoes not exist. 08Module name./bwas not resolved.该输出结果的第1行显示了正在解析的模块名第2行显示了使用的模块解析策略为Classic第37行显示了模块解析的具体步骤第8行显示了模块解析的结果此例中未能成功解析模块“‘./b’”​。