前端 模块化规范

模块化概述

传统开发模式的主要问题

• 命名冲突
• 文件依赖

通过模块化解决上述问题

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

浏览器端模块化规范

• AMD
• CMD

这两种·已经被废弃

服务器端模块化规范

CommonJS

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

大一统的模块化规范-ES6模块化

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

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

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

因此，ES6语法规范中，在语言层次上第能够以ES6模块化规范，是hi浏览器与服务器通用的模块化规范

ES6模块化规范中定义：

• 每个js文件都是一个独立的模块
• 导入模块成员使用 import 关键字
• 暴露模块成员使用 export 关键字

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

1. npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node
2. npm install --save @babel/polyfill
3. 项目跟目录创建文件 babel.config.js
4. babel.config.js 文件内容如下代码
5. 通过npx babel-node index.js执行代码

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

默认导入和默认导出

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

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

//定义私有成员 a和c
let a = 10;
let c = 20;
//外界访问不到d，因为它没有被暴露出去
let d = 30
function show() {}

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

默认导入的语法 import 接收 from '模块化标识符'

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

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

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

按需导入和按需导出

按需导出语法 export let s1 = 10

//当前文件模块 m1.js

//向外按需导出变量 s1
export let s1 = 'aaa'
//向外按需导出变量 s1
export let s2 = 'ccc'
//向外按需导出变量 s1
export function say = function(){}

按需导出语法 import { s1 } form '模块标识符'

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

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

注意：每个模块中，可以使用多次按需导出