es6学习笔记（一）

时间 2019-11-09

标签 es6 学习笔记栏目 JavaScript 繁體版

原文原文链接

一. es6简介

ECMAScript6.0是JavaScript语言的下一代标准，已经在2015年6月正式发布。又称ECMAScript 2015。根据计划，2017年6月将发布 ES2017。node

二. 支持度

各大浏览器的最新版本，对ES6的支持能够查看kangax.github.io/es5-compat-table/es6/。react

Node.js是JavaScript语言的服务器运行环境，对es6的支持度比浏览器更高。经过Node，能够体验更多ES6的特性。git

Babel转码器能够将ES6代码转化为ES5代码，从而兼容不支持ES6的环境。es6

// 转码前，使用了ES6新特性，箭头函数
input.map(item => item + 1);

// 转码后，转换为能在现有环境执行的普通函数
input.map(function (item) {
  return item + 1;
});

三. 安装Babelgithub

1. 项目根目录node initnpm

2. 新建.babelrc文件json

该文件用来设置转码规则和插件，基本格式以下。浏览器

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

　presets字段设定转码规则，官方提供如下的规则集，你须要安装。bash

# ES2015转码规则
$ npm install --save-dev babel-preset-es2015

# react转码规则
$ npm install --save-dev babel-preset-react

# ES7不一样阶段语法提案的转码规则（共有4个阶段），选装一个
$ npm install --save-dev babel-preset-stage-0
$ npm install --save-dev babel-preset-stage-1
$ npm install --save-dev babel-preset-stage-2
$ npm install --save-dev babel-preset-stage-3

　而后，将这些规则加入.babelrc。服务器

 {
    "presets": [
      "es2015",
      "react",
      "stage-2"
    ],
    "plugins": []
  }

3. Babel提供babel-cli工具，用于命令行转码。

$ npm install --global babel-cli

将babel-cli安装在项目之中。

# 安装
$ npm install --save-dev babel-cli

而后，改写package.json。

{
  // ...
  "devDependencies": {
    "babel-cli": "^6.0.0"
  },
  "scripts": {
    "build": "babel src -d lib"
  },
}

　转码的时候，就执行下面的命令。

$ npm run build

4. babel-node命令，提供一个支持ES6的REPL环境。它支持Node的REPL环境的全部功能，并且能够直接运行ES6代码。

$ babel-node
> (x => x * 2)(1)
2