学习Babel,从这里开始!
一、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 转换成浏览器可以运行的代码?
- 新建项目文件夹:learn-babel;
- 新建文件夹
learn-babel/src
和 新建并复制下面代码到learn-babel/src/test.js
文件;
[1, 2, 3].map(n => n + 1);
- 新建文件夹
learn-babel/lib
,用于放置转换后代码; - 新建配置文件
learn-babel/babel.config.json
,复制下面配置信息
{
"presets": [
"@babel/preset-env"
]
}
- 安装 Babel
cd learn-babel
npm install --save-dev @babel/core @babel/cli @babel/preset-env
- 转换代码(下面两种方式都可以)
# 方法一
./node_modules/.bin/babel src --out-dir lib
# 方法二
npx babel src --out-dir lib
- 查看结果
可以在 lib 目录下看到,有个新文件 test.js
生成,其中 箭头函数的新语法 被转换为 普通函数 。
"use strict";
[1, 2, 3].map(function (n) {
return n + 1;
});
四、核心模块
1、@babel/core
包含 Babel 所有核心功能,还提供了API,可在代码中直接调用进行代码转换。
# 安装
npm install --save-dev @babel/core
# 使用
const babel = require("@babel/core");
babel.transformSync("code", optionsObject);
2、@babel/cli
一个可执行程序,可以在终端中直接调用进行代码转换;
# 安装
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+ 中的箭头函数语法为浏览器可执行的代码。
npm install --save-dev @babel/plugin-transform-arrow-functions
./node_modules/.bin/babel src --out-dir lib --plugins=@babel/plugin-transform-arrow-functions
六、Presets
一个Plugin实现一个代码转换功能,多个Plugin组合在一起就称之为Presets。官方提供了 4个 Presets,可以直接使用。
1、preset-env
功能:用于转换 ES2015+ 所有语法。
npm install --save-dev @babel/preset-env
./node_modules/.bin/babel src --out-dir lib --presets=@babel/env
2、preset-react
功能 :用于 React 项目。
3、preset-typescript
功能 :用于转换 TypeScript 代码。
4、preset-flow
功能 :用于转换 flow 代码。
七、配置文件
1、分类
配置文件分为两种:基于项目的配置文件、基于文件的项目配置。
- 基于项目
Babel 7.x 版本开始,Babel运行时会默认以目录下的 babel.config.json 作为配置文件,或者其他可支持的后缀 .js
, .cjs
, .mjs
, 下面是.json
后缀的配置格式:
{
"presets": [...],
"plugins": [...]
}
- 基于文件,有两种使用情况:
- 文件名为
.babelrc.json
,还有其他可用后缀 :.babelrc
,.js
,.cjs
,.mjs
。 - 在
package.json
文件中配置 babel,如下:
{
"name": "my-package",
"version": "1.0.0",
"babel": {
"presets": [ ... ],
"plugins": [ ... ],
}
}
- .js 后缀的说明
JavaScript 配置文件可以导出一个对象,也可以导出一个函数,调用时将返回生成的配置。返回函数的配置被赋予了一些特殊的权力,因为它们可以访问 Babel 本身公开的 API。配置格式如下:
module.exports = function (api) {
api.cache(true);
const presets = [ ... ];
const plugins = [ ... ];
return {
presets,
plugins
};
}
2、配置选项
配置文件的选项分为两个类型:
- 配置项目的相关属性。options - 官方文档
- 配置 Plugin 或 Preset 的相关属性,需要找对应文档查看哪些属性可以设置。
八、参考文档
相关文章
- EasyCVR对接华为iVS订阅摄像机和用户变更请求接口介绍
- 精选 | 腾讯云CDN内容加速场景有哪些?
- 模块化网络防止基于模型的多任务强化学习中的灾难性干扰
- 用搜索和注意力学习稳健的调度方法
- 用于多变量时间序列异常检测的学习图神经网络
- 助力政企自动化自然生长,华为WeAutomate RPA是怎么做到的?
- 使用腾讯轻量云搭建Fiora聊天室
- TSRC安全测试规范
- 云计算“功守道”
- 助力成本优化,腾讯全场景在离线混部系统Caelus正式开源
- Flink 利器:开源平台 StreamX 简介
- 腾讯云实践 | 一图揭秘腾讯碳中和?解决方案
- 深度学习中的轻量级网络架构总结与代码实现
- 信息系统项目管理师(高项复习笔记三)
- Adobe国际认证让科技赋能时尚
- c++该怎么学习(面试吃土记)
- 面试官问发布订阅模式是在问什么?
- 面试官:请实现一个通用函数把 callback 转成 promise
- 空中悬停、翻滚转身、成功着陆,我用强化学习「回收」了SpaceX的火箭
- 中山大学林倞解读视觉语义理解新趋势:从表达学习到知识及因果融合