在前端开发中，我们经常会使用 TypeScript 来开发我们的项目，而在将 TypeScript 编写的代码转换为浏览器可执行的 JavaScript 代码时，我们需要使用编译工具，比如 Babel。而 ts-babel 就是一款将 TypeScript 转换为 Babel 可以执行的代码的 npm 包，这篇文章将会为大家介绍如何使用 ts-babel。
安装 ts-babel
首先，在使用 ts-babel 之前，我们需要先安装 ts-babel。
npm install --save-dev ts-babel
编写 tsconfig.json 配置文件
接下来，我们需要在根目录下新建一个 tsconfig.json 的文件，并对其中的内容进行配置。
-- -------------------- ---- ------- - ------------------ - --------- ------ --------- ----------- ------ ------- ------- ------------ ----- --------- ----- ------------------ ---- - -展开代码
这里我们主要介绍三个配置项：
"target": "es5"：将 TypeScript 编译为 ES5。"module": "commonjs"：使用 CommonJS 格式导出。"sourceMap": true：生成 sourceMap 文件，这是方便调试代码使用的。
还需要注意的是，如果您的项目引入了自定义类型的话，您需要在 tsconfig.json 的类型声明中增加自定义类型包的声明。比如，您的项目使用了 lodash 库，那么您就需要在 tsconfig.json 中增加以下内容：
{ "compilerOptions": { "types": ["lodash"] } }
配置 .babelrc 文件
在继续进行 ts-babel 使用之前，我们还需要对 .babelrc 进行配置。对于一个基于 TypeScript 的项目，需要配置：
{ "presets": [ ["@babel/preset-env", { "targets": { "ie": "11" } }], "@babel/preset-typescript" ] }
这里配置了两个预设：
@babel/preset-env：指定了需要转换的 JavaScript 版本为 IE11。@babel/preset-typescript：指定将 TypeScript 转换为 JavaScript。
在 webpack 中使用 ts-babel
我们可以在 webpack 中使用 ts-babel，代码配置如下：
-- -------------------- ---- ------- -------------- - - -------- - ----------- ------- ------- ------ -------- -- ------- - ------ - - ----- ---------- ---- - ------- ------------ -------- - -------------- ---- - -- -------- -------------- -- - ----- -------- ---- - ------- --------------- -- -------- -------------- - - - --展开代码
这里有两个 loader：
ts-loader：用于将 TypeScript 转换为 JavaScript。babel-loader：用于将 JavaScript 转换为 Babel 可以执行的代码。
使用 ts-babel
在使用 ts-babel 之前，我们需要先在项目中安装 Babel 和相关的插件。
npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/preset-typescript
然后，在 package.json 中添加以下命令：
{ "scripts": { "build": "tsc && babel src -d lib" }, }
其中 tsc 命令用于将 TypeScript 编译为 JavaScript，而 babel 命令用于将 JavaScript 代码转换为 Babel 可以执行的代码。 -d 参数表示输出的目录位置，这里为 lib。
示例代码
最后，我们给出一个 TypeScript 代码示例。
function add(a: number, b: number) { return a + b; } console.log(add(1, 2));
使用 ts-babel 后，代码将被转换成以下内容：
function add(a, b) { return a + b; } console.log(add(1, 2));
总结
到此为止，我们已经学会了如何使用 ts-babel 将 TypeScript 代码转换为浏览器可以执行的 JavaScript 代码。希望这篇教程能够对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/57019
