Skip to main content

前端工程化

简介​

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

目的：降本增效

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

构建工具​

什么是构建工具？​

将前端工程化的各种配置和工具整合到一起，为前端工程化提供支持。

  1. TypeScript：遇到 ts 文件，需要用 tsc 将其编译成 js 文件
  2. React、Vue：浏览器只认识 html、css、js，需要通过 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
  2. 处理代码兼容性：babel、less、ts
  3. 提高项目性能：文件压缩、代码分割
  4. 优化开发体验：热更新、代码检查、代码提示、启动开发服务器

JS 编译​

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

CSS 编译​

包管理​

版本控制​

代码规范​

lint 规范​

CDN​

测试​

CI/CD​

项目管理​