Typescript

[aJean]

方案一
babel-loader + @babel/preset-env + @babel/preset-typescript + fork-ts-checker-webpack-plugin

Babel 7 编译器具有编译 TypeScript 的能力。

@babel/preset-typescript 在编译 TypeScript 文件时会为了速度会删除所有的类型，这样类型检查就没用了。

fork-ts-checker-webpack-plugin 在独立的进程中提供类型检查。

注意：这种编译方式主要依赖于 .babelrc，忽略 tsconfig.json 里关于编译的所有设置。

参考 1：https://babeljs.io/docs/en/babel-preset-typescript

参考 2：https://babeljs.io/docs/en/babel-plugin-transform-typescript

参考 3：https://github.com/TypeStrong/fork-ts-checker-webpack-plugin

例子: https://github.com/TypeStrong/fork-ts-checker-webpack-plugin/tree/main/examples/babel-loader

方案二
ts-loader + fork-ts-checker-webpack-plugin

ts-loader 依赖 typescript 里 tsc 编译器的能力，会读取 tsconfig.json 里关于编译的设置（target、module 等）。

tsc 具有与时俱进的编译能力，支持 TypeScript 各项特性。

fork-ts-checker-webpack-plugin 在独立的进程中提供类型检查。

参考 1：https://webpack.js.org/guides/typescript/

参考 2：https://webpack.js.org/guides/build-performance/

参考 3：https://github.com/TypeStrong/fork-ts-checker-webpack-plugin/tree/main/examples/ts-loader

参考 4：https://www.typescriptlang.org/docs/handbook/release-notes/overview.html

方案三
swc-loader + fork-ts-checker-webpack-plugin

swc-loader 是一个 Rust 语言开发超级快的编译器。

fork-ts-checker-webpack-plugin 在独立的进程中提供类型检查。

参考 1：https://swc.rs/

参考 2：https://github.com/TypeStrong/fork-ts-checker-webpack-plugin

方案四
esbuild-loader + fork-ts-checker-webpack-plugin

esbuild-loader 是一个 Go 语言开发超级快的编译器。

fork-ts-checker-webpack-plugin 在独立的进程中提供类型检查。

参考 1：https://esbuild.github.io/

参考 2：https://github.com/evanw/esbuild

参考 3：https://github.com/privatenumber/esbuild-loader

参考 4：https://github.com/TypeStrong/fork-ts-checker-webpack-plugin