用 Babel 去构建 TypeScript 项目

Posted 2023-03-09

参考技术A 现在空项目中创建 package.json 文件，再去安装 Babel，@babel/core 是 babel 的核心，@babel/cli 是 Babel 的命令行，可以在终端使用 Babel 的命令行，输入 npx babel --help 查看所有的命令。接下来创建 src 目录并进入：

在 src 里面新建 index.ts 文件，文件的内容为：

为了支持上面的语法需要继续安装三个插件插件和两个预设

@babel/preset-env 预设能够支持大多数 ES6 语法，少数的语法需要使用插件， @babel/preset-typescript 翻译 TS 文件的。

这时在 package.json 文件的 scripts 里面新增以下内容：

build 是 dist 的简写版本，功能是一样的，Babel 不能自己识别 .tsx和.ts 文件，所以需要 --extensions 指定文件，简写为 -x 。

还剩最后一道程序，在 package.json 同级目录下新建 babel.config.json 文件，输入以下内容：

好了，现在输入命令行进行编译：

现在我把 index.ts 的内容改为：

输入命令：

依然编译成功，所以：

现在来配置，安装 typescript：

初始化配置文件：

打开配置文件 tsconfig.json，更改 noEmit 配置项，表示 typescript 只执行类型检查不编译输出文件：

这时在命令行执行，持续监听文件的更改就行了：

类型检查配置完成。这时 Babel 负责编译，typescript 负责类型检查。

Babel 环境中 TypeScript 中的语法又四个不能使用：

现在还是推荐使用主流方式去构建 TypeScript 项目，即 webpack 的方式，使用 ts-loader 配合 typescript 实现。附赠一个技巧：