前端工程化_构建工具和脚手架_学习笔记

前文都是对代码级别的转换，下面是工程级别的转换

开发和维护的代码 jsx、sass

和运行时需要的代码

不一致

所以需要转换，做转换的工具就叫做构建工具

打包之后的代码就完全脱离了开发环境

1. 哪种工程更适合开发和维护
2. 哪种工程更适合运行
3. 如何转换（打包）

构建工具就是解决上述三个问题

市面上的构建工具有以下这些：

webpack、rollup、esbuild、turbopack、snowpack、grunt、gulp、rspack

webpack 依然是最主流的，下文将进行介绍

构建工具：webpack

webpack怎么认为上面三个问题呢

1. 哪种工程更适合开发和维护

   • 一切皆为模块

2. 哪种工程更适合运行

   • 传统工程

3. 如何转换（打包）

   • 
   • 通过入口去找依赖关系图，然后打包合并

1.入口

• AST（抽象语法树）
  • 导入语句
    • 同时支持 ESM、CMJ
    • import、require
  • 模块查找

    • 比如给一个文件夹，会找文件夹中的 index.js

    • 如果没有给./ ../之类的就会去找 node 的模块查找规则，就是看看当前目录有没有 node_modules，没有就一直往上一级找

      • 
      • 比如上例就会去 node_modules 目录里面去找 jquery，再找到目录下面的 package.json，找到 main 字段再进去找

    • @就是别名，可以配置，在 webpack.config.js 中

2.开发服务器

• 就像我们经常用的 npm run server
• 也就是我们在运行命令 webpack serve 时，会启动一个开发服务器
• 像我们常用的 live server 就是开发服务器
• webpack 里面内置了一个库，webpack-dev-server，而这个库里面依赖了 express

我们运行 webpack-serve 的时候就会利用这一套工具，来启动一个开发服务器，与此同时它会进行打包，相当于帮我们运行了 npm run build，只是这一次打包是在内存里面完成，并不会把打包结果形成文件，文件是存储数据的介质，不放文件放内存也可以，内存里面也可以存数据，内存中会形成打包结果，然后就是在控制台中给我们提示，提示我们访问的地址，比如8080，点击后此时就由浏览器访问我们的开发服务器了

1. 浏览器会向开发服务器发送请求
2. 开发服务器就可以从打包结果中去拿到一个页面
3. 把页面响应给浏览器
4. 浏览器就会渲染页面，渲染过程继续请求 js、css
5. 开发服务器又继续从打包结果中去那相应的 js、css

这就解决了我们手动打包，手动运行浏览器的过程

除此之外，还能实现源码变化后刷新的功能

那么浏览器怎么知道刷新呢，这就涉及到 websocket\HMR

3.文件指纹

比如这个打包结果，这就涉及到哈希值了

打过过程中文件内容的变化，会影响到这个文件指纹

换句话说：文件内容不变，这一块就不会变

文件指纹是在 webpack 里面进行配置的，可以不产生指纹，但一般情况下我们都希望他产生指纹

如果不使用指纹会出现这种情况

1. 浏览器看到这个 js 会向服务器去请求 js，像 js、css 服务器一般会加入缓存，让浏览器缓存起来，期限一般很久
2. 那浏览器下次再遇到这个 js 就会从缓存中取，此时服务器更新了内容浏览器就不知道，会产生问题

使用文件指纹就不一样了：

1. 页面中引入12345这个 js，服务器给了，因为带了文件指纹，就能让浏览器缓存很久3、5百年也行
2. 然后再用到这个 js 的时候就会使用缓存了
3. 有一天服务器更新代码，重新打包后文件指纹就变了
4. 页面变了之后页面的 js、css也会跟着变
   • 像页面（也就是html）一般是不加入缓存的
5. 页面的路径变成了一个新的文件，由于 a123b.js 在浏览器是没有缓存的，路径变了缓存就无法命中，因此就必须请求新的文件
   • 缓存一般是和请求路径相互绑定的
6. 然后对新的文件再进行缓存

4.css modules

为了避免类名冲突，打包结果里面的类名全都变化了

这样，源码里面的类名和打包结果的类名就对应起来了

5.源码地图

就是打包文件里的 .map 文件

它是用于将运行的代码和源代码对应起来的，否则难以调试、打断点

这里面就是源码了

小结

webpack是通过两个扩展点

一个是 loader

一个是 plugin

加载器和插件，通过这两个点可以把代码转换工具全部融合

脚手架

常用的有：

vue-cli

vite

cra

umijs

脚手架有两个功能

1. 提供界面和交互
2. 提供工程模板

提供界面和交互也就是我们平时安装脚手架的时候，在终端中出现的对话，比如

npm install -g @vue/cli

安装完之后就可以搭建项目了

vue create my-vue-project

就可以开始选择了

项目创建完之后就可以使用脚手架提供的工程模板了

END

本文主要对构建工具和脚手架进行简要介绍，首先明确了构建工具的作用，因为开发和维护的代码和运行时的代码是不一致，需要构建工具来进行转换，而且这个转换是工程级别的转换；然后介绍了主流构建工具 webpack,介绍了 webpack 的入口、开发服务器、文件指纹、css modules以及源码地图；最后简单介绍了脚手架