前端工程化🙂——构建工具

87 阅读6分钟

构建工具的由来

  要说说构建工具的由来，就得先讲讲模块化啦。

什么是模块化？

   记得实习面试的时候，面试官就问过我这样一个问题，对话差不多是这样子：

  • 面试官：你知道什么是模块化吗？可以说一说吗🙂
  • 我：模块化就是把项目分成一个一个模块
  • 面试官：没了吗🤔
  • 我：emmm还要说啥，没了吧😶
  • 面试官：好的😶

  其实回答的也没错，模块化无非就是将复杂的系统分割成一个个模块，更方便于开发者编码罢了。在ES6之前JavaScript一直没有自己的模块化的体系，采用CommonJS规范于服务器端，AMD规范运用浏览器端，而ES6后制定的ES6模块可同时应用于服务器和浏览器端，这里稍微说说这三种模块规范

CommonJS

  CommonJS在ES6之前应该是使用最为广泛的规范，通过require方法同步加载依赖，通过module.exports暴露出接口。缺点是不能用于浏览器端，我们在.html文件中直接使用是会报错的。

// 导入
const moduleA = require('./moduleA');
moduleA.printName('cat')

// 导出
module.exports = {
    printName:(name) = > {
        alert(name)
    }
};

AMD

  AMD模块化规范除了是应用于浏览器以外，与CommonJS最大的不同在于它是异步加载的。缺点在于js原生是不支持的，必须先导入AMD的库才能使用(🤔个人而言感觉日常中基本没用到过)，先导入该RequireJS库，然后使用define和require语法，感兴趣的小伙伴可以自己去了解一下。

ES6模块

  (￣▽￣) ES6模块化是ES6新出的在JavaScript语言层次上支持的模块化规范，作用于服务器和浏览器端，这个大家应该都很熟悉,使用import和export导入导出。

// a.js
const a = {name:'cat',age:2}
export default a

//b.js
import a from './a.js'

构建工具的出现

   除了模块化以外，为了方便开发我们在写样式的时候通常去使用scss, less，在React中使用JSX,在Vue中使用SFC，包括使用TypeScript等等，它们的共同点是都是不可以直接在浏览器运行的，都要经过处理转化成原始的css,js,html结构才可以在浏览器端展现出来，那么构建工具就由此而生啦。

构建工具介绍

  上一节中我们知道了为什么构建工具会诞生，这里稍微总结一下构建工具的作用（总体就是将无法运行的源代码转化为线上可执行的JS,CSS,HTML代码）

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

webpack

  webpack是一个静态模块打包工具，工作流程大概是这样的，首先找到所有的入口(一个或者多个),开始递归构建依赖图(入口文件依赖哪些资源，后者又依赖了哪些资源)，将项目所需的模块打包成一个或多个bundles(可以被浏览器加载),它们都是静态资源。

  核心概念：

  • entry：指定哪个文件作为webpack构建依赖图的开始。
  • output：指定最后打包生成的bundle的路径和名字。
  • loader：webpack默认只能处理js和json文件,loader的用途就是让webpack去处理其他类型的资源文件(如图片,css,字体等等)，让它们可以供程序使用。
  • plugin：插件用途比较广泛，打包优化，资源转换等，根据插件而异。
  • mode：development,production,none三选一，webpack会根据mode来启用不同模式下的优化。
  • ...

rollup

Rollup 是一个 JavaScript 模块打包工具，可以将多个小的代码片段编译为完整的库和应用。与传统的 CommonJS 和 AMD 这一类非标准化的解决方案不同，Rollup 使用的是 ES6 版本 Javascript 中的模块标准。新的 ES 模块可以让你自由、无缝地按需使用你最喜爱的库中那些有用的单个函数。这一特性在未来将随处可用，但 Rollup 让你现在就可以，想用就用。

  根据介绍来看webpack适合应用程序的打包，而rollup更适合于JS类库的打包。和webpack一样，可以在命令行中进行打包，也可单独使用配置文件(rollup.config.js)进行打包。详细的就去看看官方文档吧。

(英文文档)(中文文档)

vite

  vite是一个新型的前端构建工具（时代在进步，技术在更新，学习永不停止，我哭死😭😭）。一个新的构建工具的出现和火热肯定是有其原因的，稍微介绍一下它和以前构建工具的不同(当然也有很多和vite类似的工具，vite也是受到了很多其它类似构建工具的启发)。

  • 一大不同，vite采用预构建依赖。大概意思就是vite在开发环境会将所有模块都转换成ES模块，然后有些模块导入会让浏览器同时请求几百上千个，vite会将这些成百上千个请求资源预构建成一个模块，就著需要一个HTTP请求了。
  • 正因为vite基于原生ES模块的内建功能，它的热更新速度远远超过了传统打包的bundle形式，看下面的两张图。

bundle.png

vite_esm.png

  我们可以看出传统的打包方式，必须将所有的依赖打包成一个bundle才可以在浏览器运行，当我们改动了其中的一块代码，就要将这个过程重复一遍，当项目越来越大的时候，速度就会明显下降。 而vite就不一样了，在开发环境中，预构建后的模块都可以在浏览器中运行，只要改动相应的模块就可以啦。

avatar
文章
阅读
粉丝