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

a.安装转码工具

cnpm install -g babel-cli

b.安装转换规则

cnpm install -g babel-preset-latest

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

{
    "presets":["latest"]
}

如果不行就安装局部依赖

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

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

d.将ES6转成ES5，并将生成的ES5放到一个新文件中

babel ES6文件 --out-file 放ES5的新文件名称

e.将src目录下的ES6文件转成dist目录下的ES5文件

babel src --out-dir dist

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

cnpm install --save-dev babel-polyfill

3.模块化

模块化机制(commonjs与es6)

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

a.模块化规范

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

b.ES6模块化规范

导出模块：

1）列表导出

export {firstName,lastName}

2）重命名导出

export {firstName as first,lastName as last};

3）导出单个属性

export var a=3;

export functions(){}

4）默认导出

export default{} export default function foo(){}

错误写法 var a=1; export a; 没有提供对外的接口 export{a}

c.例子

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 表示模块对外输出的值。

例子

在一个js文件中导出

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

在一个js文件中导入

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

5.ES6模块与CommonJS模块的差异：

1、CommonJS 模块输出的是一个值的拷贝，ES6 模块输出的是值的引用。引用地址的值改变，输出的值也会改变 2、CommonJS 模块是运行时加载，ES6 模块是编译时输出接口.

a.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)

b.ES6模块 值的引用

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)