utquidem
Version:
The meta-framework suite designed from scratch for frontend-focused modern web development.
50 lines (34 loc) • 1.67 kB
Markdown
---
sidebar_label: enableTsLoader
---
# output.enableTsLoader
:::info 适用的工程方案
MWA。
:::
- 类型： `boolean`
- 默认值： `false`
默认情况下，Modern.js 使用 Babel 编译 TS 文件，开启该选项后，会使用 [ts-loader](https://github.com/TypeStrong/ts-loader) 编译 TS 文件。
```javascript title="modern.config.js"
import { defineConfig } from '@modern-js/app-tools';
export default defineConfig({
output: {
enableTsLoader: true,
},
});
```
## 详细介绍
Modern.js 基于 Babel 的 [@babel/plugin-transform-typescript](https://babeljs.io/docs/en/babel-plugin-transform-typescript) 插件对 TS 文件进行编译。
该插件的行为与 `ts-loader` 有少许不同，比如：
1. 不提供 TypeScript 类型检查（Modern.js 中默认集成了 `fork-ts-checker-webpack-plugin` 插件，提供完善的类型检查，因此这个差异可以忽略）。
2. 不支持 TypeScript 特有的 `export =` 和 `import = require()` 语法。
```js
// 以下写法无法通过 Babel 编译
const foo = '1';
export = foo;
```
:::info
关于 `@babel/plugin-transform-typescript` 与 `ts-loader` 之间的详细差异，可以阅读 [Caveats](https://babeljs.io/docs/en/babel-plugin-transform-typescript#caveats)。
:::
## 使用场景
如果你的项目中遇到了 Babel 编译 TS 文件的问题，建议优先考虑修改相关语法，使之能通过编译。
在无法修改语法的前提下，可以考虑开启 `output.enableTsLoader` 选项，引入 `ts-loader` 编译。由于 `ts-loader` 需要进行额外的语法解析和类型检查，因此会**导致项目编译速度变慢**，请权衡使用。