一分钟入门 Babel（下一代 JavaScript 语法的编译器）

淩亂°似流年 2021-08-31 00:08 231阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQ1NjQ1_size_16_color_FFFFFF_t_70]  
简单来说把 JavaScript 中 es2015/2016/2017/2046 的新语法转化为 es5，让低端运行环境(如浏览器和 node )能够认识并执行。严格来说，babel 也可以转化为更低的规范。但以目前情况来说，es5 规范已经足以覆盖绝大部分浏览器，因此常规来说转到 es5 是一个安全且流行的做法。

## ES6转ES5（第一种） ##

##### 初始化项目 #####

npm init --y

##### 安装依赖 #####

npm install babel-cli -D

npm install babel-preset-es2015 -D

##### 在项目中创建并编辑ES6文件 #####

这里只是使用es6的语法举下例子，看下能否转译成es5语法。我们假设取名`index.js`，放在项目根目录的src文件夹里。

// src/index.js
    let a = 1;
    
    let fun = ()=>{ 
        console.log(a);
    }

##### 编辑package.json #####

我们需要自己在`scripts`字段里添加命令：

*  `build-t` ：单独编译某个文件
 *  `build-d`：把一个文件夹内的所有文件统一编译到另一个文件夹里（文件夹自动生成，不需要自己创建）
 *  `build-o`：把一个文件夹内的指定文件编译到另外的文件夹里（文件夹需要自己创建，可以指定文件名）

{ 
      "name": "babel01",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": { 
        "build-t":"babel index.js --presets es2015",
        "build-d": "babel src -d lib --presets es2015",
        "build-o":"babel src/index.js -o dist/index.js --presets es2015"
      },
      "keywords": [],
      "author": "",
      "license": "ISC",
      "devDependencies": { 
        "babel-cli": "^6.26.0",
        "babel-preset-es2015": "^6.24.1"
      }
    }

##### 启动编译 #####

npm run <这里是scripts字段的命令>

下面是编译后的es5文件。

"use strict";
    
    var a = 1;
    
    var fun = function fun() { 
        console.log(a);
    };

## ES6转ES5（第二种） ##

其实跟第一种差不多。

##### 初始化项目 #####

npm init --y

##### 安装依赖 #####

npm install babel-cli -D

npm install babel-preset-es2015 -D

##### 在项目中创建并编辑ES6文件 #####

这里只是使用es6的语法举下例子，看下能否转译成es5语法。我们假设取名`index.js`，放在项目根目录的src文件夹里。

// src/index.js
    let a = 1;
    
    let fun = ()=>{ 
        console.log(a);
    }

##### 在项目中创建并编辑.babelrc文件 #####

在根目录下创建`.babelrc`文件。

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

##### 编辑package.json #####

我们需要自己在`scripts`字段里添加命令，命令内容与第一种方法的一样，这里只不过省了`--presets es2015`。

{ 
      "name": "babel01",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": { 
    	 "build":"babel src/index.js -o dist/index.js"
      },
      "keywords": [],
      "author": "",
      "license": "ISC",
      "devDependencies": { 
        "babel-cli": "^6.26.0",
        "babel-preset-es2015": "^6.24.1"
      }
    }

##### 启动编译 #####

npm run build

下面是编译后的es5文件。

"use strict";
    
    var a = 1;
    
    var fun = function fun() { 
        console.log(a);
    };

## ES6+转ES5 ##

这里 **ES6+** 说的是ES6、ES7、ES8等。

##### 初始化项目 #####

npm init --y

##### 安装依赖 #####

npm install babel-cli -D

npm install babel-preset-env -D

##### 在项目中创建并编辑ES6文件 #####

这里只是使用es6的语法举下例子，看下能否转译成es5语法。我们假设取名`index.js`，放在项目根目录的src文件夹里。

// src/index.js
    let a = 1;
    
    let fun = ()=>{ 
        console.log(a);
    }

##### 在项目中创建并编辑.babelrc文件 #####

在根目录下创建`.babelrc`文件。

{ 
        "presets": ["env"]
    }

##### 编辑package.json #####

命令内容不只是这一个，根据你需求写，其他命令可以看上面的**ES6转ES5（第一种）**。

{ 
      "name": "babel01",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": { 
    	 "build": "babel src -d dist"
      },
      "keywords": [],
      "author": "",
      "license": "ISC",
      "devDependencies": { 
        "babel-cli": "^6.26.0",
        "babel-preset-es2015": "^6.24.1"
      }
    }

##### 启动编译 #####

npm run build

下面是编译后的es5文件。

"use strict";
    
    var a = 1;
    
    var fun = function fun() { 
        console.log(a);
    };

## 结语 ##

本篇主要介绍了ES6转ES5的两种方法以及ES6+怎样转ES5。不过现在大部分使用ES6+怎样转ES5比较多，主要让大家体验下升级的感觉。如果觉得不错，麻烦关注下俺的公众号哦，会不定时发放前端电子书以及学习进阶视频。

--------------------

> 作者：**Vam的金豆之路**
> 
> 主要领域：**前端开发**
> 
> 我的微信：**maomin9761**
> 
> 微信公众号：**前端历劫之路**
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQ1NjQ1_size_16_color_FFFFFF_t_70 1][]

--------------------

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQ1NjQ1_size_16_color_FFFFFF_t_70]: /images/20210813/d109d93894d749d69a8d00f521b7c5a8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQ1NjQ1_size_16_color_FFFFFF_t_70 1]: /images/20210813/df4cf76f785a46cc8357c62c25cc3170.png