在 TypeScript 中使用 Babel：教程
随着前端技术的迅猛发展，看似简单的页面开发变得越来越复杂，这也导致了项目代码量的急剧增加。为了保证开发效率和代码质量，typescript（简称 TS）成为了一个备受欢迎的选择。但是 TS 对于一些常用库的支持不太完善，而 Babel 可以提供更好的 ES6+ 语法转译功能。那么在 TS 中怎样与 Babel 集成呢？下面是一个详细的教程。
本教程使用的环境：Node.js 14+
安装所需的依赖
我们需要安装以下依赖，其中 @babel/cli @babel/core是 Babel 的核心库，用以命令行操作和编译。@babel/preset-typescript 则是用来让 Babel 将 TypeScript 编译成 ES5+ 语法。
npm install --save-dev @babel/cli @babel/core @babel/preset-typescript
修改 .babelrc 文件
创建或修改 .babelrc 文件，将以下内容复制到文件中：
{
"presets": [
"@babel/preset-typescript"
]
}这里只使用了 @babel/preset-typescript 这一个预设（preset），如果你需要用到其他的预设，可以在这个数组里添加。
使用 Babel 转译 TypeScript 文件
在 package.json 中添加一个 script：
{
"scripts": {
"build": "babel src --out-dir dist --extensions .ts"
}
}这个脚本将会把 src 目录下的所有 .ts 文件编译成 ES5+ 语法，并将结果输出到 dist 目录。当我们执行 npm run build 时，Babel 会开始编译所有 .ts 文件。
调整 TypeScript 配置
在这里，我们需要让 TypeScript 发现新的输出目录。修改 tsconfig.json 文件，添加一个 outDir 属性，设置成刚刚用来输出的目录（这里是 dist）：
-- -------------------- ---- -------
-
------------------ -
--------- -------
--------- ------
--------- -----------
------------------ -----
------------ ----
-
-这个配置文件还有其他一些常用配置，这里不再详细说明。
调整 eslint 配置
有些人可能在项目中使用了 eslint (VSCode 等代码编辑器默认情况下都会使用)，如果你想在项目中使用 eslint，请添加以下配置。
首先安装所需的 eslint-plugin-import 和 @typescript-eslint/parser （用于解析 TypeScript 语法），并在 .eslintrc 中添加以下配置：
-- -------------------- ---- -------
-
---------- -----------
--------- ----------------------------
---------------- -
------------- ---------
-------------- ----
--
-------- -
----------------------- -------
-
-这里只添加了一个 import/no-unresolved 的规则，用于检查导入的模块是否存在或者正确导入。你可以添加其他规则，或者使用自己的配置，具体可以参考 eslint 官方文档。
调整 webpack 配置
有些人可能在项目中使用了 webpack，如果你想在项目中使用 webpack，请添加以下配置。
首先安装所需的 @babel/preset-env 和 babel-loader。在 webpack.config.js 中添加以下配置：
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- ----------
---- -
-
------- ---------------
-------- -
-------- -
-
--------------------
-
-------- ----- - --------- -- ----
-------- -----
-
--
--------------------------
-
-
-
-
-
-
-
-这个配置可以编译 .ts 和 .tsx 文件。首先使用了 @babel/preset-env 将 ES6+ 语法转译成 ES5+ 语法。@babel/preset-env 可以通过传递参数配置编译目标，这里的配置是编译最近 2 个浏览器版本以及 IE11，同时关闭模块转换。在这里加入了 @babel/preset-typescript，可以让 Babel 编译 TypeScript 文件。
总结
本教程详细讲解了在 TypeScript 中使用 Babel 的方法，并给出了在不同项目模板中的配置。还可以根据实际情况来添加其他的配置和规则，从而定制出自己需要的 TypeScript + Babel 集成方案。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645731f7968c7c53b09ffc6f