前端工程化——模块化规范

模块化的相关规范

为什么要模块化：

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

命名冲突问题：多个js文件之间如果存在重名的变量就会出现变量冲突问题；

文件依赖问题：js文件之间不能出现相互引用

模块化：把单独的一个功能封装到一个模块文件中。模块之间相关隔离，但是可以通过特定的接口公开内容部成员，也可以以来别的模块。

模块化开发的好处：方便代码管理，提升开发效率，方便后期维护（一个字 厉害！）

模块化规范如下：

服务器端：
commonJS
1.模块分为 单文件模块 与 包
2.模块成员导出：module.exports和exports
3.模块成员导入：require（“模块标志符”）
浏览器端：
AMD CMD【已经过时，具体可以上网查找】

！important
ES6模块化
以上的模块化规范仍然存在着局限性，比如前后端需要分开，ES6完美解决了这个问题；

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

ES6模块化的基本语法：
1.默认导出和默认导入

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

export default{
a,
b,
show//一个该js文件中存在的函数
}

import 文件名 from “ 文件路径”

2.按需导入和按需导出

有时候我们并不需要默认导出的所有值，那我们就可以选择按需导出的方法来达到我们的目的
基本语法：

//min.js文件中的按需导出
export s;
export a;
export d;

//导入min.js中的变量
import min ,{a,d as b,d} from "模块标识符"

注意：
1.默认导入和按需导入可以一起写
2.可以用 as 给按需导入的变量取别名
3按需导出可以和默认导出共存

3.直接导入并执行模块代码
这种情况就是直接导入模块标识符

import "模块标识符"