了解模块化的相关规范

1、模块化概述

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

① 命名冲突
② 文件依赖

通过模块化解决上述问题

• 模块化就是把单独的一个功能封装到一个模块（文件）中，模块之间相互隔离，但是可以通过特定的接口公开内部成员，也可以依赖别的模块。
• 模块化开发的好处：方便代码的重用，从而提升开发效率，并且方便后期的维护。

2、模块化相关规范

（1）浏览器端模块化规范

（1）AMD(Asynchronous Module Definition，异步模块定义)
代表产品为：Require.js

（2）CMD(Common Module Definition，通用模块定义)
代表产品为：Sea.js

（2） 服务器端模块化规范

服务器端的模块化规范是使用 CommonJS 规范：

（1）模块分为 单文件模块 与 包 。
（2）使用require引入其他模块或者包。
（3）使用 exports 或者 module.exports 导出模块成员。
（4）一个文件就是一个模块，都拥有独立的作用域。

（3） 大一统的模块化规范 – ES6模块化

在 ES6 模块化规范诞生之前，Javascript 社区已经尝试并提出了 AMD、CMD、CommonJS 等模块化规范。

但是，这些社区提出的模块化标准，还是存在一定的差异性与局限性、并不是浏览器与服务器通用的模块化标准，例如：

• AMD 和 CMD 适用于浏览器端的 Javascript 模块化
• CommonJS 适用于服务器端的 Javascript 模块化

因此，ES6 语法规范中，在语言层面上定义了 ES6 模块化规范，是浏览器端与服务器端通用的模块化开发规范。
ES6模块化规范中定义：
（1） 每个 js 文件都是一个独立的模块
（2） 导入模块成员使用 import 关键字
（3） 暴露模块成员使用 export 关键字

3、ES6模块化

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

安装 babel 的步骤如下：

① 打开终端，输入命令：npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node

② 安装完毕之后，再次输入命令安装：npm install --save @babel/polyfill

③ 在项目目录中创建babel.config.js文件， 编辑js文件中的代码如下：

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

module.exports = { presets };

④ 在项目目录中创建index.js文件作为入口文件，在index.js中输入需要执行的js代码，例如：console.log("ok");
⑤ 使用npx执行文件，打开终端，输入命令：npx babel-node ./index.js

3.2 ES6 模块化的基本语法

3.2.1 默认导出与默认导入

• 默认导出语法： export default 默认导出的成员
• 默认导入语法： import 接收名称 from ‘模块标识符’

// 当前文件模块为 m1.js

// 定义私有成员 a 和 c
let a = 10
let c = 20
// 外界访问不到变量 d ,因为它没有被暴露出去
let d = 30

function show() {}

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

// 导入模块成员
import m1 from './m1.js'

console.log(m1)
// 打印输出的结果为：
// { a: 10, c: 20, show: [Function: show] }

注意： 每个模块中，只允许使用唯一的一次 export default，否则会报错！

如果在一个模块中没有向外暴露成员，其他模块引入该模块时将会得到一个空对象 。

3.2.2 按需导出与按需导入

• 按需导出语法： export let s1 = 10
• 按需导入语法： import { s1 } from ‘模块标识符’

// 当前文件模块为 m1.js
// 向外按需导出变量 s1
export let s1 = 'aaa'
// 向外按需导出变量 s2
export let s2 = 'ccc'
// 向外按需导出方法 say
export function say = function() {}

// 导入模块成员
import { s1, s2 as ss2, say } from './m1.js'

console.log(s1) // 打印输出 aaa
console.log(ss2) // 打印输出 ccc
console.log(say) // 打印输出 [Function: say]

注意： 每个模块中，可以使用多次按需导出。
注意： 一个模块中既可以按需导入也可以默认导入，一个模块中既可以按需导出也可以默认导出。

2.3 直接导入并执行模块代码

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

// 当前文件模块为 m2.js

// 在当前模块中执行一个 for 循环操作
for(let i = 0; i < 3; i++) {
	console.log(i)
}

// 直接导入并执行模块代码
import './m2.js'