处理TypeScript
JavaScript发展到现在,已经十分成熟了,从传统的网页脚本,到后端服务,再到桌面客户端程序几乎到处都可以看见它的身影。它在带给我们惊喜的同时,由于其本身设计的缺陷也时常给我们带来困扰。全局变量window的使用泛滥,var定义任意类型的变量等等问题,在我们开发庞大复杂系统时候,常常让我们痛苦不堪。其间虽然出现了const,let等新特性来约束JavaScript变量定义的问题,但是始终不能像Java等语言那样做到严格的约束。
TypeScript的问世改变了这一现状,严格来说TypeScript并不算一门新的语言,官方的介绍TypeScript是JavaScript的一个超集,专门用于来代码层面来约束JavaScript。很可惜的是到现在没有专门的解析器用于解析TypeScript,最后使用TypeScript编写的代码还是会转换成JavaScript。
对TypeScript处理的配置如下:
module.exports = {
entry: './src/index.ts',
module: {
rules: [
{
test: /\.ts?$/,
use: 'ts-loader',
exclude: /node_modules/,
}
]
},
resolve: {
extensions: ['.tsx', '.ts', '.js']
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
使用Ts-loader来转换TypeScript的时候还需要在项目根目录下配置tsconfig.json,用于告诉Ts-loader怎么解析TypeScript:
{
"compilerOptions": {
"outDir": "./dist/",
"noImplicitAny": true,
"module": "es6",
"target": "es5",
"allowJs": true
}
}
TypeScript中的类型检测可以规范我们变量的定义,也就是因为类型检测,导致我们的构建速度慢了下来。Webpack在构建的时候会对涉及到的TypeScript文件进行类型检测和其他检测,这是一个耗时的过程。可以做出如下配置,加速Webpack的构建:
{
test: /\.ts?$/,
use: {
loader: 'ts-loader',
options: {
transpileOnly: true
}
},
exclude: /node_modules/,
}
transpileOnly表示是否跳过类型检测等操作,设置为true使得构建速度大幅度提升,当同时也会关闭类型检测。当我们给index.ts中的people对象添加没有在接口People中定义的额外属性attr:
const people: People = {
name: 'render',
job: 'bug制造者',
age: 18,
attr: ''
}
Webpack还是能够构建成功,这并不是我们想要的,当变量不符合规定类型的时候我们希望能够产生出错误提示,让我们去定位和解决问题。使用Fork-ts-checker-webpack-plugin插件可以很好解决我们的问题。配置如下:
module.exports = {
entry: './src/index.ts',
module: {
rules: [
{
test: /\.ts?$/,
use: {
loader: 'ts-loader',
options: {
transpileOnly: true
}
},
exclude: /node_modules/,
}
]
},
plugins: [
new ForkTsCheckerwebpackPlugin()
],
resolve: {
extensions: ['.tsx', '.ts', '.js']
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
使用了Fork-ts-checker-webpack-plugin插件可以使得的TypeScript类型检测生效并且加速该过程,该插件的作用就是将相关的检测操作移至单独的进程进行操作,以此来提升构建速度。
本章节提供案例源码下载:https://gitee.com/mvc_ydb/webpack/blob/master/typescript.zip