前端模块化汇总前端模块化汇总

模块化含义

【前端模块化汇总】模块化：模块化就是将单个文件当成一个模块，在日常项目开发里面我们不会将所有逻辑写在一个文件里面，不管是css还是js。原因是这样会导致单个文件过大，无法实现复用和维护，所以我们会将文件进行切割分离，这样分离独立出来的每一个文件都是一个模块。

css的模块化

在css里面，我们可以将单个公用的css文件进行分离，在需要的css文件里面导入。
原生css里面我们可以使用 @import(css文件路径); 进行导入。
sass/less/stylus都有各自的导入文件方法，例如sass的@import css文件路径;
所以css文件的模块化相当于来讲比较简单，不需要导出，只需要导入使用css文件。

js的模块化

在js里面，原生的js不支持一个js文件导入另一个js文件，我们需要将用到的js文件按照顺序利用script标签导入到html里面使用。这样文件依次加载，必须保证严格的加载顺序，而且文件之前的依赖关系不能很好的展示，对于开发来说，不利于阅读和维护。
所以针对于这样的情况，很多大佬们提出了js模块化的管理机制，下面就详细介绍四种主流的模块化机制以及代码演示。
1. commonjs规范
  - 以nodejs为代表
  - 导入
    - const math = require('./math')
  - 导出
  // 多个导出 module.exports = { add: function(){}, plus: function(){} }
  
  // 单个导出 exports.add = function(){} exports.plus = function(){}
2. esm规范
  - es6提出的模块化方案
  - 导入
    - 按需导入 import {add, plus} from './math.js'
    - 默认导入 import math from './math.js'
  - 导出
  // 按需导出 const add = (a,b) => a+b const plus = (a,b) => a-b export {add, plus}
  
  // 默认导出 export default { add: (a,b)=> a+b, plus: (a,b) => a-b }
3. AMD规范
  - 以requirejs为代表
  - 导入
  require(['./math'], (math)=>{ console.log(math.add(1,2)) console.log(math.plus(1,2)) })
  - 导出
  define(()=>{ const add = (a,b) => a+b const plus = (a,b) => a-b return { add, plus } })
4. CMD规范
  - 以seajs为代表
  - 导入
  define((requires)=>{ // 导入 const math = requires('./math') console.log(math.add(2,3)) console.log(math.plus(2,3)) })
  - 导出
  define((requires, exports, modules)=>{ // 导出 const add = (a,b) => a+b const plus = (a,b) => a-b exports.add = add exports.plus = plus })
  - 我们会发现js模块化不管哪一种语法，都包含导入和导出，所以模块化管理就是一种话导入和导出。

模块化规范的区别

esm规范是es6推出的模块化方案，目前这种方案逐渐被各大主流浏览器最新版本支持，是未来js在浏览器(客户端)的选择方向。
commonjs目前主要引用范围是基于node,目前主要适用于js服务端的模块化管理。
AMD规范和CMD规范都是在es6模块化出现之前让浏览器（客户端）支持模块化的方案，两种的区别主要体现在加载依赖的时机不一样。
- AMD推崇的是依赖前置，就是用到哪些依赖就提前导入
// requirejs defined(['./math'], function(math){ // 当前模块用到了math模块，要在定义模块的时候导入math })
- CMD推崇的是依赖就近，就是什么时候用到什么时候导入
// sea.js defined(function(require){ // 当前模块用到了math模块，在需要的用的时候就近导入 const math = require('./math') })
项目的源代码地址
- 码云gitee