babel介绍

介绍

简单来说,将 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


原文出处:/show_1IXV7zfQmbv.html