跳到主要内容

前端工程化

简介​

特性：模块化、组件化、规范化、自动化

目的：降本增效

  • 模块化：将一个复杂应用根据规范封装为多个块并组合起来，对内实现数据私有化，对外暴露接口与其他模块通信。
  • 组件化：将一个具备通用功能的交互设计划分为模版、样式、逻辑组成的功能单元。
  • 规范化：将一系列规范接入工程各个阶段，通过各项指标标准化开发者的工作流程。
  • 自动化：将一系列繁琐重复的工作流程交给程序自动处理。如自动化构建、自动化测试、自动化部署等。

构建工具​

什么是构建工具？​

将前端工程化的各种配置和工具整合到一起，为前端工程化提供支持。简单说，构建工具就是干集成的工作。例如语法降级、转换等工作不是构建工具做的，而是将对应的处理工具集成进来自动化处理。

浏览器只认识 html、css、js 文件

需要处理的工作：

  1. TypeScript：遇到 ts 文件，需要用 tsc 将其编译成 js 文件
  2. React、Vue：需要通过 react-compiler、vue-compiler 将 .jsx、.vue转换成浏览器认识的文件
  3. less/sass/postcss：需要通过 less-loader/sass-loader/postcss-loader 等编译工具将其转换成 css
  4. 语法降级：需要通过 Babel 将 ES6+ 的代码转换成 ES5
  5. 体积优化：删除代码的空格部分，删除打印信息，uglify.js 将代码压缩

如果没有构建工具，修改一个 tsx 文件的过程：index.tsx -> tsc -> index.jsx -> React-compiler -> index.js，感觉很麻烦。有一个东西可以把 tsc、React-compiler、less、babel、uglify.js 等全部集成到一起，我们只需要关注代码，这个东西就是构建工具。

打包

将我们写的浏览器不认识的代码交给构建工具进行编译处理的过程就叫做打包，打包完成后会得到一个浏览器可以认识的文件

构建工具做的工作​

  1. 支持多种模块化规范：es module、Commonjs等，支持直接从 node_modules 里引入代码
  2. 处理代码兼容性：babel、less、ts
  3. 提高项目性能：文件压缩、代码分割、代码混淆
  4. 优化开发体验：热更新、代码检查、代码提示、启动开发服务器

分类​

JS 编译​

  • Babel
  • TSC
  • ESBuild，基于 go 语言，速度很快。Vite 开发环境打包就是选择的 ESBuild
  • SWC ，是一个可扩展的基于 Rust 的平台，用于下一代快速开发工具。SWC 在单线程上比 Babel 快 20 倍，在四核上快 70 倍

CSS 编译​

包管理​

版本控制​

代码规范​

lint 规范​

CDN​

测试​

CI/CD​

项目管理​