ES6的介绍以及模块导出与导入

# ES6

> 1.介绍

>

> ECMAScript(简称ES)的几个重要版本

>

> ES5 : 2009年发布

>

> ES6 2015年发布 ES2015  在ES5基础上拓展了很多新特性

>

> ES7 2016年发布 ES2016 (变化不大)

>

> ​     1.指数 3**3=27

>

> ​         2.数组的原型方法includes()用来判断一个数组是否包含一个指定的值，

>

> ​         var arr=[1,2,3,4,] console.log(arr.includes(2))

>

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

> 2.babel

```javascript

1.安装转码工具

cnpm install -g babel-cli

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

2.安装转换规则

cnpm install -g babel-preset-latest

3.指定转换规则 新建.babelrc

{

    "presets":["latest"]

}

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

babel工具在项目中是在开发阶段使用的工具

jquery工具在项目中是在产品阶段使用的工具

4.也可以将ES6转换为ES5之后的文件输入到另一个文件当中

babel 2-hello.js --out-file 2-helloo.js

5.将整个src目录下的es6文件转换成es5文件到dist目录

babel src --out-dir dist

6.babel-polyfill垫片 可以将es6的功能转换为es5代码实现

cnpm install --save-dev babel-polyfill

```

> 3.模块化

>

> 模块化机制(commonjs与es6)

>

>  包管理机制 (npm、cnpm、yarn)

```javascript

ES6模块化代码  import 

NodeJS内有自己的模块化机制,实现CommonJS模块化规范 require('babel-polyfill')

```

```javascript

a.js b.js b.js要使用a.js中的变量

1.html文档引入 a.js b.js --

2.模块化的导入与导出,模块之间就可以通信了

a.js将name导出

b.js里将name导入

```

```javascript

CommonJs模块化规范(服务器端)

AMD模块化规范(客户端的--浏览器)

ES6模块化规范

    导入模块 import 'babel-polyfill'

导出模块

    export {firstName,lastName}；//列表导出

    export {firstName as first,lastName as last};//重命名导出

    export var a=3;导出单个属性;

    export functions(){}//导出单个属性

    默认导出 

    一个模块只能有一个默认导出，不能使用 var、let 或 const 用于导出默认值 export default。

        export default{}

        export default function foo(){}     

错误写法

    var a=1;

    export a; 没有提供对外的接口 export{a}

```

```javascript

1-module1.js

let fristName = 'ren'

let lastName = 'terry';

export { fristName, lastName }

console.log('这是module1模块')

2-module2.js

import './1-module1'

import { fristName, lastName } from './1-module1'

// es6 静态加载  编译时加载

console.log('module2打印', fristName, lastName)

先转码  再运行

babel src --out-dir dist

node dist/module/2-module2.js

ES6导出的是一个接口，接口存放的是一个变量

```

> 4.CommonJS模块化

>

> CommonJS 模块就是对象，输入时必须查找对象属性。

>

> 模块化对象

>

> Node内部提供一个Module构建函数。所有模块都是Module的实例。每个模块内部，都有一个module对象，代表当前模块。它有以下属性。module.id 模块的识别符，通常是带有绝对路径的模块文件名。 

> module.filename 模块的文件名，带有绝对路径。 

> module.loaded 返回一个布尔值，表示模块是否已经完成加载。 

> module.parent 返回一个对象，表示调用该模块的模块。 

> module.children 返回一个数组，表示该模块要用到的其他模块。

> module.exports 表示模块对外输出的值。

```javascript

//nodejs模块导出  commonJS规范

let firstname = 'ren';

let lastname = 'terry';

// module.exports.firstname = firstname;

module.exports = {

  firstname: firstname,

  lastname: lastname

};

console.log(exports === module.exports);

```

```javascript

// Nodejs模块导入

let { firstname, lastname } = require('./module3');

console.log(firstname, lastname);

console.log(module.id);

console.log(module.filename);

console.log(module.loaded);

console.log(module.parent);

console.log(module.children);

```

```javascript

ES6模块与CommonJS模块的差异：

1、CommonJS 模块输出的是一个值的拷贝/复制，ES6 模块输出的是值的引用。

2、CommonJS 模块是运行时加载，ES6 模块是编译时输出接口.

```

```javascript

1.CommonJS模块化规范 值的拷贝

    1.1导出模块

    let firstname='ren';

    let lastname='terry';

    setTimeout(()=>{

        firstname:'zhao'

    },2000)

    module.exports={

        firstname,

        lastname

    };

    1.2导入模块

    let {firstname,lastname}=require('./module1.js');

    console.log(firstname,lastname);

    setTimeout(()=>{

       console.log(firstname,lastname);//ren terry

    },4000)

```

```javascript

2.ES6模块 值得引用

    2.1导出模块

    let firstname='ren';

    let lastname='terry';

    setTimeout(()=>{

        firstname='zhao'

    },2000)

    export {

        firstname,

        lastname

    };

    2.2导入模块

    import {firstname,lastname} from './module3.js';

    console.log(firstname,lastname);

    setTimeout(()=>{

       console.log(firstname,lastname);//zhao terry

    },4000)

```