如何使用 Babel 支持 Typescript 语法？-JavaScript中文网-JavaScript教程资源分享门户

Typescript 是一种由微软开发的编程语言，它扩充了 Javascript，增加了类型检查等功能，使代码更加规范、可读性更高、易于维护。然而，由于 Typescript 是一种新兴的语言，目前还没有完美的支持其语法的浏览器，所以在项目中使用 Typescript 还是会遇到一些问题，比如无法兼容低版本浏览器等。而 Babel 可以通过转义 Typescript 语法为 Javascript 语法来解决这些问题。本文将详细介绍如何使用 Babel 支持 Typescript 语法。

安装和配置

首先，需要安装一些必要的依赖：

npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/preset-typescript

@babel/core 是 Babel 的核心库。
@babel/cli 是命令行工具。
@babel/preset-env 是用来识别各种环境的转义规则，从而达到实现兼容性的目的。
@babel/preset-typescript 是 Babel 中支持 Typescript 的语法的预设。

安装完成后，在项目根目录下，创建一个名为 babel.config.json 的文件，加上如下配置：

{
  "presets": ["@babel/preset-env", "@babel/preset-typescript"]
}

在项目中创建一个 src 目录，再在该目录下创建一个 index.ts 文件，输入如下代码：

const hello: string = "Hello World!";
console.log(hello);

在命令行运行以下命令编译 TypeScript：

npx babel src --out-dir lib --extensions .ts

这里使用 Babel 配合 Typescript 开发时不再需要使用 tsc 命令编译 Typescript 代码，而是直接使用 Babel 将其编译为 ES5 代码。

编译后，在 lib 文件夹下会生成一个 index.js 文件，这个文件就是经过 Babel 编译后的 Javascript 代码。

与 Webpack 集成

Babel 不仅可以作为一个命令行工具使用，还可以集成到 Webpack 中使用。这里以 Webpack 4 为例，我们可以通过以下步骤来配置 Typescript+Babel：

安装依赖：
```
npm install --save-dev babel-loader webpack webpack-cli webpack-dev-server
```
- babel-loader 用于在 Webpack 中使用 Babel。
- webpack* 用于构建应用。
在根目录下创建一个 webpack.config.js 文件，加上以下代码：
```
// javascriptcn.com 代码示例
const path = require('path');

module.exports = {
  entry: './src/index.ts',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js']
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'babel-loader',
        exclude: /node_modules/,
      }
    ]
  },
  devServer: {
    port: 5000,
    open: true,
  },
};
```
- entry 告诉 Webpack 应该从哪个文件开始构建应用。
- output 告诉 Webpack 在哪里输出文件以及文件名。
- resolve 定义可以省略的文件后缀名，在引入文件时可以省略后缀。
- module 中的 rules 定义了 Webpack 在构建过程中需要执行的转换规则，这里我们使用 babel-loader 将 Typescript 转换为 Javascript。
- devServer 是一个 Webpack Dev Server 的配置，用于实时预览应用。
在根目录下创建一个 .babelrc 文件，加上以下代码：
```
{
  "presets": ["@babel/env", "@babel/typescript"]
}
```
- 这个文件跟刚才的 babel.config.json 的作用一样，只不过是在集成到 Webpack 中时使用的配置文件。
在命令行运行以下命令启动 Webpack Dev Server：
```
npx webpack-dev-server
```
在浏览器中输入 http://localhost:5000 ，即可看到应用已在运行。

总结

本文介绍了如何使用 Babel 支持 Typescript 语法。首先，我们通过命令行运行 Babel 将 Typescript 转换成 Javascript。然后，我们通过 Webpack 4 将 Babel 集成到开发过程中，实现了 Typescript+Babel 一体化的开发体验。希望此篇文章对你在前端开发中遇到相关问题时有所帮助。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/652d15627d4982a6ebe8d6d9