js模块化（CommonJS、ES6模块化规范）

---

CommonJS 规范：nodejs中遵守的就是commonjs规范。
ES6 模块化规范：（前后端通用的模块化规范；Node.js、Vue、React 中都能使用！）

一、ES6模块化规范

学习模块化规范前我们需要学习一个转码工具，将高版本代码转化为低版本代码

1）babel转码工具

1.初始化项目

npm init 
npm init -y 快速初始化项目
1
2

2.安装转码工具

cnpm install -g babel-cli 
cnpm install --save -dev babel-cli babel-preset-latest
1
2

3.安装转换规则

cnpm install -g babel-preset-latest
1

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

{
    "presets":["latest"]
}
1
2
3

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

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

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

babel src --out-dir dist
1

2）模块导入导出

模块功能主要由两个命令构成：export 和 import
• export 命令用于规定模块的对外接口 。
• import 命令用于输入其他模块提供的功能。

1.列表导出导入

导出m1.js

let name="zs";
let age=17;

export={
	name,
	age
}
1
2
3
4
5
6
7

导入m2.js

let {name,age} from './m1.js'
console.log(name,age);
1
2

运行结果：

2.单个导出导入

导出m1.js

export let name = 'zs';
export function get() {
    console.log("123")
}
1
2
3
4

导入m2.js

import { name, get } from "./m1"
console.log(name);
get()
1
2
3

运行结果：

3.重命名导出导入

导出m1.js

let name = "zs";
let age = 17;
export { name as n, age as a }
1
2
3

导入m2.js

import { a as x1, n as x2 } from './m1'
console.log(x1, x2);
import { a, n } from './m1'
console.log(a, n);
1
2
3
4

运行结果：

4.默认导出导入

注意： 一个页面只有一个export default

导出m1.js

let name = "zs";
let age = 17;

export default {
    name,
    age
}
1
2
3
4
5
6
7

导入m2.js

import person from "./m1"
console.log(person.age, person.name)
1
2

运行结果：

5.导入export和默认导出

导出m1.js

let name = "zs";
let age = 17;

export default {
    name,
    age,
    b: '默认导出'
}

export { name, age }
1
2
3
4
5
6
7
8
9
10

导入m2.js

import * as obj from "./m1"
console.log(obj)
1
2

运行结果：

5.导入之后又全部导出

导出m1.js

let sex = "0";
export { sex}
1
2

导出m2.js

export let name = "zs";
export let age = 17;
1
2

m1,m2导入m3后导出

export * from "./m1.js"
export * from "./m2.js"
1
2

导入m4

import * as obj from "./m3.js"
console.log(obj)
1
2

运行结果：

二、CommonJs模块化规范

• 使用require() 方法，可以加载需要的用户自定义模块
• 使用 module.exports 对象，将模块内的成员共享出去，供外界使用。
  注意： 使用 require() 方法导入模块时，导入的结果，永远以 module.exports 指向的对象为准

代码示例：

modules.js

// 向 module.exports 对象上挂载 username 属性
module.exports.username = 'zs'
// 向 module.exports 对象上挂载 sayHello 方法
module.exports.sayHello = function() {
  console.log('Hello!')
}
// 让 module.exports 指向一个全新的对象
module.exports = {
  nickname: '小黑',
  sayHi() {
    console.log('Hi!')
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

引入并使用模块：

const modules=require("./modules.js");
 modules.sayHi();
1
2

• exports 对象
  为了简化向外共享成员的代码，Node 提供了 exports 对象。默认情况下，exports 和 module.exports 指向同一个对象。最终共享的结果，还是以 module.exports 指向的对象为准。
  代码示例：

const username = 'zs'

module.exports.username = username
exports.age = 20
exports.sayHello = function() {
  console.log('大家好！')
}
1
2
3
4
5
6
7

• exports 和 module.exports 的使用误区
  案例一：
  
  案例二：

案例三：

Node.js 遵循了 CommonJS 模块化规范，CommonJS 规定了模块的特性和各模块之间如何相互依赖。

CommonJS 规定：
① 每个模块内部，module 变量代表当前模块。
② module 变量是一个对象，它的 exports 属性（即 module.exports）是对外的接口。 ③ 加载某个模块，其实是加载该模块的 module.exports 属性。require() 方法用于加载模块。

三、ES6模块与CommonJS模块的差异

1.commonjs在运行时候加载模块,ES6编译的时候加载模块;
2.commonjs输出的是一个值得复制/深拷贝,ES6输出的是一个值得引用;

案例：
CommonJS规范：
导出m1.js

let firstName = "ren";
let lastName = "terry";

module.exports = {
    firstName,
    lastName
};

setTimeout(() => {
    firstName = "zhao"
}, 2000);
1
2
3
4
5
6
7
8
9
10
11

导入m2.js

let { firstName, lastName } = require('./7.modules')

console.log(firstName, lastName);//

setTimeout(() => {
    console.log(firstName, lastName)
}, 4000)
1
2
3
4
5
6
7

运行结果：

由此可以得出commonjs引入的是值的拷贝

ES6模块化规范：
导出m1.js

let first = "ren";
let lastName = "xlz";


export {
    first,
    lastName
}

setTimeout(() => {
    first = "zhao"
}, 2000);
1
2
3
4
5
6
7
8
9
10
11
12

导入m2.js

import { first, lastName } from './7.modules';

console.log(first, lastName)

setTimeout(() => {
    console.log(first, lastName)
}, 4000)
1
2
3
4
5
6
7

运行结果：

由此可以看出ES6模块化规范引入的是一个值得引用