Socket
Socket
Sign inDemoInstall

fork-ts-checker-webpack-plugin

Package Overview
Dependencies
128
Maintainers
1
Versions
222
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

    fork-ts-checker-webpack-plugin

Runs typescript type checker and linter on separate process.


Version published
Weekly downloads
14M
increased by3.73%
Maintainers
1
Install size
3.67 MB
Created
Weekly downloads
 

Package description

What is fork-ts-checker-webpack-plugin?

The fork-ts-checker-webpack-plugin is a plugin for webpack that runs TypeScript type checking on a separate process. This allows you to get type checking results while webpack compiles your code, improving build speed by utilizing multiple CPU cores. It also integrates with ESLint to provide linting for both TypeScript and JavaScript files.

What are fork-ts-checker-webpack-plugin's main functionalities?

TypeScript Type Checking

This feature runs TypeScript type checking in a separate process to speed up the webpack build.

const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');

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

ESLint Integration

This feature allows the plugin to run ESLint on your code in parallel with the TypeScript type checker.

const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');

module.exports = {
  plugins: [
    new ForkTsCheckerWebpackPlugin({
      eslint: {
        files: './src/**/*.{ts,tsx,js,jsx}'
      }
    })
  ],
};

Asynchronous Reporting

This feature provides asynchronous reporting of type checking and linting results, so they do not block webpack's compilation process.

const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
const webpack = require('webpack');

const compiler = webpack({
  // ...webpack configuration
  plugins: [new ForkTsCheckerWebpackPlugin()],
});

compiler.run((error, stats) => {
  // ...handle webpack build result
});

Other packages similar to fork-ts-checker-webpack-plugin

Readme

Source

SWUbanner

Fork TS Checker Webpack Plugin

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

npm version build status downloads commitizen friendly code style: prettier semantic-release

Features

Installation

This plugin requires Node.js >=14.0.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.
  • If you depend on Node.js 12, please use version 8 of the plugin.
  • If you need Vue.js support, please use version 6 of ths 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()],
  watchOptions: {
    // for some systems, watching many files can result in a lot of CPU or memory usage
    // https://webpack.js.org/configuration/watch/#watchoptionsignored
    // don't use this pattern, if you have a monorepo with linked packages
    ignored: /node_modules/,
  },
};

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).

NameTypeDefault valueDescription
asyncbooleancompiler.options.mode === 'development'If true, reports issues after webpack's compilation is done. Thanks to that it doesn't block the compilation. Used only in the watch mode.
typescriptobject{}See TypeScript options.
issueobject{}See Issues options.
formatterstring or object or functioncodeframeAvailable formatters are basic, codeframe and a custom function. To configure codeframe formatter, pass: { type: 'codeframe', options: { <coderame options> } }. To use absolute file path, pass: { type: 'codeframe', pathType: 'absolute' }.
logger{ log: function, error: function } or webpack-infrastructureconsoleConsole-like object to print issues in async mode.
devServerbooleantrueIf set to false, errors will not be reported to Webpack Dev Server.

TypeScript options

Options for the TypeScript checker (typescript option object).

NameTypeDefault valueDescription
memoryLimitnumber2048Memory limit for the checker process in MB. If the process exits with the allocation failed error, try to increase this number.
configFilestring'tsconfig.json'Path to the tsconfig.json file (path relative to the compiler.options.context or absolute path)
configOverwriteobject{ compilerOptions: { skipLibCheck: true, sourceMap: false, inlineSourceMap: false, declarationMap: false } }This configuration will overwrite configuration from the tsconfig.json file. Supported fields are: extends, compilerOptions, include, exclude, files, and references.
contextstringdirname(configuration.configFile)The base path for finding files specified in the tsconfig.json. Same as the context option from the ts-loader. Useful if you want to keep your tsconfig.json in an external package. Keep in mind that not having a tsconfig.json in your project root can cause different behaviour between fork-ts-checker-webpack-plugin and tsc. When using editors like VS Code it is advised to add a tsconfig.json file to the root of the project and extend the config file referenced in option configFile.
buildbooleanfalseThe equivalent of the --build flag for the tsc command.
mode'readonly' or 'write-dts' or 'write-tsbuildinfo' or 'write-references'build === true ? 'write-tsbuildinfo' ? 'readonly'Use readonly if you don't want to write anything on the disk, write-dts to write only .d.ts files, write-tsbuildinfo to write only .tsbuildinfo files, write-references to write both .js and .d.ts files of project references (last 2 modes requires build: true).
diagnosticOptionsobject{ syntactic: false, semantic: true, declaration: false, global: false }Settings to select which diagnostics do we want to perform.
profilebooleanfalseMeasures and prints timings related to the TypeScript performance.
typescriptPathstringrequire.resolve('typescript')If supplied this is a custom path where TypeScript can be found.

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)[];
NameTypeDefault valueDescription
includeIssueFilterundefinedIf object, defines issue properties that should be matched. If function, acts as a predicate where issue is an argument.
excludeIssueFilterundefinedSame as include but issues that match this predicate will be excluded.
Expand example

Include issues from the src directory, exclude issues from .spec.ts files:

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

Plugin hooks

This plugin provides some custom webpack hooks:

Hook keyTypeParamsDescription
startAsyncSeriesWaterfallHookchange, compilationStarts issues checking for a compilation. It's an async waterfall hook, so you can modify the list of changed and removed files or delay the start of the service.
waitingSyncHookcompilationWaiting for the issues checking.
canceledSyncHookcompilationIssues checking for the compilation has been canceled.
errorSyncHookcompilationAn error occurred during issues checking.
issuesSyncWaterfallHookissues, compilationIssues have been received and will be reported. It's a waterfall hook, so you can modify the list of received issues.

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.

Credits

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

License

MIT License

Keywords

FAQs

Last updated on 29 Oct 2023

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc