ES6 模块化

传统开发模式的主要问题：

命名冲突

文件依赖

通过模块化，可以解决上述问题：

模块化，就是把单独的一个功能封装到一个模块（文件）中，模块之间相互隔离，

但是，可以通过特定的接口公开内部成员，也可以依赖别的模块

模块化开发的好处：方便代码的重用，从而提升开发效率，并且方便后期的维护。

模块化相关规范

[1] 浏览器端模块化规范

~~AMD~~ - Require.js（ http://www.requirejs.cn ）

~~CMD~~ - Sea（ https://seajs.github.io/seajs/docs ）

[2] 服务器端模块化规范

CommonJS

1. 模块分为单文件模块与包 2. 模块成员导出：module.exports 和 exports 3. 模块成员导入：require('模块标识符');

1
2
3

1. 模块分为单文件模块与包
2. 模块成员导出：module.exports 和 exports
3. 模块成员导入：require('模块标识符');

[3] 推荐：大一统的 ES6 模块化规范

在 ES6 模块化规范诞生之前，JavaScript 社区已经尝试并提出了 AMD、CMD、CommonJS 等模块化规范，但是，这些社区提出的模块化标准，还是存在一定的差异性和局限性，并不是浏览器与服务器通用的模块化标准

AMD 和 CMD，适应于浏览器端的 JavaScript 模块化

CommonJS 适应于服务端的 JavaScript 模块化

=> ES6 语法规范中，在语言层面上定义了 ES6 模块化规范，是浏览器与服务器端通用的模块化规范。

每个 js 文件，都是一个独立的模块

导入模块成员，使用 import 关键字

暴露模块成员，使用 export 关键字

「 Node.js 中通过 babel 体验 ES6 模块化」

前提：初始化一个 Node.js 项目

npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node

npm install --save @babel/polyfill

在项目根目录，创建文件 babel.config.js，文件内容如下：

const presets = [ ["@babel/env",{ targets:{ edge:"17", firefox:"60", chrome:"67", safari:"11.1" } }] ] module.exports = { presets };

1
2
3
4
5
6
7
8
9
10
11

const presets = [
["@babel/env",{
targets:{
edge:"17",
firefox:"60",
chrome:"67",
safari:"11.1"
}
}]
]
module.exports = { presets };

通过 npx babel-node index.js 执行代码

// index.js console.log('ok');

1
2

// index.js
console.log('ok');

ES6 模块化的基本语法

[1] 默认导出与默认导入 // 每个模块中，只允许使用唯一的一次 export default，否则会报错

默认导出语法：export default 默认导出的成员

// m1.js // 定义私有成员 a 和 c let a = 10; let c = 20; // 外界访问不到变量 d，因为它没有被暴露出去 let d = 30; function show(){} // 将本模块中的私有成员暴露出去，供其他模块使用 export default{ a, c, show }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

// m1.js

// 定义私有成员 a 和 c
let a = 10;
let c = 20;

// 外界访问不到变量 d，因为它没有被暴露出去
let d = 30;
function show(){}

// 将本模块中的私有成员暴露出去，供其他模块使用
export default{
a,
c,
show
}

默认导入语法：import 接收名称（任意） from '模块标识符'

// 简便模式，只支持默认导出 import m1 from './m1.js' console.log(m1); // { a:10,c:20,show:[Function:show] }

1
2
3

// 简便模式，只支持默认导出
import m1 from './m1.js'
console.log(m1); // { a:10,c:20,show:[Function:show] }

[2] 按需导出与按需导入

按需导出语法：export let s1 = 10; // 每个模块中，可以使用多次按需导出

// m1.js // 向外按需导出变量 s1 export let s1 = 'aaa' // 向外按需导出变量 s2 export let s2 = 'ccc' // 向外按需到处方法 say export function say = function(){}

1
2
3
4
5
6
7
8
9
10

// m1.js

// 向外按需导出变量 s1
export let s1 = 'aaa'

// 向外按需导出变量 s2
export let s2 = 'ccc'

// 向外按需到处方法 say
export function say = function(){}

按需导入语法：import { s1 } from '模块标识符' // 名称需与按需导出的名称一致

// 按需导入模块成员 import { s1,s2 as ss2,say } from './m1.js' // 可以使用 as 关键字，起别名 // import m1,{ s1,s2 as ss2,say } from './m1.js' // 默认导出与按需导出可以混合使用 consle.log(m1); console.log(s1); // aaa consle.log(ss2); // ccc consle.log(say); // [Function:say]

1
2
3
4
5
6
7
8

// 按需导入模块成员
import { s1,s2 as ss2,say } from './m1.js'         // 可以使用 as 关键字，起别名
// import m1,{ s1,s2 as ss2,say } from './m1.js'  // 默认导出与按需导出可以混合使用

consle.log(m1);
console.log(s1);  // aaa
consle.log(ss2);  // ccc
consle.log(say);  // [Function:say]

[3] 直接导入并执行模块代码

有时，我们只想单独执行某个模块中的代码，并不需要得到模块中向外暴露的成员，此时，可直接导入并执行模块代码

// m2.js // 当前模块中，一个简单的for循环 for(let i=0;i<3;i++){ console.log(i); }

1
2
3
4
5
6

// m2.js

// 当前模块中，一个简单的for循环
for(let i=0;i<3;i++){
console.log(i);
}

// index.js import './m2.js'

1
2

// index.js
import './m2.js'