关于前端模块化的迷思
2017-12-10 本文已影响0人
lzxxx
提到模块化就离不开工程化，所以先扯个图在这。。。（我对工程化的理解和实践还很不全面，这个图完全是按照这个文章的思路加点自己的理解总结的，还有很多不全面和不准确的地方，恳请指正）
工程化
下面进入文章的正题，模块化。（就是上图中间空出的那个大分支）
从我接触前端起 ES6 就已经进入大众视野，大家已经开始使用 import/export，导致我对早期模块化和相关的工具很不了解，经常听到、看到AMD/CMD/CommonJS/requirejs/r.js/sea.js 但是却不知道他们的区别和关系。恰好最近有一个项目（哦，其实还是第一篇博客 的这个）在整合 react 进来，遇到了一些和模块化相关的问题，借此把之前模模糊糊的问题梳理一下。
总体概览：
我们主要要讲的是，早期各种流派的模块化规范，和实现了相应规范的工具。下面我们就沿着这个路子详细谈谈。
先说标准：
在还没有标准的规范出台之前，社区为了实现模块化已经推出了几种，包括：AMD,CMD,CommonJs。这三种规范之间还有着错综复杂的关系，并且 CMD 是国内发展出来的。但是这些都不是我们的重点。规范规定了他们的写法，和模块加载的时机、方式等。具体来说的话就是：
AMD：
- 语法：
define(["require"],function(require){
//注意这里，即使没有 require ，也就是可能没用到这个模块，AMD 默认也是 下载并执行好的
if(false){
var module = require('./a');
}
return ...//这里返回的就是 require 时候参数里拿到的东西
})
- 特征
都是在调用 define 方法确定了依赖之后就开始下载文件并执行。
也就是说实际上是一个异步加载的过程。 - 相关工具
requireJs
注：其实就是在前端实现了一个在线的加载器。requireJs 提供了一个基于 node 的命令行工具 r.js，用来压缩多个模块文件。在 node 端完成这个任务，避免客户端多次请求。其实就是一个线下的打包器。我个人觉得这两种方案就是在平衡合并请求和按需加载之间的矛盾。
CMD
- 语法：
define(function(require, exports, module) {
...
//依赖就近，用的时候才执行
var clock = require('clock');
clock.start();
});
- 特征：
- 相关工具：
SeaJs
和 RequireJs 的语法很像，但是指定依赖的模块是在传过去的方法里确定的，而不是调用传参的方式。仔细想便知，这样加载器在确定加载文件实际上只能通过静态分析的方法去解析然后加载（事实也确实如此，是正则匹配require的过程）。但是执行是在用的时候才执行。
CommonJs
是 node 采用的规范，此处不详述了。。好了。。。去睡觉了。。😪
（推荐一篇讲 browserify 运行原理的文章，觉得不错，建议一看。具体剖析等我什么时候也能自己写模块加载器的时候再写吧。。。）
参考文章：
前端工程——基础篇
前端模块化开发的价值
前端模块化开发那点历史
browserify 运行原理分析
RequireJS和AMD规范
LABjs、RequireJS、SeaJS 哪个最好用？为什么？
AMD 是提前执行，CMD 是延迟执行 如何理解呢？
