fork-ts-checker-webpack-plugin

Fork TS Checker Webpack Plugin

Webpack plugin that runs TypeScript type checker on a separate process.

Features

• Speeds up TypeScript type checking (by moving it to a separate process) 🏎
• Supports modern TypeScript features like project references and incremental mode ✨
• Supports Vue Single File Component ✅ 
• Displays nice error messages with the code frame formatter 🌈

Installation

This plugin requires Node.js >=12.13.0+, Webpack ^5.11.0, TypeScript ^3.6.0

• If you depend on TypeScript 2.1 - 2.6.2, please use version 4 of the plugin.
• If you depend on Webpack 4, TypeScript 2.7 - 3.5.3 or ESLint feature, please use version 6 of the plugin.

# with npm
npm install --save-dev fork-ts-checker-webpack-plugin

# with yarn
yarn add --dev fork-ts-checker-webpack-plugin

The minimal webpack config (with ts-loader)

// webpack.config.js
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');

module.exports = {
  context: __dirname, // to automatically find tsconfig.json
  entry: './src/index.ts',
  resolve: {
    extensions: [".ts", ".tsx", ".js"],
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        loader: 'ts-loader',
        // add transpileOnly option if you use ts-loader < 9.3.0 
        // options: {
        //   transpileOnly: true
        // }
      }
    ]
  },
  plugins: [new ForkTsCheckerWebpackPlugin()]
};

Examples how to configure it with babel-loader, ts-loader and Visual Studio Code are in the examples directory.

Modules resolution

It's very important to be aware that this plugin uses TypeScript's, not webpack's modules resolution. It means that you have to setup tsconfig.json correctly.

It's because of the performance - with TypeScript's module resolution we don't have to wait for webpack to compile files.

To debug TypeScript's modules resolution, you can use tsc --traceResolution command.

Options

This plugin uses cosmiconfig. This means that besides the plugin constructor, you can place your configuration in the:

• "fork-ts-checker" field in the package.json
• .fork-ts-checkerrc file in JSON or YAML format
• fork-ts-checker.config.js file exporting a JS object

Options passed to the plugin constructor will overwrite options from the cosmiconfig (using deepmerge).

TypeScript options

Options for the TypeScript checker (typescript option object).

TypeScript extensions options

Options for the TypeScript checker extensions (typescript.extensions option object).

Issues options

Options for the issues filtering (issue option object). I could write some plain text explanation of these options but I think code will explain it better:

interface Issue {
  severity: 'error' | 'warning';
  code: string;
  file?: string;
}

type IssueMatch = Partial<Issue>; // file field supports glob matching
type IssuePredicate = (issue: Issue) => boolean;
type IssueFilter = IssueMatch | IssuePredicate | (IssueMatch | IssuePredicate)[];

module.exports = {
  // ...the webpack configuration
  plugins: [
    new ForkTsCheckerWebpackPlugin({
      issue: {
        include: [
          { file: '**/src/**/*' }
        ],
        exclude: [
          { file: '**/*.spec.ts' }
        ]
      }
    })
  ]
};

Vue.js

⚠️ There are additional constraints regarding Vue.js Single File Component support: ⚠️

• It requires TypeScript >= 3.8.0 (it's a limitation of the transpileOnly mode from ts-loader)
• It doesn't work with the build mode (project references)

To enable Vue.js support, follow these steps:

# with npm
npm install --save vue vue-class-component
npm install --save-dev vue-loader ts-loader css-loader vue-template-compiler

# with yarn
yarn add vue vue-class-component
yarn add --dev vue-loader ts-loader css-loader vue-template-compiler

{
  "compilerOptions": {
    "experimentalDecorators": true,
    "jsx": "preserve",
    "target": "ES5",
    "lib": ["ES6", "DOM"],
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "~/*": ["src/*"]
    },
    "sourceMap": true,
    "importsNotUsedAsValues": "preserve"
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.vue"
  ],
  "exclude": [
    "node_modules"
  ]
}

const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');

module.exports = {
  entry: './src/index.ts',
  output: {
    filename: 'index.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.ts$/,
        loader: 'ts-loader',
        exclude: /node_modules/,
        options: {
          appendTsSuffixTo: [/\.vue$/],
          // add transpileOnly option if you use ts-loader < 9.3.0 
          // transpileOnly: true
        }
      },
      {
        test: /\.css$/,
        loader: 'css-loader'
      },
    ],
  },
  resolve: {
    extensions: ['.ts', '.js', '.vue', '.json'],
    alias: {
      '@': path.resolve(__dirname, './src'),
      '~': path.resolve(__dirname, './src'),
    }
  },
  plugins: [
    new VueLoaderPlugin(),
    new ForkTsCheckerWebpackPlugin({
      typescript: {
        extensions: {
          vue: true
        }
      }
    })
  ]
};

declare module "*.vue" {
  import Vue from "vue";
  export default Vue;
}

Plugin hooks

This plugin provides some custom webpack hooks:

To access plugin hooks and tap into the event, we need to use the getCompilerHooks static method. When we call this method with a webpack compiler instance, it returns the object with tapable hooks where you can pass in your callbacks.

// ./src/webpack/MyWebpackPlugin.js
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');

class MyWebpackPlugin {
  apply(compiler) {
    const hooks = ForkTsCheckerWebpackPlugin.getCompilerHooks(compiler);

    // log some message on waiting
    hooks.waiting.tap('MyPlugin', () => {
      console.log('waiting for issues');
    });
    // don't show warnings
    hooks.issues.tap('MyPlugin', (issues) =>
      issues.filter((issue) => issue.severity === 'error')
    );
  }
}

module.exports = MyWebpackPlugin;

// webpack.config.js
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
const MyWebpackPlugin = require('./src/webpack/MyWebpackPlugin');

module.exports = {
  /* ... */
  plugins: [
    new ForkTsCheckerWebpackPlugin(),
    new MyWebpackPlugin()
  ]
};

Profiling types resolution

When using TypeScript 4.3.0 or newer you can profile long type checks by setting "generateTrace" compiler option. This is an instruction from microsoft/TypeScript#40063:

1. Set "generateTrace": "{folderName}" in your tsconfig.json (under compilerOptions)
2. Look in the resulting folder. If you used build mode, there will be a legend.json telling you what went where. Otherwise, there will be trace.json file and types.json files.
3. Navigate to edge://tracing or chrome://tracing and load trace.json
4. Expand Process 1 with the little triangle in the left sidebar
5. Click on different blocks to see their payloads in the bottom pane
6. Open types.json in an editor
7. When you see a type ID in the tracing output, go-to-line {id} to find data about that type

Enabling incremental mode

You must both set "incremental": true in your tsconfig.json (under compilerOptions) and also specify mode: 'write-references' in ForkTsCheckerWebpackPlugin settings.

Related projects

• ts-loader - TypeScript loader for webpack.
• babel-loader - Alternative TypeScript loader for webpack.
• fork-ts-checker-notifier-webpack-plugin - Notifies about build status using system notifications (similar to the webpack-notifier).

Credits

This plugin was created in Realytics in 2017. Thank you for supporting Open Source.

License

MIT License