Babel转码器

ES6新特性

Babel转码器

ECMAScript 6 简介

ECMAScript是javascript标准

ES6就是ECMAScript的第6个版本

ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

ECMAScript 和 JavaScript 的关系

ECMAScript是JavaScript的规格，JavaScript是ECMAScript的一种实现，在日常场合，这两个词是可以互换的。

JavaScript的创造者Netscape公司，将JavaScript提交给国际标准化组织ECMA，希望这种语言能够成为国际标准，后来ECMA发布标准文件的第一版（ECMA-262），规定了浏览器脚本语言的标准，并将这种语言称为ECMAScript

该标准从一开始就是针对JavaScript语言制定的，之所以不叫JavaScript，有两个原因：一是商标，Java是Sun公司的商标，根据授权协议，只有Netscape公司可以合法地使用JavaScript这个名字，且JavaScript本身也已经被Netscape公司注册为商标；二是想体现这门语言的制定者是ECMA，不是Netscape，有利于保证这门语言的开放性和中立性。

但事实上，JavaScript比ECMA-262的含义多得多，一个完整的JavaScript实现应该由以下三个部分组成：

1. ECMAScript：核心

2. DOM：文档对象模型

3. BOM：浏览器对象模型

ES6 与 ECMAScript 2015 的关系

2011 年，ECMAScript 5.1 版发布后，就开始制定 6.0 版了。因此，ES6 这个词的原意，就是指 JavaScript 语言的下一个版本

标准委员会最终决定，标准在每年的 6 月份正式发布一次，作为当年的正式版本。接下来的时间，就在这个版本的基础上做改动，直到下一年的 6 月份，草案就自然变成了新一年的版本

语法提案的批准流程

任何人都可以向标准委员会（又称 TC39 委员会）提案，要求修改语言标准。

一种新的语法从提案到变成正式标准，需要经历五个阶段。每个阶段的变动都需要由 TC39 委员会批准。

· Stage 0 - Strawman（展示阶段）

· Stage 1 - Proposal（征求意见阶段）

· Stage 2 - Draft（草案阶段）

· Stage 3 - Candidate（候选人阶段）

· Stage 4 - Finished（定案阶段）

一个提案只要能进入 Stage 2，就差不多肯定会包括在以后的正式标准里面

Babel转码器

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

1.下面的命令在项目目录中，安装 Babel

npm install --save-dev @babel/core

2.配置配置文件.babelrc

该文件用来设置转码规则和插件，基本格式如下:

{
   

 "presets": [],

 "plugins": []

}

3.最新转码规则

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

4.将这些规则加入.babelrc。

 {
   

  "presets": [

   "@babel/env",

   "@babel/preset-react"

  ],

  "plugins": []

 }

5. 命令行转码

Babel 提供命令行工具@babel/cli，用于命令行转码。

它的安装命令如下。

$ npm install --save-dev @babel/cli

6.基本用法如下

# 转码结果输出到标准输出

$ 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

npm: node page

npx:

代码测试转码：

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

 return item + 1;});

转码后

"use strict";

input.map