提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
文章目录
前言
前端模块化是学习node以及学习vue,react等框架必须掌握的内容，本文章将介绍前端模块化的几种标准。
1.概述
1.1什么是模块化
- 原本庞大的单份js文件按照一定规则拆分成多份
- 每个拆分的文件都是一个模块，各模块间相互隔离
- 模块可以自行决定将自己内部的属性和方法暴露出去
1.2为什么要使用模块化
没使用模块化前可能存在以下问题：
- 全局污染（命名冲突）：当一个页面中引入了两个或以上js文件，并且这些文件有冲突（有同名的属性、方法），那么就会导致其中一些方法或属性失效（后引入的覆盖先引入的）。
- 依赖混乱： 在不使用模块化的情况下，我们在使用三方的包时，需要先引入该三方包依赖的其它包，甚至还要进一步引入依赖包的依赖包。并且这些依赖包还必须在使用它的包之前引入。这导致我们想要使用一个三方包不得不关联引入很多其他的依赖，并且还必须注意引入的顺序。
比如：如果我们要使用BootStrap就必须关联引入JQuery和tether,并且顺序都得在Bootstrap之前
数据安全：所有的数据都放在一个作用域中，可能被其他模块误修改。以及其他一些安全问题。
2.有哪些模块化规范
发展至今，有很多可用的模块化规范，但主流的有两种：
- commonJS:nodeJS的默认规范，服务器端应用广泛（用node写的服务器）
- ECMAScript:现行的框架使用的规范（vue,react）,浏览器端应用广泛
3.CommonJS
3.1导入
3.1.1正常导入
格式：
const 变量= require('文件路径');
补充：如果要导入的文件并没有导出任何东西，那么我们会得到一个空对象。
于是可用看出，commonjs本质上是创建出一个空对象，然后将模块中导出的元素丢进去，再传递给导入方使用。
3.1.2解构导入
既然说我们导入的是一个对象，那么我们可以使用赋值解构，来在导入时直接将属性提取出来。
格式：
const {变量1,变量2......}=require('文件路径');
解构对象时会把对象中的属性和方法，赋值给同名的变量.
但是也可以在接收时重新起别名
3.2导出
上面我们说commonJS是提前创建出一个空对象然后往里面装东西来完成模块操作。那么我们要进行导出操作，就是要得到这个对象，然后把要导出的东西放进去。
如何获取这个对象？CommonJS中提供了以下变量来指向该对象：
- exports
- module.exports
- this
3.2.1exports导出
格式:
exports.自定义变量名=要导出的属性或方法
3.2.2module.exports导出
格式：
module.exports={
自定义变量名:要导出的属性或方法
}
补充：当自定义变量名和要导出的属性或方法名相同时，可以省略:以及以后内容。详情看下图
3.3扩展
在CommonJS规范中，模块中我们自定义的代码，会被封装到另一个函数中，该函数中提供了exports等变量，所以我们才可以使用这些变量进行导出。
4.ECMAScript
4.1导入
4.1.1全体导入
格式：
import * as 别名 from '文件路径'
4.1.2命名导入
格式：
import {变量名1，变量名2......} from '文件路径'
也可以为获取的属性起别名：
import{变量名1 as 别名1,变量名2 as 别名2} from '文件路径'
注意：只有在分别导出和统一导出时能够使用命名导入。
4.1.3默认导入
格式：
import 自定义名称 from '文件路径'
注意：在使用默认导出时才可以使用默认导入，并且名称可以自定义
4.1.4无接收导入
有时一些js模块中可能不会提供变量和函数，而是为了执行一些方法，那么我们只要直接用import导入执行即可，并不需要变量接收
4.2导出
4.2.1分别导出
直接在属性或方法前添加export修饰即可。
4.2.2统一导出
格式：
export {属性或方法名1,属性或方法名2}
注意：这里导出虽然使用了{}，但其并不代表一个对象。
4.2.3默认导出
格式：
export default 值
注意：这种导出方式，本质是导出一个键值对，键是"default",值就是后面跟的东西，可以是常量、变量、方法。如果要批量导出也可以使用数组和对象
4.3ES6规范在浏览器端和服务器端的使用
4.3.1浏览器端
虽然我们已经可以完成不同js模块间的导入和导出，那如何应用到页面中呢？我们使用以前在html中引入js文件的方式试试，发现有问题：
可以看出，引入普通js文件的方式，是不能用来引入ES6规范下的js文件的。
我们需要更改type类型为module:
4.3.2服务器端
虽然我们说node运行的js文件中默认使用commonJS规范，但是ES6也是可以用在服务器端的。
首先，直接使用node运行ES6的文件是会出问题的，我们直接用node运行代码如下：
我们有以下方法可以用node运行ES6规范的代码：
- 将所有使用ES6标准的代码文件后缀改为mjs
- 在package.sjon配置文件中添加配置项"type" : "module"
总结
本文章介绍了前端模块化的几种标准，以及各自的导入和导出方式。