webpack 解析ts、tsx语法

比眉伴天荒 2021-07-25 00:36 2222阅读 0赞

修改tsconfig.json
    	"jsx": "react"
    
    要使用jsx语法,创建的文件必须是.tsx文件
    
    1、解析ts、tsx语法(配置loader或使用Babel)
    	方式一:配置loader
    		module:{
    			rules:[
    				方式一:ts-loader
    					{
    						test:/\.tsx?$/,
    						use:[
    							{
    								loader:'ts-loader',
    								options:{
    									transpileOnly: true,	只进行语法转换,不进行类型校验,提高构建速度
    								}
    							}
    						],
    						exclude:/node_modules/
    					}
    				方式二:awesome-typescript-loader
    					对比ts-loader好出:
    						(1)更适合与babel集成,使用babel的转义和缓存
    						(2)使用自身提供的插件,就可以把类型检查放在独立进程中进行,但可能检查不出来
    					{
    						test:/\.tsx?$/,
    						use:[
    							{
    								loader:'awesome-typescript-loader',
    								options:{
    									transpileOnly: true,	只进行语法转换,不进行类型校验,提高构建速度
    								}
    							}
    						],
    						exclude:/node_modules/
    					}
    			]
    		},
    	
    	方式二:使用Babel
    		缺点:Babel无法编译:命名空间、类型断言(只兼容as的语法,不兼容<>语法)、常量枚举、默认导出(export =语法)
    		(1)下载依赖:
    			@babel/cli @babel/core @babel/preset-env @babel/preset-typescript @babel/plugin-proposal-class-properties @babel/plugin-proposal-object-rest-spread
    		(2)配置.babelrc文件:
    			{
    				"presets":[
    					"@babel/preset-env",
    					"@babel/preset-typescript"
    				],
    				"plugins":[
    					"@babel/plugin-proposal-class-properties",
    					"@babel/plugin-proposal-object-rest-spread"	支持...剩余操作符和扩展操作符等
    				]
    			}
    		(3)修改tsconfig.json
    			"noEmit": true,  不输出ts文件,只做类型检查
    			
    		(4)运行类型检查
    			tsc --watch
    			
    2、若采用loader,使用插件将类型检查放在独立进程中进行
    	(1)ts-loader:
    		cnpm install -D fork-ts-checker-webpack-plugin
    		
    		plugins:[
    			new ForkTsCheckerWebpackPlugin()	使用插件进行类型校验
    		]
    		
    	(2)awesome-typescript-loader:
    		const { CheckerPlugin}= require("awesome-typescript-loader")
    		
    		plugins:[
    			new CheckerPlugin()	使用插件进行类型校验
    		]

代码示例:  
babel依赖:  
![在这里插入图片描述][20210301224410542.png]  
.babelrc配置  
![在这里插入图片描述][20210301224424948.png]

[20210301224410542.png]: /images/20210724/c83f9581fd334baeb0531070b8af2e1e.png
[20210301224424948.png]: /images/20210724/5bcecb637038459fae7a3b603c70ecd6.png