Fork TS Checker Webpack Plugin 使用教程
项目介绍
Fork TS Checker Webpack Plugin 是一个 Webpack 插件,它在一个单独的进程中运行 TypeScript 类型检查器。该插件的主要特点包括:
- 加速 TypeScript 类型检查:通过将类型检查移至单独的进程中,加快构建速度。
- 支持现代 TypeScript 特性:如项目引用和增量模式。
- 显示友好的错误信息:使用代码帧格式化器显示漂亮的错误消息。
项目快速启动
安装
首先,确保你的环境满足以下要求:
- Node.js >= 14.0.0
- Webpack ^5.11.0
- TypeScript ^3.6.0
使用 npm 安装插件:
npm install --save-dev fork-ts-checker-webpack-plugin
或者使用 yarn:
yarn add --dev fork-ts-checker-webpack-plugin
配置 Webpack
在你的 Webpack 配置文件中添加插件:
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
module.exports = {
// 其他配置项...
plugins: [
new ForkTsCheckerWebpackPlugin()
]
};
示例项目结构
假设你的项目结构如下:
my-project/
├── src/
│ └── index.ts
├── tsconfig.json
└── webpack.config.js
tsconfig.json
确保你的 tsconfig.json
文件配置正确:
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"strict": true,
"esModuleInterop": true
}
}
webpack.config.js
完整的 Webpack 配置示例:
const path = require('path');
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
module.exports = {
context: __dirname,
entry: './src/index.ts',
resolve: {
extensions: [".ts", ".tsx", ".js"]
},
module: {
rules: [
{
test: /\.tsx?$/,
loader: 'ts-loader',
options: {
transpileOnly: true
}
}
]
},
plugins: [
new ForkTsCheckerWebpackPlugin()
],
watchOptions: {
ignored: /node_modules/
}
};
应用案例和最佳实践
增量模式
为了进一步提高构建速度,可以使用增量模式。在 tsconfig.json
中设置 "incremental": true
,并在插件配置中指定 mode: 'write-references'
:
{
"compilerOptions": {
"incremental": true
}
}
new ForkTsCheckerWebpackPlugin({
mode: 'write-references'
})
自定义插件行为
你可以通过插件的钩子来定制行为,例如在等待类型检查时记录消息,或者过滤掉警告:
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
class MyWebpackPlugin {
apply(compiler) {
const hooks = ForkTsCheckerWebpackPlugin.getCompilerHooks(compiler);
hooks.waiting.tap('MyPlugin', () => {
console.log('等待类型检查');
});
hooks.issues.tap('MyPlugin', (issues) => issues.filter((issue) => issue.severity === 'error'));
}
}
module.exports = MyWebpackPlugin;
典型生态项目
ts-loader
ts-loader
是 Webpack 的 TypeScript 加载器,与 fork-ts-checker-webpack-plugin
配合使用可以实现高效的 TypeScript 构建。
babel-loader
babel-loader
是另一个 TypeScript 加载器,适用于需要 Babel 转译的场景。