typescript 工程引用

灰太狼 2021-07-24 19:25 427阅读 0赞

支持将TypeScript程序的结构分割成更小的组成部分。即一个项目中构建多个单独工程
    
    (1)在所有工程的基础tsconfig.json配置中添加
    	{
    	  "compilerOptions": {
    	  	"composite":true,	 开启工程引用和增量编译
    	  	"declaration":true	 生成声明文件
    	  }
    	}
    	输出outDir目录由各自工程指定
    	
    (2)子工程的tsconfig.json
    	{
    	  "extends":'基础工程路径',
    	  "compilerOptions": {
    		"outDir":'指定该工程及其依赖工程的输出路径'
    	  },
    	  "references": [	子工程所依赖的工程
    	      { "path": "../utils", "prepend": true }	可以在引用中使用prepend选项来启用前置某个依赖的输出
    	      	path:'依赖工程的tsconfig.json的目录或者直接指向到配置文件本身(名字是任意的).'
    	    
    	    当你引用一个工程时，会发生下面的事：
    		    导入引用工程中的模块实际加载的是它输出的声明文件（.d.ts）。
    		    如果引用的工程生成一个outFile，那么这个输出文件的.d.ts文件里的声明对于当前工程是可见的。
    		    构建模式（后文）会根据需要自动地构建引用的工程。
    	   ]
    	}
    
    (3)构建
    	tsc --build 可简写为b
    	tsc -b 配置文件地址,如果配置文件名为tsconfig.json,那么文件名则可省略
    		tsc -b src test
    		
    	额外指令:
        --verbose：打印详细的日志（可以与其它标记一起使用）
        --dry: 显示将要执行的操作但是并不真正进行这些操作
        --clean: 删除指定工程的输出（可以与--dry一起使用）
        --force: 把所有工程当作非最新版本对待
        --watch: 观察模式（可以与--verbose一起使用）
    
    	执行如下操作:
    	    找到所有引用的工程
    	    检查它们是否为最新版本
    	    按顺序构建非最新版本的工程

代码示例:  
目录结构：  
![在这里插入图片描述][20210301220034438.png]

基础配置:  
new/tsconfig.json  
![在这里插入图片描述][20210301214902339.png]  
子工程client:  
![在这里插入图片描述][20210301215155407.png]  
公有的common:  
![在这里插入图片描述][20210301215854706.png]  
子工程server:  
![在这里插入图片描述][20210301220002667.png]  
测试用例test:  
![在这里插入图片描述][20210301220046564.png]  
执行tsc -b src/server --verbose结果:  
![在这里插入图片描述][20210301220757918.png]  
输出目录:  
![在这里插入图片描述][20210301220931829.png]  
构建测试test目录:  
![在这里插入图片描述][20210301221103753.png]

[20210301220034438.png]: /images/20210724/dbaaa7c503414f8a9682768ccdcc85d3.png
[20210301214902339.png]: /images/20210724/21cbb4e787694fea9833905f8a36bb8c.png
[20210301215155407.png]: /images/20210724/3d32fb95d65844d0a689cf3323d9d0bd.png
[20210301215854706.png]: /images/20210724/747e04d9b1ca4469a2260e58a9889c90.png
[20210301220002667.png]: /images/20210724/64d0dd26f08349359af37d5856b9346e.png
[20210301220046564.png]: /images/20210724/ee789dae171842eabd891e276433d091.png
[20210301220757918.png]: /images/20210724/f32071145086400380b5912cd456b820.png
[20210301220931829.png]: /images/20210724/df415fcc4e2c468e9f269d377b6d2af7.png
[20210301221103753.png]: /images/20210724/3fa1671773174fefab3f656a9aaa8330.png