课程连接：前端模块化与打包构建原理解析
[

](https://www.kaikeba.com/open/item?lpsc=228175)
从原始需求了解模块化到底解决了什么，现代前端各种模块化方案到底如何更好的融合，首先，先来看几个问题：

  • 为什么要使用模块化
  • 基于JavaScript的模块化（规范）系统的变迁
  • 为什么要对模块进行打包构建
  • 模块打包原理流程
  • 模块依赖分析与资源的构建

1、为什么要使用模块化？ 基于JavaScript的模块化（规范）系统的变迁？

这里做了简单的介绍，如果想了解 js 的发展史，推荐文章：JavaScript 模块发展史

  1. 把功能性的代码通过文件的方式进行组织，通过 script 标签来引入 js 文件
  2.     - 多文件代码之间的依赖问题，被依赖必须在依赖的文件之前被 script 引入，通过人工的方式来处理，容易出问题，特别是有一些循环应用问题的时候
  3.     - 作用域的问题，js 文件只是分割了代码，每个独立的文件并不会产生独立的作用域
  5. 随着应用越来越复杂，就有必要对 js 增加模块的概念（特性）
  6.     - Node.js（基于JavaScript）引入模块系统 : CommonJS 模块系统
  7.         - 每个独立的文件在加载解析过程中会产生一个独立的作用域（模块作用域），内置一些模块级别的变量（module、exports、__dirname、__filename）
  8.         - 引入模块：require()
  9.         - 模块导出：module.exports、exports
  11. 浏览器环境下 CommonJS 规范定义的一些特性不能完全被直接拿来使用，比如 CommonJS 中模块的加载方式，但是可以借鉴，设计理念和API
  12.     - AMD
  13.         : requireJS
  14.     - CMD/UMD...
  16. ECMAScript Module
  17.     - import 载入
  18.     - export 导出

2、为什么要对模块进行打包构建

- 因为什么出现了这个？

  • 知道了模块是干什么的，我们在开发时，会根据我们的目录层级新建多个模块文件【提高了代码复用性、单独作用域避免全部变量污染、代码层级清晰分明】。
  • 开发时的多个模块文件不可能有多个直接拿多少个去浏览器上使用，因为发送每个请求都要时间，整体上性能不太好。

  • 所以，我们需要用构建打包的方式将多个模块文件合并成一个，这样就只会发一次请求了。

    - 解决了什么问题？

  • 将多个模块文件合成一个模块文件，避免不必要的资源浪费。

3、模块打包基本原理流程

模块化⼯具的基本流程都是：⼊⼝ → { 内容解析 → 依赖提取（循环内容解析 → 依赖提取）} → 代码转换 → 内容⽣成 → 资源输出。
简单来说： 源代码 => (词法分析 => 语法分析) => ast => 中间码 => 目标码 => 目标文件

4、扩展

- node

  • commonJs 模块
  • ES 模块

    - npm start 和 npm run start 区别

    run 是用来运行 package 中的 script 命令的，start 是 npm 官方有的，所以可以省略 run。如果是自定义的，如： npm run tests ，官方没有 run 是不能省略的。

5、参考：

AST：https://github.com/estree/estree AST：https://github.com/babel/babel/blob/main/packages/babel-parser/ast/spec.md AST 预览：https://astexplorer.net/ 代码解析 => AST: @babel/parser AST 节点遍历处理： @babel/traverse

6、课件：

基本原理及流程.pdf
前端模块化.md