ts-loader/babel-loader

TypeScript

tsc 命令虽然可以编译 TS 文件，但在实际 web 项目中更可能用 webpack 来处理各种各样的文件打包（lib 项目 tsc 可能容易满足要求），。

webpack 中编译 ts 有两种方式——ts-loader 和 babel-loader + @babel/preset-typescript

ts-loader

// webpack.config.js
module.exports = {
    // ...
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: ['ts-loader'],
                exclude: /node_modules/
            }
        ]
    }
}

ts-loader 会从 tsconfig.json 中读取配置，如果配置了 compilerOptions.declaration 为 true，还会生成 .d.ts 类型文件。

另外，ts-loader 会对 ts 文件做静态代码检查，抛出类型/语法错误。

babel-loader

使用 @babel/preset-typescript 预设插件集同样可以编译 ts：

// babel.config.js
module.exports = (api) => {
    api.cache(true)
    return {
        presets: [
            '@babel/preset-react',
            '@babel/preset-typescript',
            '@babel/preset-env'
        ],
        // ...
    }
}

// webpack.config.js
module.exports = {
    module: {
        rules: [
            test: /\.tsx?/,
            use: ['babel-loader'],
            exclude: /node_modules/
        ]
    }
}

babel-loader 的好处在于能够用 preset 配置来按需引入 polyfill（ts-loader 只能全量引入），且可以通过 @babel/plugin-transform-runtime 抽离运行时来避免重复引入；由于没有做类型检查，所以打包速度会比 ts-loader 更快。

ts-loader 只能通过 compilerOptions.target 来预设环境，没有 babel 的 polyfill 精准。

缺点在于 babel-loader 没有使用 tsc，所以和类型相关的事情都不能做，例如类型检查、生成 .d.ts 文件等。

可以单独使用 tsc 命令来手动检查

另一个缺点在于 babel 不支持 const enum 语法。

最佳实践

官方建议是在编译前使用 tsc --noEmit 来做静态检查；用 babel-loader 来编译；再用 tsc --emitDeclerationOnly 来单独生成 .d.ts 文件。