一,前言
前面的工程中,为了将ts文件编译称为js文件,使用了webpack-loader:ts-loader
webpack.base.config.js:
module: {
// loader
rules: [
{
test: /\.tsx?$/,
use: [{
loader: 'ts-loader'
}],
exclude: /node_modules/
}
]
},
二,webpack-loader之ts-loader
ts-loader内部源码调用了ts编译器(即tsc),
所以,ts-loader和tsc都使用tsconfig.json中的配置
另外,ts-loader还有自己独有的配置,可通过options属性传入
transpileOnly属性:
module: {
// loader
rules: [
{
test: /\.tsx?$/,
use: [{
loader: 'ts-loader',
option: {
// 开启时:编译器仅做语言转换不做类型检查
transpileOnly: false
}
}],
exclude: /node_modules/
}
]
},
在实际项目中,随着项目越来越大,编译时间会越来越长
原因之一就是ts编译器要做语言转换和类型检查
开启后仅做语言转换不做类型检查,构建速度加快
但是,这样在编译时就不能进行类型检查了
此时,错误的类型赋值依然会触发IDE报错,但不会阻止编译
如何在transpileOnly为true时,进行类型检查?
安装fork-ts-checker-webpack-plugin插件
npm i fork-ts-checker-webpack-plugin -D
这样类型检查将会在独立的进程中进行
const forkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin')
module.exports = {
...
plugins: [
// 根据模板生成
new HtmlWebpackPlugin({
template: './src/tpl/index.html'
}),
new forkTsCheckerWebpackPlugin()
]
...
}
配置完成后,transpileOnly为true时,依然会执行类型检查
三,awesome-typescript-loader
安装 :
npm i awesome-typescript-loader -D
使用:
const { CheckerPlugin } = require('awesome-typescript-loader')
module.exports = {
...
plugins: [
// 根据模板生成
new HtmlWebpackPlugin({
template: './src/tpl/index.html'
}),
new CheckerPlugin()
]
...
}
注意:
awesome-typescript-loader 的类型检查会有遗漏,但速度较快
ts-loader加入类型检查后的构建时间较长
所以,综合看,还是使用ts-loader默认配置更好一些
awesome-typescript-loader和ts-loader比较:
1,更适合与Babel集成,使用babel的转义和缓存
2,不需要安装额外拆件,就可以把类型检查放在独立进程中进行
四,Babel
Babel和tsc都可以将ts(x), js(x)编译称为es3/5/6/及更高版本
tsc具有类型检查功能而Babel没有,但Babel具有非常丰富的插件,生态完善
注意:
在Babel7之前,不支持TS,早起使用Babel的项目使用TS不是很容易
需要使用ts-loader将ts文件转译成js文件,再交给babel进行处理
Babel7之后就支持了TS,不需要各种loader,在编译时也不需要TS
TS仅做Babel不能做的事情:类型检查
五,使用Babel编译TS
babel插件:
@babel/cli // Babel必须:
@babel/core // Babel必须:
@babel/preset-env // Babel必须:
@babel/preset-typescript // 编译TS文件
@babel/plugin-proposal-class-properties
@babel/plugin-proposal-object-rest-spread // 支持剩余,扩展操作符
babel配置文件.babelrc中引入插件
{
"presets": [
"@babel/env",
"@babel/preset-typescript"
],
"plugins": [
"@babel/proposal-class-properties",
"@babel/preset-proposal-object-rest-spread"
],
}
编译脚本:
"scripts":{
"build": "babel src --out-diir dist --extensions \".ts, .tsx\"" // babel不能自动识别ts和tsx文件,所以需要指定扩展名
}
src/index.ts:
class A {
a: number = 1
}
let { x, y, ...z } = { x:1, y: 2, a: 3, b: 4 }
let n = { x, y, ...z }
编译:
npm run build
六,使用Babel时的类型检查
安装ts:
npm i typescript -D
创建配置文件:tsconfig.json,设置noEmiit=true制作类型检查
tsc init
添加类型检查脚本,开启ts监控模式:
{
"script":{
"type-check": "tsc --watch"
}
}
在新的终端中,执行类型检测脚本,对代码实时监控
npm run type-check
七,Babel中不能编译的4种语法
1,命名空间
命名空间在Babel中编译会报错,不要使用
namespace N {
export const n = 1
}
2,类型断言的写法
class A {
a: number = 1
}
let s = {} as A
s.a = 1
类型断言使用as 不要使用<>
3,常量枚举
const enum E { A }
4,默认导出
export = s
八,结尾
本篇介绍了TS的编译工具:
1,webpack-loader:ts-loader
2,awesome-typescript-loader
3,Babel
如何选择编译工具:
1,新工程,使用TS编译器(类型检测),配合ts-loader(编译)
2,项目已使用Babel,可使用@babel/preset-typescript做语言转换,配合tsc(类型检查)
但是,不要混用这两种编译工具