介绍
简单来说,将 ES2015(ES6)、ES2016、ES2017、ES2018、ES2019 规范的 javascript 代码 ,转换为 ES5 规范的代码
因为目前绝大部分浏览器都支持 ES5 规范
使用方法
三种方式:
- 使用单体文件 (standalone script)
- 命令行 (cli)。多见于 package.json 中的 scripts 段落中的某条命令
- 构建工具的插件 (webpack 的 babel-loader, rollup 的 rollup-plugin-babel)。
使用
需要nodejs环境
初始化
npm init
生成一个 package.json 文件
安装babel
15 年 11 月,Babel 发布了 6.0 版本, 将所有的 转码功能 以 插件 的形式 分离出去,默认只提供 babel-core。
原本只需要装一个 babel ,现在必须按照自己的需求配置,灵活性提高的同时,也提高了使用者的学习成本。
官网推荐本地安装,而不是全局安装
npm install --save-dev babel-cli
配置调用babel脚本
修改 package.json 文件,在 scripts 增加下面配置
"build": "babel src -d lib"
表示将 src 文件夹下的 js文件 进行转换,转换后生成到 lib 文件夹下
完整代码如下:
{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "babel src -d lib" //增加此行
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-cli": "^6.26.0"
}
}
安装babel的转译器
babel命令行工具(babel-cli)跟 babel转译器 是两个不同的东西,命令行工具并不具有转译代码的功能,只是为了在命令行中使用babel。
要转码必须安装转译器,比如babel-preset-env转译器或者babel-preset-react转译器。要转译的时候,还要在 .babelrc 文件 或者 命令行中配置这些转译器(presets)选项
npm install --save-dev babel-preset-env
创建.babelrc配置文件
{
"presets":["env"]
}
编写测试代码
创建 src 文件夹
创建 index.js 文件,内容如下:
let fun=()=>{
if(true){
let a=1;
}
}
console.log(a)
执行转换命令
npm run build
在 lib 文件夹下有 同名 js 文件,打开如下:
"use strict";
var fun = function fun() {
if (true) {
var _a = 1;
}
};
console.log(a);
将箭头函数 转换成 普通函数,将 let a=1 中的局部变量 转换成 _a
感谢:
https://blog.csdn.net/zhangshab/article/details/83684824