一.ES6认识笔记

1.介绍

ES6是一个泛指，是JavaScript 的下一代标准,涵盖了 ES2015、ES2016、ES2017 等，正式名称就是《ECMAScript 2015 标准》（简称 ES2015）。

ES6在ES5的基础上拓展了很多新特性。

2.安装babel

• 安装包管理机制npm

• npm init -y 初始化nodejs项目 ​

        此时当前目录会出现package.json，它包含当前项目的配置信息，详细信息，依赖信息

全局依赖

• 安装全局bable-cli(脚手架)

• cnpm install babel-cli --global

        简写：cnpm i babel-cli -g

局部依赖

• 安装开发依赖（只有开发阶段需要）devDependencies

        cnpm install babel-preset-latest --save-dev

        简写：cnpm i babel-preset-latest -D

        此时根目录会出现node_modules的文件夹

• 安装产品依赖（全程需要）dependencies

        cnpm install jquery --save

        简写：cnpm i jquery -S

• 卸载依赖

  npm uninstall xxx

• 在项目的根目录下新建文件.babelrc文件 作用：指定转换规则

        {

                "presets": [ "latest"]

        }

• 安装Babel-polyfill 垫片 可以将es6的功能转换为es5代码实现

  npm install --save babel-polyfill

• yarn

  安装全部依赖

      yarn install

  安装某个依赖

       产品依赖

              yarn add xxx

       开发依赖

               yarn add xxx --dev

  安装全局依赖

         yarn global add xxx

3.babel基本使用

• 转为ES5 并输出到控制台

                babel 文件名

• 转为ES5 并输出为新的文件

  babel .\1-es6.js --out-file 1-es5.js

        简写 babel .\1-es6.js -o 1-es5.js

//文件名：1-es6.js 
let a ='hello';
let add = ()=>{
  console.log(a);
}

//文件名：1-es5.js
//会自动出现'use strict';
'use strict';
var a = 'hello';
var add = function add() {
  console.log(a);
};

• 将src整个目录的js转为ES5并输出到指定文件夹dist(若当前目录下没有指定文件，会自动创建)

        babel src --out-dir dist

        简写 babel src -d dist

//文件夹src
//文件名1-es6.js 
const a = 10;
const b = 10;
console.log(a+b);
//文件名2-es6.js 
let myFun = ()=>{
  console.log('ES6箭头函数');
}

//文件夹src
//文件名1-es6.js 
var a = 10;
var b = 10;
console.log(a + b);
//文件名2-es6.js 
var myFun = function myFun() {
  console.log('ES6箭头函数');
};

• Babel 默认只转换新的 JavaScript 句法（syntax），而不转换新的 API，比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象，以及一些定义在全局对象上的方法（比如Object.assign）都不会转码。

  import 'babel-polyfill'; // 或者 require('babel-polyfill');