大前端三剑客——Vue+React+Flutter

作者简介

徐礼文,北京理工大学信息技术创新学院老师、华为HDE、华为首届HarmonyOS开发者创新大赛导师、开放原子开源基金会开源导师。曾担任资深软件开发工程师、系统架构师、技术总监等职务，从事软件研究和开发15年。主要从事跨平台技术、人工智能、区块链，以及数字化架构方向的研究和技术指导工作，对国内外相关领域的技术、理论和实践有很深的理解和研究。

内容简介

第3章 前端构建工具 本章全面介绍前端开发中最流行和最常见的模块化构 建工具，包括Webpack、Rollup、Lerna、Vite工具的原理 和开发实践。通过本章读者可以全面掌握各种构建工具的使 用场景、优缺点和用法。 3.1前端构建工具介绍 前端构建工具能帮助前端开发人员把编写的Less、 SASS等代码编译成原生CSS，也可以将多个JavaScript文件 合并及压缩成一个JavaScript文件，对前端不同的资源文 件进行打包，它的作用就是通过将代码编译、压缩、合并等 操作，来减少代码体积，减少网络请求，方便在服务器上运 行。 3.1.1为什么需要构建工具 随着前端开发项目的规模越来越大，业务模块和代码 模块也越来越复杂，因此在项目开发过程中需要高效的构建 工具帮助开发者解决项目中的痛点问题。下面列举几个企业 项目开发中的痛点问题： (1) 在大型的前端项目中，浏览器端的模块化存在两 个主要问题，第一是效率问题，精细的模块化(更多的JS文 件)带来大量的网络请求，从而降低了页面访问效率； 第 二是兼容性问题，浏览器端不支持CommonJS模块化，而很 多第三方库使用了CommonJS模块化。 (2) 在大型前端项目开发中，需要考虑很多非业务问 题，如执行效率、兼容性、代码的可维护性、可拓展性，团 队协作、测试等工程问题。 (3) 在浏览器端，开发环境和线上环境的侧重点完全 不一样。 开发环境： ■ 模块划分得越精细越好； ■ 不需要考虑兼容性问题； ■ 支持多种模块化标准； ■ 支持NPM和其他包管理器下载的模块； ■ 能解决其他工程化的问题。 线上环境： ■ 文件越少越好，减少网络请求； ■ 文件体积越小越好，传输速度快； ■ 兼容所有浏览器； ■ 代码内容越乱越好； ■ 执行效率越高越好。 开发环境和线上环境面临的情况有较大差异，因此需 要一个工具能够让开发者专心地书写开发环境的代码，然后 利用这个工具将开发时编写的所有代码转化为运行时所需要 的资源文件。这样的工具称为构建工具，如图31所示。 图31构建工具的作用 3.1.2构建工具的功能需求 前端构建工具的本质是要解决前端整体资源文件的模 块化，并不单指JS模块化，随着JavaScript在企业中大规 模应用，复杂的前端项目越来越需要通过构建工具来帮助实 现以下几方面的功能要求。 本书通过介绍目前最流行的三大前端框架及生态体系，带领读者全面掌握从移动互联应用开发到万物互联应用开发技术和实战技巧，本书也可以作为前端开发者搭建企业级前端产品体系的参考书。书中提供了大量的代码示例，读者可以通过这些例子理解知识点，也可以直接在开发实战中稍加修改应用这些代码。另外，提供书中所有案例所涉及的源代码，以便于读者高效的学习。