跳转到主文档

output.enableTsLoader

适用的工程方案

MWA。

  • 类型: boolean
  • 默认值: false

默认情况下,Modern.js 使用 Babel 编译 TS 文件,开启该选项后,会使用 ts-loader 编译 TS 文件。

modern.config.js
import { defineConfig } from '@modern-js/app-tools';

export default defineConfig({
output: {
enableTsLoader: true,
},
});

详细介绍

Modern.js 基于 Babel 的 @babel/plugin-transform-typescript 插件对 TS 文件进行编译。

该插件的行为与 ts-loader 有少许不同,比如:

  1. 不提供 TypeScript 类型检查(Modern.js 中默认集成了 fork-ts-checker-webpack-plugin 插件,提供完善的类型检查,因此这个差异可以忽略)。
  2. 不支持 TypeScript 特有的 export =import = require() 语法。
// 以下写法无法通过 Babel 编译
const foo = '1';
export = foo;
info

关于 @babel/plugin-transform-typescriptts-loader 之间的详细差异,可以阅读 Caveats

使用场景

如果你的项目中遇到了 Babel 编译 TS 文件的问题,建议优先考虑修改相关语法,使之能通过编译。

在无法修改语法的前提下,可以考虑开启 output.enableTsLoader 选项,引入 ts-loader 编译。由于 ts-loader 需要进行额外的语法解析和类型检查,因此会导致项目编译速度变慢,请权衡使用。