ES6模块和CommonJS详解及二者的区别

一、 ES6模块（介绍、特点）

介绍

ES6 引入了模块化，其设计思想是在编译时就能确定模块的依赖关系，以及输入和输出的变量。

ES6 的模块化分为导出（export） @与导入（import）两个模块。

特点

ES6 的模块自动开启严格模式，不管你有没有在模块头部加上 use strict;。

模块中可以导入和导出各种类型的变量，如函数，对象，字符串，数字，布尔值，类等。

每个模块都有自己的上下文，每一个模块内声明的变量都是局部变量，不会污染全局作用域。

每一个模块只加载一次（是单例的）， 若再去加载同目录下同文件，直接从内存中读取。

export 与 import

基本用法

模块导入导出各种类型的变量，如字符串，数值，函数，类。

// 导出变量，变量可以是任意类型
export const name = 'es module'

// 导出方法
export function foo() {}

// 导出类
export class Person{}

//导出多个变量，这里需要特别注意的是export { name, foo, Person }中的{ }并不是对
//象，他是export导出变量的一种语法
const name = 'es module'
function foo () {}
class Person {}
export { name, foo, Person }

as关键字
如果我们希望对导出的变量名称进行修改，则可以使用as关键字来进行修饰变量 as 别名，但这个方法只适用于export {}

const name = 'es module'

export { name as alias }

default关键字
顾名思义，default代表了一个默认导出的变量，export default可以导出任意的变量或者对象

const name = 'es module'
export default name
or
export default { name } // 这里的{}，是一个对象
or 
export {name as default} // 这样也可以默认导出name

和export { } 不同，export default { } 中的 { } 是一个对象，因为export default可以导出任意的变量或者值，所以export default { } 导出的就是一个对象，并且使用default关键字后，导入的规则也有所不同。
注意：每个模板只能有一个默认导出

export default  ...

import

使用import { } 导入的变量并不是将值拷贝一份，而是指向其变量的地址，所以模块内导出的值发生变化，导入时的变量也会发生变化，且该变量不可被修改（这里的修改是指重新赋值的意思）

对于普通导出的值

let name = "lihegui",
sex = "男"
export {name，sex}

import {name,sex} from "./xxx.js"

对于default导出的值

let name = "lihegui"
export defalut name

import people_name from "./xxx/js"

关键字
我们有时候需要导入模块内所有的成员变量，但使用常规的方式一个个导入容易出错，而且不方便，这个时候可以使用关键字

import {a, b, c, d, e} from './modules.js'
// or
import * as param from './modules.js'
console.log(param)
// { ... } param是一个包含所有成员的对象

import 导入的路径可以是绝对路径、相对路径和完整的链接，但不可以省略./和后缀

二、CommonJS

通过require函数进行导入
通过exports或者module.exports导出
同步加载

CommonJS模块规范

CommonJS模块规范主要分为三部分：模块引用、模块定义、模块标识
CommonJS模块规范的好处
CommonJS模块规范很好地解决变量污染问题，每个模块具有独立空间，互不干扰，命名空间等方案与之相比相形见绌。

模块

export

每个模块中还有一个自由变量exports，它是一个对象，模块对外输出的API就绑定在这个对象上。而且exports是模块对外输出API的唯一途径。
exports是module的一个属性，在Node中，一个文件就是一个模块，将方法挂载到exports对象上作为属性即可定义导出方式。

var name = "lihegui"
var sex = "男"
var func2 = function() {
   console.log("func2");
};
 
exports.name = name;
exports.sex = sex;
exports.function2 = func2;
exports.people = {
  name,
  sex
}

require

模块引用
在require( ) 方法中，这个方法接受模块标识

var Math=require('math');
const {name,sex,people} = require("./function.js")

带路径和不带路径
　　上面例子中require的参数仅仅是模块名字的字符串，没有带有路径，引用的是a.js所在当前目录下的node_modules目录下的math模块。如果当前目录没有node_modules目录或者node_modules目录里面没有安装math模块，便会报错。
　　如果要引入的模块在其他路径，就需要使用到相对路径或者绝对路径，例如：

var add = require('./add.js')

module

在每一个模块中，module对象代表该模块自身
它是对象。这个对象有一个id属性，表示该模块的id，同时应该是只读属性。
module对象可以有一个uri属性，表示这个模块被加载的来源
module.exports的用法

let name = "lihegui"
let sex = "男"
module.exports = {
    name,
    sex
}

module.exports和exports的区别

ES6模块和CommonJS的区别

ES6模块和CommonJS的区别推荐文章

问题

1.Module.exports 导出的，为什么可以用import引入
问题解决博客