Nodejs学习笔记 | Babel转码器

原创已于 2023-03-06 16:48:51 修改 · 421 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #json

于 2023-03-06 16:47:15 首次发布

Node学习笔记专栏收录该内容

1 篇文章

订阅专栏

Babel是一个广泛使用的转码器，它将ES6代码转换为ES5，确保在不支持ES6特性的浏览器中运行。通过安装Babel，配置.babelrc文件，设置转码规则如@babel/preset-env，然后使用@babel/cli进行命令行转码，开发者可以使用ES6语法而不用担心兼容性问题。

课程来源：B站up主-首席bug专家首席bug专家的个人空间-首席bug专家个人主页-哔哩哔哩视频

Babel是一个广泛使用的ES6转码器，可以将ES6代码转为ES5代码，从而在老版本的浏览器执行。这意味着，你可以用ES6的方式编写程序，又不用担心现有环境是否支持。

浏览器支持性查看

Can I use... Support tables for HTML5, CSS3, etc

Babel官网

Babel · Babel

转码示例

原始代码用了箭头函数，Babel将其转为普通函数，就能在不支持箭头函数的JavaScript环境执行了

//转码前
input. map(item => item + 1);

//转码后
input.map(function (item) {
    return item + l;
});

Babel安装流程

第一步：安装Babel

安装在项目的根目录下

//如果配置了淘宝镜像可直接使用npm
npm install --save-dev @babe1/ core
//若下载了 cnpm也可如下
cnpm install --save-dev @babe1/ core

第二步：配置文件

Babel的配置文件是.babelrc，存放在项目的根目录下。使用Babel的第一步，就是配置这个文件。该文件用来设置转码规则和插件，基本格式如下

{
    "presets": [],
    "plugins": []
}

第三步：转码规则

presets字段设定转码规则，官方提供以下的规则集，你可以根据需要安装

npm install --save-dev @babel/preset-env

第四步：将规则加入.babelrc

{
    "presets": [
        "@babel/env"
    ],
    "plugins": []
}

Babel命令行转码

Babel提供命令行工具@babelcli，用于命令行转码

npm install --save-dev @babel/cli

#转码结果输出到标准输出
$ npx babel example.js

# 转码结果写入一个文件
# --out-file 或-o参数指定输出文件
$ npx babel example.js --out-file compiled.js
#或者
$ npx babel example.js -o compiled.js

#整个目录转码
#--out-dir或-d参数指定输出目录
$ npx babel src --out-dir lib
#或者
$ npx babel src -d lib