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

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

image-20241215105802950

开发和维护的代码 jsx、sass

和运行时需要的代码

不一致

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

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

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

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

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

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

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

构建工具：webpack

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

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

    • 一切皆为模块

  2. 哪种工程更适合运行

    • 传统工程

  3. 如何转换（打包）

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

1.入口

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

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

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

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

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

2.开发服务器

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

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

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

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

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

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

3.文件指纹

image-20241215145302648

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

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

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

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

image-20241215152051230

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

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

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

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

4.css modules

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

image-20241215153020350

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

5.源码地图

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

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

image-20241215153335924 image-20241215153427285

这里面就是源码了

小结

webpack是通过两个扩展点

一个是 loader

一个是 plugin

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

脚手架

常用的有：

vue-cli

vite

cra

umijs

脚手架有两个功能

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

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

npm install -g @vue/cli

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

vue create my-vue-project
image-20241216112638808

就可以开始选择了

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

END

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

posted @ 2024-12-16 11:35  goicandoit  阅读(12)  评论(0)  编辑  收藏  举报