TypeScript 的尴尬:使用tsc、ts-loader、还是Babel的@babel/plugin-transform-typescript预设?

tsc

优点:可以生成.d.ts类型声明文件。
tsconfig.json:

{
    "compilerOptions": {
        "outDir": "dist",
        "declaration": true,
        "declarationDir": "dist",
    },
    "files": ["src/index.ts"],
}

缺陷:不能与webpack配合使用。当然,也不是完全不能,毕竟都有watch模式。

webpack + ts-loader

似乎可以使用tsconfig.json文件。

webpack + babel-loader + @babel/plugin-transform-typescript预设

如果使用TypeScript(JavaScript的类型化超集),则建议使用此预设。它包含以下插件:
@babel/plugin-transform-typescript
该插件增加了对TypeScript编程语言使用的语法的支持。但是,此插件未添加对传递给它的JavaScript进行类型检查的功能。为此,您将需要安装和设置TypeScript。

缺陷:

您对tsconfig.json的更改不会反映在babel中。
Changes to your tsconfig.json are not reflected in babel. The build process will always behave as though isolatedModules is turned on, there are Babel-native alternative ways to set a lot of the tsconfig.json options however.

@see https://babeljs.io/docs/en/babel-plugin-transform-typescript#caveats

我似乎走错了方向

之前我的处理方法是,ts和js都用babel处理,babel添加了@babel/plugin-transform-typescript预设。
但是我觉得可以让ts先用ts-loader处理,处理完之后可以主动声明让babel-loader处理,但如果不声明,会被babel处理吗,毕竟处理后的文件后缀为.js?

END

原文地址:https://www.cnblogs.com/develon/p/13903323.html