前端模块化

前端模块化

模块化主要解决：

1. 全局变量污染
2. 封装为独立模块便于代码复用
3. 依赖管理，避免循环依赖

ES6之前的模块化技术

1. CommonJS：Node.js的模块化规范，通过require引入模块，通过module.exports导出模块。(2009)
2. AMD：RequireJS实现的模块化规范，通过define定义模块，通过require引入模块。(2010)
3. CMD：SeaJS实现的模块化规范，通过define定义模块，通过require引入模块。(2011)
4. UMD：通用模块定义规范，兼容CommonJS、AMD和全局变量方式。(2012)
5. ES6 Module：ES6引入的模块化规范，通过import引入模块，通过export导出模块。(2015)

module.exports暴露属性和方法，也可以是一整个对象，不可以直接赋值

module.exports = { Xxx } 自定义模块暴漏多个属性|函数数据；

Node还提供第二种写法：exports.Xxx = Value

require获取的是module.exports的值，module.exports的优先级更高，如果exports直接赋值，会修改堆空间指向导致无法暴漏属性|函数

require:

1.  .js 和 .json 文件导入时可以不用写后缀，对于同名文件：Xxx.JS|Xxx.JSON .JS优先级更高)

2. 自己创建的模块最好写相对路径

3. require导入文件夹：如果导入的路径是个文件夹，Node则会首先检测该文件夹下 package.json 文件中 main属性 对应的文件 存在则导入，反之报错；如果 main 属性不存在，或者 package.json 不存在，则会尝试导入文件夹下的 index.js 和 index.json

ESM模块化  ESModule

export 暴露

import 导入： import * as xxx from './xxx.js'

html

暴露方式：

• 分别暴露：export 属性/函数
• 统一暴露：export { x, x, ... }
• default默认暴露：export default { 键: 值形式属性/函数暴露 } 返回一个default对象

导入方式：

• 常规： import * as 别名 from '文件地址.js'
• 默认暴露引入：import 别名 from '默认暴露文件地址.js'
• 解构赋值导入：import {模块匹配变量名， 模块匹配变量名 as 别名, ... } from '文件地址.js'

ESM项目结构：

项目中需要大量的模块导入，为方便管理，通常会配一个入口.js文件进行批量导入|管理模块

ES版本兼容问题：将es6语法通过编译工具翻译为es5进行页面渲染：编译工具babel