ES6模块化及ES7新增特新性

一、babel--ES6代码转换为ES5的代码

        1.初始化项目

        npm init
        npm init -y  (不需要配置，直接跳过)

        2.安装转码工具

        cnpm install -g babel-cli

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

        3.安装转换规则

        cnpm install -g babel-preset-latest

        4.指定转换规则 新建文件.babelrc

        {
            "presets":["latest"]
        }

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

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

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

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

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

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

        babel src --out-dir dist

二、模块化

        

        模块化机制(commonjs与es6)

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

        NPM是Javascript开发者能够更方便的分享和复用以及更新代码的工具，被复用的代码被称为包或者模块，一个模块中包含了一到多个js文件。在模块中一般还会包含一个package.json的文件，该文件中包含了该模块的配置信息。该文件是个json文件，其配置信息如下： name 模块名称 version 模块版本 description 描述信息 main 指定模块入口文件 type 当type值为module的时候，支持es模块化 scripts 脚本，使用' npm run 脚本名'可以调用 dependencies 依赖关系 devDependencies 环境依赖或测试依赖

cnpm 更新

初次安装cnpm 直接使用最新域名即可

$ npm config set registry https://registry.npmmirror.com/

$ npm install -g cnpm --registry=https://registry.npmmirror.com

项目中配置映射修改规则         

npm.taobao.org => npmmirror.com

registry.npm.taobao.org => registry.npmmirror.com

# 旧

$ npm config set registry http://registry.npm.taobao.org/

#新

$ npm config set registry https://registry.npmmirror.com/

# 旧

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

#新

$ npm install -g cnpm --registry=https://registry.npmmirror.com

# 旧

$ npm install -g yarn --registry=https://registry.npm.taobao.org

#新

$ npm install -g yarn --registry=https://registry.npmmirror.com

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

a.js b.js b.js要使用a.js中的变量
1.html文档引入 a.js b.js --
2.模块化的导入与导出,模块之间就可以通信了

request.js

export function get(){

	}

Home.vue

import {get} from '/路径'

a.js将name导出
b.js里将name导入

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

导入模块 import 'xxx'
导出模块

    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 (){} 	

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导出的是一个接口，接口存放的是一个变量

三、CommonJS模块化

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

模块化对象

Node内部提供一个Module构建函数。所有模块都是Module的实例。每个模块内部，都有一个module对象，代表当前模块。它有以下属性。

module.id 模块的识别符，通常是带有绝对路径的模块文件名。

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

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

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

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

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

//nodejs模块导出  commonJS规范
let firstname = 'ren';
let lastname = 'terry';
// module.exports.firstname = firstname;
module.exports = {
  firstname: firstname,
  lastname: lastname
};

// 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);

*ES6模块与CommonJS模块的差异：
1、CommonJS 模块输出的是一个值的拷贝/复制，ES6 模块输出的是值的引用。
2、CommonJS 模块是运行时加载，ES6 模块是编译时输出接口.

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)

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)

四、let和const的区别

1.let 用于声明一个变量
    1 变量不会提升,即在变量声明之前无法使用该变量
    2.不可以重复声明
    3.具有块级作用域，只在当前作用域有效
2.const 用于声明一个常量
     1.变量声明不会被提升，即在变量声明之前无法使用该变量
    2.不允许重复声明。
    3.具有局部作用域，即const声明的变量只能在对应代码块中使用
    4.const声明的变量在声明的时候就需要赋值，并且只能赋值一次，不能修改。

五、ES7新增特新性

1.指数 3**3=27

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

(主要目的是判断NaN是否存在)