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 转译的场景。

fork-ts-checker-notifier-webpack-