学习Babel，从这里开始！

2021-12-07 10:53:59 浏览数 (1)
一、Babel 解决什么问题？
1、问题

浏览器无法运行 ECMAScript 2015 、JSX、TypeScript 等语法编写的脚本代码。

  • ECMAScript 2015 ：ECMAScript 在2015年发布新的 JavaScript 语法；
  • JSX ：用在 React 框架中脚本语言；详细说明，看这里！
  • TypeScript ： JavaScript 的扩展语法，用于数据类型、逻辑检查等；详细说明，看这里！
2、解决方案

Babel 可以把这些代码 转换成 浏览器可以运行的 JavaScript 代码。ES2015、TypeScript、JSX 等不仅可以提升开发效率，还可以解决原生JavaScript语法无法处理的一些编程问题。

二、运行原理简介

用 Babel 进行代码转换，需要涉及三个模块：【运行程序】 【配置】 【Plugins/Presets】。

  • 运行程序：主要指 @babel/core 和 @babel/cli；
  • 配置文件：转换中的一些特定选项的设定；
  • Plugins、Presets ：决定哪些代码需要被转换；
三、一个简单案例

用 ES2015 语法编写的项目，怎么用 Babel 转换成浏览器可以运行的代码？

  1. 新建项目文件夹：learn-babel；
  2. 新建文件夹 learn-babel/src 和 新建并复制下面代码到 learn-babel/src/test.js 文件；
代码语言：txt复制
[1, 2, 3].map(n => n   1);
  1. 新建文件夹 learn-babel/lib ，用于放置转换后代码；
  2. 新建配置文件 learn-babel/babel.config.json，复制下面配置信息
代码语言：txt复制
{
    "presets": [
        "@babel/preset-env"
    ]
}
  1. 安装 Babel
代码语言：txt复制
cd learn-babel
npm install --save-dev @babel/core @babel/cli @babel/preset-env
  1. 转换代码(下面两种方式都可以)
代码语言：txt复制
# 方法一
./node_modules/.bin/babel src --out-dir lib

# 方法二
npx babel src --out-dir lib
  1. 查看结果

可以在 lib 目录下看到，有个新文件 test.js 生成，其中 箭头函数的新语法 被转换为 普通函数 。

代码语言：txt复制
"use strict";

[1, 2, 3].map(function (n) {
    return n   1;
});
四、核心模块
1、@babel/core

包含 Babel 所有核心功能，还提供了API，可在代码中直接调用进行代码转换。

代码语言：txt复制
# 安装
npm install --save-dev @babel/core

# 使用
const babel = require("@babel/core");
babel.transformSync("code", optionsObject);
2、@babel/cli

一个可执行程序，可以在终端中直接调用进行代码转换；

代码语言：txt复制
# 安装
npm install --save-dev @babel/core @babel/cli

# 转换src目录下用ES2015语法代码，输出到lib目录
./node_modules/.bin/babel src --out-dir lib --presets=@babel/env

# ./node_modules/.bin/babel 可以用 npx 代替
npx src --out-dir lib --presets=@babel/env
五、Plugins

Plugins 和 Presets 告诉 Babel 应该转换哪些代码。一个Plugin实现一个代码转换功能，多个Plugin组合在一起就称之为Presets。

使用 plugin-transform-arrow-functions 插件转换 ES2015 中的箭头函数语法为浏览器可执行的代码。

代码语言：txt复制
npm install --save-dev @babel/plugin-transform-arrow-functions

./node_modules/.bin/babel src --out-dir lib --plugins=@babel/plugin-transform-arrow-functions
  • plugins - 官方文档
六、Presets

一个Plugin实现一个代码转换功能，多个Plugin组合在一起就称之为Presets。官方提供了 4个 Presets，可以直接使用。

1、preset-env

功能：用于转换 ES2015 所有语法。

代码语言：txt复制
npm install --save-dev @babel/preset-env

./node_modules/.bin/babel src --out-dir lib --presets=@babel/env
  • babel-preset-env - 官方文档
2、preset-react

功能 ：用于 React 项目。

  • 怎么 在React 项目中使用 Babel 来转换 JSX代码？
  • babel-preset-react - 官方文档
3、preset-typescript

功能 ：用于转换 TypeScript 代码。

  • babel-preset-typescript - 官方文档
4、preset-flow

功能 ：用于转换 flow 代码。

  • babel-preset-flow - 官方文档
七、配置文件
1、分类

配置文件分为两种：基于项目的配置文件、基于文件的项目配置。

  • 基于项目

Babel 7.x 版本开始，Babel运行时会默认以目录下的 babel.config.json 作为配置文件，或者其他可支持的后缀 .js, .cjs, .mjs ， 下面是.json 后缀的配置格式：

代码语言：txt复制
{
"presets": [...],
"plugins": [...]
}
  • 基于文件，有两种使用情况：
  • 文件名为 .babelrc.json ，还有其他可用后缀 ：.babelrc, .js, .cjs, .mjs 。
  • 在 package.json 文件中配置 babel，如下：
代码语言：txt复制
{
    "name": "my-package",
    "version": "1.0.0",
    "babel": {
    "presets": [ ... ],
    "plugins": [ ... ],
    }
}
  • .js 后缀的说明

JavaScript 配置文件可以导出一个对象，也可以导出一个函数，调用时将返回生成的配置。返回函数的配置被赋予了一些特殊的权力，因为它们可以访问 Babel 本身公开的 API。配置格式如下：

代码语言：txt复制
module.exports = function (api) {
api.cache(true);

const presets = [ ... ];
const plugins = [ ... ];

return {
    presets,
    plugins
};
}
2、配置选项

配置文件的选项分为两个类型：

  • 配置项目的相关属性。options - 官方文档
  • 配置 Plugin 或 Preset 的相关属性，需要找对应文档查看哪些属性可以设置。
八、参考文档
  • 学习Babel，从这里开始！
babel.js

0 人点赞