前端模块化

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

前言

前端模块化是学习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”

总结

本文章介绍了前端模块化的几种标准，以及各自的导入和导出方式。