说说对项目构建的理解

目录

1、什么是项目构建?

2、常用构建工具的认识

3、构建环境的认识

---

1、什么是项目构建?

前端项目中，项目的构建可以理解为编译，是要将源代码转化成宿主浏览器可以执行的代码，核心是对资源的管理，产出包括JS，CSS，HTML等资源。

项目构建过程一般在脚手架创建初始项目文件之后，程序员编写完主要功能，需要进一步对项目文件进行处理。

总之，构建其实是工程化、自动化思想在前端开发中的体现，把一系列流程用代码去实现，让代码自动化地执行这一系列复杂的流程。 构建给前端开发注入了更大的活力，解放了我们的生产力。

• 项目构建包括如下内容：
  • 代码转换：将 TypeScript 编译成JavaScript、将 Less 编译成 CSS等。
  • 文件优化：压缩JavaScript、CSS、HTML 代码，压缩合并图片等。
  • 代码分割：提取多个页面的公共代码，提取首屏不需要执行部分代码让其异步记在。
  • 模块合并：在采用模块化的项目里会有很多个模块和文件，需要通过构建功能将模块分类合并成一个文件。
  • 自动刷新：监听本地源代码变化，自动重新构建、刷新浏览器。
  • 代码校验：在代码被提交到仓库前需要校验代码是否符合规范，以及单元测试是否通过。
  • 自动发布：更新代码后，自动构建出线上发布代码并传输给发布系统。
• 构建工具就是做以上这些事，将源代码转换成可以执行的JavaScript、CSS、HTML 代码。

小结：构建需要解决的问题

a：面向语言

      ECMAScript规范的转译，将领先于浏览器实现的JS代码转译成标准的浏览器可识别的规范代码（Babel）

      CSS预编译语法转译，将SASS，LESS编写的代码转化为标准CSS语法

      HTML模板渲染，将Jade/EJS/Mustache等模板语法转换为标准HTML

b：面向优化

      依赖打包，分析文件之间的依赖关系，将同步依赖的文件打包在一起，减少HTTP请求

      资源嵌入，将小的图片编译为base64的格式嵌入文档减少HTTP请求

      文件压缩，减少文件体积

      hash指纹，给文件加入hash指纹应对浏览器缓存策略

c：面向部署

      域名/路径改变，开发环境和线上环境域名变化，资源部署的服务器不同

      文件名改变，内容改变导致hash指纹改变，则文件名改变

源自：《前端工程化--体系设计与实践》  ——周俊鹏

2、常用构建工具的认识

所谓构建工具是指通过简单配置就可以帮我们实现合并、压缩、校验、预处理等一系列任务的软件工具。

• 构建工具有很多，例如：
  • fis3 （百度推出）
  • grunt
  • gulp （配置的更简单一些）
  • webpack（功能最强大）
  • parcel
  • Rollup
  • vite
  • …
• 但是市面上最火，功能最强大的无非就是webpack(Babel编译器，CSS预编译，postCSS前缀处理，CSS Sprites等)，而其次是gulp。
• 所以，我们主要就学习这两种构建工具
• 最核心：就是能运行
• 参考资料：深入浅出 Webpack · 深入浅出 Webpack

3、构建环境的认识

• 我们对平时开发的代码区分了两种环境：
  • 开发环境 development
    • 自动编译运行项目、检查语法错误、详细的错误提示等… （能帮助程序员更好的写代码, 在内存中编译运行，没有任何文件输出）
    • 这个构建好的环境会自动编译，自动化，完整展现满足我们的需求。
    • （能让代码在浏览器运行，自动化运行）
  • 生产环境 production
    • 压缩代码、兼容性处理等…（生成打包后的项目文件，提供项目上线使用）
    • 输出上线使用的代码
• 而我们使用的库也分为两种依赖：
  • 开发依赖 devDependencies
    • 项目构建打包需要的依赖
  • 生产依赖 dependencies
    • 项目运行时需要的依赖