Skip to content

Commit b943237

Browse files
piotr-olespiotr-oles
authored
feat: add zero-config support for fork-ts-checker-webpack-plugin (#1451)
* feat: add zero-config support for fork-ts-checker-webpack-plugin * docs: update links to fork-ts-checker-webpack-plugin * docs: update examples for fork-ts-checker-webpack-plugin * docs: update README.md * chore: minor bump of ts-loader version * chore: update CHANGELOG.md * docs: self review of README.md
1 parent 4e00201 commit b943237

16 files changed

+2426
-4012
lines changed

‎CHANGELOG.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
# Changelog
22

3+
## v9.3.0
4+
5+
* [simplify configuration for fork-ts-checker-webpack-plugin](https://github.com/TypeStrong/ts-loader/pull/1451) - thanks @piotr-oles
6+
37
## v9.2.9
48

59
* [make v9 latest following v8 release](https://github.com/TypeStrong/ts-loader/pull/1447) - thanks @johnnyreilly

‎README.md

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -111,15 +111,17 @@ We have a number of example setups to accommodate different workflows. Our examp
111111
We probably have more examples than we need. That said, here's a good way to get started:
112112

113113
- I want the simplest setup going. Use "[vanilla](examples/vanilla)" `ts-loader`
114-
- I want the fastest compilation that's available. Use [fork-ts-checker-webpack-plugin](https://github.com/Realytics/fork-ts-checker-webpack-plugin). It performs type checking in a separate process with `ts-loader` just handling transpilation.
114+
- I want the fastest compilation that's available. Use [fork-ts-checker-webpack-plugin](https://github.com/TypeStrong/fork-ts-checker-webpack-plugin). It performs type checking in a separate process with `ts-loader` just handling transpilation.
115115

116116
### Faster Builds
117117

118-
As your project becomes bigger, compilation time increases linearly. It's because typescript's semantic checker has to inspect all files on every rebuild. The simple solution is to disable it by using the `transpileOnly: true` option, but doing so leaves you without type checking and *will not output declaration files*.
118+
As your project becomes bigger, compilation time increases linearly. It's because typescript's semantic checker has to inspect all files on every rebuild.
119+
The simple solution is to disable it by using the `transpileOnly: true` option, but doing so leaves you without type checking and *will not output declaration files*.
119120

120-
You probably don't want to give up type checking; that's rather the point of TypeScript. So what you can do is use the [fork-ts-checker-webpack-plugin](https://github.com/Realytics/fork-ts-checker-webpack-plugin). It runs the type checker on a separate process, so your build remains fast thanks to `transpileOnly: true` but you still have the type checking. Also, the plugin has several optimizations to make incremental type checking faster (AST cache, multiple workers).
121+
You probably don't want to give up type checking; that's rather the point of TypeScript. So what you can do is use the [fork-ts-checker-webpack-plugin](https://github.com/TypeStrong/fork-ts-checker-webpack-plugin).
122+
It runs the type checker on a separate process, so your build remains fast thanks to `transpileOnly: true` but you still have the type checking.
121123

122-
If you'd like to see a simple setup take a look at [our simple example](examples/fork-ts-checker-webpack-plugin/). For a more complex setup take a look at our [more involved example](examples/react-babel-karma-gulp).
124+
If you'd like to see a simple setup take a look at [our example](examples/fork-ts-checker-webpack-plugin/).
123125

124126
### Yarn Plug’n’Play
125127

@@ -280,7 +282,9 @@ module.exports = {
280282
If you want to speed up compilation significantly you can set this flag.
281283
However, many of the benefits you get from static type checking between different dependencies in your application will be lost. `transpileOnly` will *not* speed up compilation of project references.
282284

283-
It's advisable to use `transpileOnly` alongside the [fork-ts-checker-webpack-plugin](https://github.com/Realytics/fork-ts-checker-webpack-plugin) to get full type checking again. To see what this looks like in practice then either take a look at [our simple example](examples/fork-ts-checker-webpack-plugin). For a more complex setup take a look at our [more involved example](examples/react-babel-karma-gulp).
285+
It's advisable to use `transpileOnly` alongside the [fork-ts-checker-webpack-plugin](https://github.com/TypeStrong/fork-ts-checker-webpack-plugin) to get full type checking again. To see what this looks like in practice then either take a look at [our example](examples/fork-ts-checker-webpack-plugin).
286+
287+
> Tip: When you add the [fork-ts-checker-webpack-plugin](https://github.com/TypeStrong/fork-ts-checker-webpack-plugin) to your webpack config, the `transpileOnly` will default to `true`, so you can skip that option.
284288
285289
If you enable this option, webpack 4 will give you "export not found" warnings any time you re-export a type:
286290

@@ -309,7 +313,7 @@ module.exports = {
309313

310314
If you're using [HappyPack](https://github.com/amireh/happypack) or [thread-loader](https://github.com/webpack-contrib/thread-loader) to parallelise your builds then you'll need to set this to `true`. This implicitly sets `*transpileOnly*` to `true` and **WARNING!** stops registering **_all_** errors to webpack.
311315

312-
It's advisable to use this with the [fork-ts-checker-webpack-plugin](https://github.com/Realytics/fork-ts-checker-webpack-plugin) to get full type checking again. **_IMPORTANT_**: If you are using fork-ts-checker-webpack-plugin alongside HappyPack or thread-loader then ensure you set the `syntactic` diagnostic option like so:
316+
It's advisable to use this with the [fork-ts-checker-webpack-plugin](https://github.com/TypeStrong/fork-ts-checker-webpack-plugin) to get full type checking again. **_IMPORTANT_**: If you are using fork-ts-checker-webpack-plugin alongside HappyPack or thread-loader then ensure you set the `syntactic` diagnostic option like so:
313317

314318
```javascript
315319
new ForkTsCheckerWebpackPlugin({

‎examples/fork-ts-checker-webpack-plugin/.eslintrc.js

Lines changed: 9 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,60 +1,13 @@
11
// Useful references:
2-
// https://www.npmjs.com/package/eslint-config-react-app
3-
// https://github.com/facebook/create-react-app/blob/master/packages/eslint-config-react-app/index.js
4-
// https://medium.com/@dors718/linting-your-react-typescript-project-with-eslint-and-prettier-2423170c3d42
2+
// https://typescript-eslint.io/
53

6-
const path = require('path');
74
module.exports = {
8-
parser: '@typescript-eslint/parser', // Specifies the ESLint parser
9-
plugins: [
10-
'@typescript-eslint',
11-
'react'
12-
// 'prettier' commented as we don't want to run performance hog prettier through eslint as it's slow
13-
],
14-
env: {
15-
browser: true,
16-
jest: true
17-
},
18-
extends: [
19-
'plugin:@typescript-eslint/recommended', // Uses the recommended rules from the @typescript-eslint/eslint-plugin
20-
'prettier/@typescript-eslint', // Uses eslint-config-prettier to disable ESLint rules from @typescript-eslint/eslint-plugin that would conflict with prettier
21-
// 'plugin:react/recommended', // Uses the recommended rules from @eslint-plugin-react
22-
'prettier/react', // disables react-specific linting rules that conflict with prettier
23-
// 'plugin:prettier/recommended' // Enables eslint-plugin-prettier and displays prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.
24-
],
25-
parserOptions: {
26-
project: path.resolve(__dirname, './tsconfig.json'),
27-
tsconfigRootDir: __dirname,
28-
ecmaVersion: 2018, // Allows for the parsing of modern ECMAScript features
29-
sourceType: 'module', // Allows for the use of imports
30-
ecmaFeatures: {
31-
jsx: true // Allows for the parsing of JSX
32-
}
33-
},
34-
rules: {
35-
// Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
36-
// e.g. "@typescript-eslint/explicit-function-return-type": "off",
37-
'@typescript-eslint/explicit-function-return-type': 'off',
38-
'@typescript-eslint/no-unused-vars': 'off',
39-
40-
// These rules don't add much value, are better covered by TypeScript and good definition files
41-
'react/no-direct-mutation-state': 'off',
42-
'react/no-deprecated': 'off',
43-
'react/no-string-refs': 'off',
44-
'react/require-render-return': 'off',
45-
46-
// we want to check ".tsx" files
47-
'react/jsx-filename-extension': [
48-
'warn',
49-
{
50-
extensions: ['.jsx', '.tsx']
51-
}
52-
],
53-
'react/prop-types': 'off' // Is this incompatible with TS props type?
54-
},
55-
settings: {
56-
react: {
57-
version: 'detect' // Tells eslint-plugin-react to automatically detect the version of React to use
58-
}
59-
}
5+
root: true,
6+
parser: '@typescript-eslint/parser',
7+
plugins: ['@typescript-eslint'],
8+
extends: [
9+
'eslint:recommended',
10+
'plugin:@typescript-eslint/recommended',
11+
'prettier',
12+
],
6013
};

‎examples/fork-ts-checker-webpack-plugin/.gitignore

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
/dist
2+
/node_modules

‎examples/fork-ts-checker-webpack-plugin/.prettierrc.js

Lines changed: 0 additions & 7 deletions
This file was deleted.

‎examples/fork-ts-checker-webpack-plugin/package.json

Lines changed: 24 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,36 @@
11
{
22
"name": "fork-ts-checker-webpack-plugin",
33
"version": "1.0.0",
4-
"main": "index.js",
4+
"main": "dist/main.js",
55
"license": "MIT",
66
"scripts": {
7-
"start": "webpack-dev-server --progress --color --mode development --config webpack.config.development.js",
7+
"start": "webpack serve --mode=development",
88
"prebuild": "rimraf ./dist/*",
9-
"build": "webpack --color --mode production --config webpack.config.production.js",
10-
"lint": "eslint ./",
11-
"lint-rule-timings": "cross-env TIMING=1 yarn lint"
9+
"build": "webpack --mode=production",
10+
"lint": "eslint ./src"
1211
},
1312
"devDependencies": {
14-
"@types/jest": "^24.0.0",
15-
"@types/react": "^16.8.0",
16-
"@types/react-dom": "^16.8.0",
17-
"@types/react-router": "^5.0.0",
18-
"@types/react-router-dom": "^4.0.5",
19-
"@types/react-test-renderer": "^16.8.0",
20-
"@types/react-transition-group": "^2.0.2",
21-
"@typescript-eslint/eslint-plugin": "^1.11.0",
22-
"@typescript-eslint/parser": "^1.11.0",
23-
"cross-env": "^5.2.0",
24-
"eslint": "^6.0.1",
25-
"eslint-config-prettier": "^6.0.0",
26-
"eslint-plugin-prettier": "^3.1.0",
27-
"eslint-plugin-react": "^7.14.2",
28-
"fork-ts-checker-notifier-webpack-plugin": "^1.0.0",
29-
"fork-ts-checker-webpack-plugin": "^1.4.0",
30-
"html-webpack-plugin": "next",
31-
"prettier": "1.18.2",
32-
"rimraf": "^2.6.1",
33-
"ts-loader": "^6.0.0",
34-
"tslib": "^1.7.1",
35-
"typescript": "^3.0.0",
36-
"webpack": "^4.0.0",
37-
"webpack-cli": "^3.0.0",
38-
"webpack-dev-server": "^3.0.0"
13+
"@types/react": "^18.0.8",
14+
"@types/react-dom": "^18.0.3",
15+
"@typescript-eslint/eslint-plugin": "^5.21.0",
16+
"@typescript-eslint/parser": "^5.21.0",
17+
"eslint": "^8.14.0",
18+
"eslint-config-prettier": "^8.5.0",
19+
"eslint-plugin-react": "^7.29.4",
20+
"fork-ts-checker-notifier-webpack-plugin": "^6.0.0",
21+
"fork-ts-checker-webpack-plugin": "^7.2.8",
22+
"html-webpack-plugin": "^5.5.0",
23+
"prettier": "2.6.2",
24+
"rimraf": "^3.0.2",
25+
"ts-loader": "^9.2.9",
26+
"tslib": "^2.4.0",
27+
"typescript": "^4.6.4",
28+
"webpack": "^5.72.0",
29+
"webpack-cli": "^4.9.2",
30+
"webpack-dev-server": "^4.8.1"
3931
},
4032
"dependencies": {
41-
"core-js": "^3.0.0",
42-
"react": "^16.8.0",
43-
"react-dom": "^16.8.0",
44-
"whatwg-fetch": "^3.0.0"
33+
"react": "^18.1.0",
34+
"react-dom": "^18.1.0"
4535
}
4636
}

‎examples/fork-ts-checker-webpack-plugin/src/app.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import * as React from 'react';
22
import { Layout } from './components/layout';
33

4-
export const App: React.SFC = _props => (
5-
<div className="ui container">
6-
<Layout />
7-
</div>
4+
export const App: React.FC = () => (
5+
<div className="ui container">
6+
<Layout />
7+
</div>
88
);

‎examples/fork-ts-checker-webpack-plugin/src/components/layout.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
import * as React from 'react';
22

3-
export const Layout: React.SFC = _props => <h1>Heya, heya, heya!!</h1>;
3+
export const Layout: React.FC = () => <h1>Heya, heya, heya!!</h1>;

‎examples/fork-ts-checker-webpack-plugin/tsconfig.json

Lines changed: 5 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,13 @@
11
{
22
"compilerOptions": {
3-
"allowSyntheticDefaultImports": false,
43
"target": "es5",
5-
"downlevelIteration": true,
6-
"importHelpers": true,
7-
"sourceMap": true,
4+
"lib": ["es6", "dom"],
85
"module": "esnext",
96
"moduleResolution": "node",
107
"jsx": "react",
11-
"allowJs": false,
12-
"checkJs": false,
13-
"lib": ["dom", "es2015", "es2016", "es2017", "esnext"],
14-
"forceConsistentCasingInFileNames": true,
15-
"experimentalDecorators": true,
16-
"noImplicitAny": true,
17-
"noUnusedParameters": true,
18-
"noImplicitReturns": true,
19-
"noImplicitThis": true,
20-
"noUnusedLocals": true,
21-
"skipLibCheck": true,
22-
"strictNullChecks": false,
23-
"suppressImplicitAnyIndexErrors": true,
24-
"types": ["jest"]
8+
"sourceMap": true,
9+
"strict": true,
10+
"importHelpers": true,
11+
"skipLibCheck": true
2512
}
2613
}

‎examples/fork-ts-checker-webpack-plugin/webpack.config.development.js

Lines changed: 0 additions & 53 deletions
This file was deleted.

‎examples/fork-ts-checker-webpack-plugin/webpack.config.js

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
/* eslint-disable @typescript-eslint/no-var-requires */
2+
const path = require('path');
3+
const ForkTsCheckerNotifierWebpackPlugin = require('fork-ts-checker-notifier-webpack-plugin');
4+
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
5+
const HtmlWebpackPlugin = require('html-webpack-plugin');
6+
7+
module.exports = {
8+
context: __dirname, // to automatically find tsconfig.json
9+
entry: {
10+
main: './src/index.tsx',
11+
},
12+
output: {
13+
path: path.resolve(__dirname, 'dist'),
14+
},
15+
resolve: {
16+
extensions: ['.tsx', '.ts', '.js'],
17+
},
18+
module: {
19+
rules: [
20+
{
21+
test: /.tsx?$/,
22+
loader: 'ts-loader',
23+
},
24+
],
25+
},
26+
plugins: [
27+
new ForkTsCheckerWebpackPlugin(),
28+
new ForkTsCheckerNotifierWebpackPlugin({
29+
title: 'TypeScript',
30+
excludeWarnings: false,
31+
}),
32+
new HtmlWebpackPlugin({
33+
inject: true,
34+
template: 'src/index.html',
35+
}),
36+
],
37+
};

0 commit comments

Comments
 (0)