ES6学习历程

---

一、ES6是什么？

es6是一个泛指，含义是 5.1 版以后的 JavaScript 的下一代标准，涵盖了 ES2015、ES2016、ES2017 等，ES6 的第一个版本，在 2015 年 6 月发布了，正式名称就是《ECMAScript 2015 标准》（简称 ES2015）。es6在es5的基础上拓展了很多新特性。

二、npm包管理机制

nmp node.js的包管理机制（node package manager）
用于管理项目中的依赖环境
分为开发依赖和产品依赖
开发依赖：Babel
产品依赖：jQuery

使用方法如下（示例）：

npm init
npm install  所需要的文件名称

（示例）：
在vscode中打开终端

PS D:\实训\工作区\es6> npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help init` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (es6)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to D:\实训\工作区\es6\package.json:

{
  "name": "es6",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}


Is this OK? (yes) yes
PS D:\实训\工作区\es6> npm install jquery

added 1 package, and audited 2 packages in 8s

found 0 vulnerabilities

此方法因为服务器在海外的缘故，有时下载文件会非常缓慢
此时，我们可以使用命令
npm install -g cnpm --registry=https://registry.npm.taobao.org
来安装国内的npm镜像

PS D:\实训\工作区\es6> npm install -g cnpm --registry=https://registry.npm.taobao.org
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142

removed 382 packages, and changed 262 packages in 34s

此时安装jQuery就和使用npm一样

cnpm install jquery

此时jquery已经安装完成

而我们安装好的所有依赖文件全部安装在node_modules目录下，我们在拷贝、上传时一般会忽视这个文件夹，因为其中的文件夹太多以至于难以压缩转移。所以当我们拷贝项目时，一般会选择在复制到的新计算机上重新下载所需依赖

cnpm install   //安装package.json文件中存在的所有依赖

三、ES6转换（babel方法）

1.安装环境

cnpm install babel-cli --save-dev

接下来安装预设并添加配置文件.babelrc

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

建立一个.babelrc配置文件，并将安装的版本号存入其中
因为安装时使用的时preset-latest（安装最新版本）因此配置信息如下

此时babel已安装成功

2.使用babel

使用方法如下（示例）：

//转码结果输出到标准输出 
$ babel example.js
//转码结果写入一个文件，--out-file 或 -o 参数指定输出文件
$ babel example.js --out-file compiled.js
//整个目录转码 --out-dir 或 -d 参数指定输出目录 
$ babel src --out-dir lib

接下来测试一下babel的功能
先使用ES6的规则创建一个js文件

let arr = [1,2,3,4,5];
let fun = () => {
    console.log("Hello ES6");
};
fun();

接下来使用babel对其进行转换

PS D:\实训\工作区\es6> babel .\src\test.js 
"use strict";

var arr = [1, 2, 3, 4, 5];   
var fun = function fun() {   
    console.log("Hello ES6");
};
fun();

结果直接在终端显示

结果生成在一个新文件中

将整个文件夹转化后生成一个新的文件夹

3.babel-polyfill

Babel 默认只转换新的 JavaScript 句法（syntax），而不转换新的 API，比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象，以及一些定义在全局对象上的方法（比如Object.assign）都不会转码。举例来说，ES6 在Array对象上新增了Array.from方法。Babel 就不会转码这个方法。如果想让这个方法运行，必须使用babel-polyfill，为当前环境提供一个垫片

安装
$ npm install --save babel-polyfill
在js文件中引用并且使用
import 'babel-polyfill'; // 或者 require('babel-polyfill'); 

转换前

// 引入babel-polyfill
import "babel-polyfill";

let arr = [1,2,3,4,5];
let fun = () => {
    console.log("Hello ES6");
};
fun();

let set = new Set();
set.add('张三');
set.add('李四');
console.log(set);
let arr2 = Array.from(set);
console.log(arr2);

转换后

"use strict";

require("babel-polyfill");

var arr = [1, 2, 3, 4, 5]; // 引入babel-polyfill

var fun = function fun() {
    console.log("Hello ES6");
};
fun();

var set = new Set();
set.add('张三');
set.add('李四');
console.log(set);
var arr2 = Array.from(set);
console.log(arr2);

四、ES6模块化

ES6 模块不是对象，而是通过export命令显式指定输出的代码，再通过import命令输入。
ES6 模块自动采用严格模式，不管你有没有在模块头部加上"use strict";

es6中的模块化命令如下：
首先我们先创建两个js文件
代码如下（示例）：
export.js:

let obj = {
    name:'张三',
    age:22,
    gender:'male',
}
let name='张三';
let age=22;
let gender='male';

import.js：

let obj = {
    name:'王五',
    age:'20',
    male:'famale',
    say:function sayHello() {
        alert('Hello ES6');
    }
}

1.export命令

一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果你希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量。export命令规定的是对外的接口，必须与模块内部的变量建立一一对应关系，也就是说外部接口需要用这个接口名来引用。

使用方法如下（示例）：

export { name, age };                  //对外暴露接口
export { name as n , age as a};//重命名导出
export var a = 1;                      //导出单个属性
export funtion myFunction(a,b) { 
			retrun a + b 
	   }                               //导出一个方法

2.import命令

使用方法如下（示例）：

import * as person from './person.js'	//导入整个模块内容
import {firstName,lastName} from './person.js'	//导入多个接口
import {firstName as name} from './person.js'	//重命名
import '/modules/my-module.js';			//运行整个模块而不导入任何值
import myDefault from './my-module.js';		// 导入使用export default导出的模块

3.实际使用

export.js:

let obj = {
    name:'张三',
    age:22,
    gender:'male',
}
let name='张三';
let age=22;
let gender='male';

export {name,age,gender,obj as person};

import.js:

let obj = {
    name:'王五',
    age:'20',
    male:'famale',
    say:function sayHello() {
        alert('Hello ES6');
    }
}


import {name, age, gender , person as obj2} from "./export.js";
console.log(name ,age, gender,obj2);

这里报错是由于node不支持import需要使用babel转换

执行转换后再次调用，成功出现结果

---