前端模块化

一 模块分类：

• 外部的模块: 指代引入前端工程的某个外部的包(package),可能由多个JS文件组成，但会通过入口暴露给我们项目调用
• 内部的模块: 指代我们自己的工程项目中编码的最小单元： 即单个的JS文件。

1 外部模块管理：Node包管理器：npm管理

2 内部模块组织：

二 内部模块组织方式：

1通过<script>标签引入组织(模块化第一阶段：原生JS组织阶段)。

2在线处理组织(模块化第二阶段：在线处理阶段)：AMD和CMD只是一种设计规范，而不是一种实现。

AMD(Asynchronous Module Definition):即“异步模块定义”。它是一种组织前端模块的方式.AMD的理念可以用如下两个API概括： define和require。AMD的实现主要有两个: requireJS和curl.js, 其中requireJS在2010年推出，是AMD的主流框架。

CMD(Common Module Definition):即“通用模块定义”。和AMD不同的是，CMD没有提供前置的依赖数组，而是接收一个factory函数，这个factory函数包括3个参数

三 CommonJS和ES6：

CommonJS是Node.js使用的模块化方式，而import/export则是ES6提出的模块化规范。它们的语法规则如下。

// ES6
import { foo } from './foo'; // 输入
export const bar = 1;        // 输出

// CommonJS
const foo = require('./foo'); // 输入
module.exports = { 。         // 输出
    bar:1
}

babel是一个JavaScript 编译器，通过babel的编译转化成对浏览器兼容良好的JavaScript。它让我们意识到 ：1在开发的时候，我们追求的是编程的便捷性和可阅读性。2而在生产中，我们追求的是代码对各种浏览器的兼容性。

babel则将开发和生产这两个流程分开了，同时让我们可以用ES6中的import/export进行模块化开发。至此，AMD/CMD的时代宣告结束，

 四 Babel工作原理：

Babel的工作流程可概括为三个阶段

• Parse(解析): 通过词法分析和语法分析，将源代码解析成抽象语法树(AST)
• Transform(转换)：对解析出来的抽象语法树做中间转换处理
• Generate(生成)：用经过转换后的抽象语法树生成新的代码

五 模块化第三阶段：预处理阶段：broswerify &webpack;

六 模块化的第四阶段：自动化构建阶段：gulp, grunt和webpack

七 自动化构建新趋势：bundleless。bundleless就是把开发中拖慢速度的打包工作给去掉，从而获得更快的开发速度。代表性工具是vite和snowpack

推荐阅读：

前端模块化的十年征程： zhuanlan.zhihu.com/p/265632724

聊聊ESM,Bundle,Bundleless,Vite,Snowpack: https://segmentfault.com/a/1190000025137845?_ea=67042700#item-2-1