如何使用 Babel 转换 JSX 和 TypeScript
在前端开发中，JSX 和 TypeScript 成为了越来越流行的技术。然而，这两种技术并非所有 browsers 和 environments 中都得到了完美支持。幸运的是，我们可以使用 Babel 来转化这些代码并做到更加高效、便捷。
本文将介绍 Babel 是如何工作的，以及如何使用 Babel 转换 JSX 和 TypeScript 代码。我们会先介绍 Babel 和它的一些基本概念，接着讲解如何安装和使用 Babel 来转换 JSX 和 TypeScript 代码。
什么是 Babel？
Babel 是一个 JavaScript 转换器，可以将 ES6+ 代码转化为向后兼容的代码。它通过模块化的方式，让我们可以方便的根据需要来选择转化哪些特性。
我们可以将 Babel 看作一种翻译器，它将我们写的新一代 JavaScript 代码翻译成可被老一代浏览器、编辑器和环境理解和运行的代码。
Babel 基本概念
在使用 Babel 之前，我们需要了解以下基本概念。
Plugin
插件（Plugin）是用于告诉 Babel 如何转化代码的 JS 文件。每个插件都会对代码做出不同的修改，如转换箭头函数或运算符。
Babel 上有很多插件，我们可以根据需要将它们组合到 Babel 中以实现我们自己的转化器。
Preset
预设（Preset）是多个插件的集合。它允许我们为不同的项目预定义插件及其版本。
Polyfill
Polyfill 是一种 JavaScript 代码，用来兼容旧版本浏览器及环境中缺少的新特性。
Babel 安装
我们可以使用 npm 或 yarn 来安装 Babel。
npm install babel-cli --save-dev
yarn add babel-cli --dev
安装完成后，我们需要安装我们所需的预设和插件。
预设和插件安装
在安装 Babel 后，我们需要安装所需的预设和插件，以帮助 Babel 理解和转换我们所编写的代码。
预设和插件的安装方式很类似，都可以使用 npm 或 yarn 来安装。例如，要安装用于转换 React 的预设，可以运行以下命令。
npm install --save-dev @babel/preset-react
yarn add -D @babel/preset-react
以下是一个使用 Babel 转换 JSX 的示例。
const element = <h1>Hello, world!</h1>;
上面是使用了 JSX 的代码，但在目前的浏览器中，它无法直接运行。我们可以使用 Babel 转换器将其转换成可运行的 ES5 代码。
Babel 转换 JSX
要转换 JSX，首先需要安装相关的插件和预设。
npm install --save-dev babel-preset-react
在项目的根目录下创建 .babelrc 文件，内容如下：
{
"presets": ["react"]
}接下来，我们可以使用 babel-cli 命令行工具来转换 JSX 代码。假设我们有一个名为 index.js 的文件，包含以下代码：
const element = <h1>Hello, world!</h1>;
ReactDOM.render(element, document.getElementById('root'));在命令行工具中，使用以下命令转换代码：
babel index.js --out-file output.js
这将把 index.js 中的代码转换为 ES5 代码，并放在 output.js 文件中。
Babel 转换 TypeScript
要转换 TypeScript 代码，我们需要使用 @babel/preset-typescript 预设和 TypeScript 转换器。
首先，安装必要的依赖。
npm install --save-dev @babel/core @babel/cli @babel/preset-typescript @babel/plugin-transform-runtime @babel/runtime
然后，添加以下项到项目的 .babelrc 文件中：
-- -------------------- ---- -------
-
---------- - -------------------------- --
---------- -
-
----------------------------------
-
--------- ------
---------- -----
-------------- -----
--------------- -----
-
-
-
-最后，创建 TypeScript 文件并运行以下命令，将 TypeScript 文件转换为 JavaScript 文件。
npx babel --extensions .ts,.tsx src --out-dir lib
现在，我们已经成功的将 TypeScript 代码转换为可以在老版本浏览器和编辑器中执行的 JavaScript 代码了。
总结
在本文中，我们了解了 Babel 是如何工作的，并展示了如何使用 Babel 转换 JSX 和 TypeScript 代码。我们介绍了 Babel 的基本概念、预设和插件的概念，并提供了相关示例。学习 Babel 是前端工程师必须的基本技能之一，掌握它可以让我们处理更加复杂的现代 JavaScript 代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a496a848841e98941046a2