前语


最近有幸在前端团队里边做了一次关于 webpack 的技能共享。在共享的准备过程中,为了能让我们更好的了解 webpack,特意对市面上曾经和现在盛行的构建东西做了一个梳理总结。在收拾和共享的过程中,获益匪浅,对前端构建东西有了新的认识。在这里,将自己的一些思考总结写出来,期望也能给到对构建东西相同感兴趣的同学一点协助。

本文的目录结构如下:

  • 构建东西的宿世此生
  • js 模块化的开展史和构建东西的改变
  • 结束语

构建东西的宿世此生

谈到构建东西,我们首先想到的必定便是 Webpack 以及现在最的 ViteWebpack,功用强大,生态丰厚,从面世到今天,一直是很受我们欢迎;Vite 选用 unbundle 构建形式,带来了极致的开发体会,给开发人员以新的挑选。

在这两个构建东西之外,还有其他的构建东西,如和 WebpackVite 类似的 RollupParcelEsbuild,主动化构建东西 gruntgulp,以及更加久远的 YUI Tool

这些东西的存在,构成了前端构建东西的开展史。

YUI Tool + Ant

YUI tool 是 07 年左右呈现的一个构建东西,功用比较简略,用于紧缩混淆 cssjs 代码,需求配合 javaAnt 运用。

当时 web 运用开发首要选用 JSP,还不像现在这样前后端别离,一般是由 java 开发人员来编写 js、css 代码,前端代码都是和后端 java 代码放在一起的。因而前端代码的紧缩混淆也就根据 java 完成了。

Grunt / Gulp

Grunt / Gulp 都是运行在 node 环境上的主动化东西。

在开发过程中,我们能够将一些常见操作如解析 htmles6 代码转换为 es5less / sass 代码转换为 css 代码代码查看代码紧缩代码混淆装备成一系列使命,然后经过 Grunt / Gulp 主动执行这些使命。

GruntGulp 的不同点:

  • 运用 Grunt的过程中,会发生一些中间态的临时文件。一些使命生成临时文件,其它使命或许会根据临时文件再做处理并生成终究的构建后文件,导致呈现屡次 I/O

  • Gulp 有文件流的概念,经过管道将多个使命和操作连接起来,不会发生临时文件,减少了 I/O 操作,流程更明晰,更纯粹,大大加快了构建的速度。

Webpack / Rollup / Parcel

WebpackRollupParcel 统称为静态模块打包器

这一类构建东西,一般需求指定进口 – entry,然后以 entry 为起点,经过剖析整个项目内各个源文件之间的依靠联系,构建一个模块依靠图 – module graph,然后再将 module graph 别离为三种类型的 bundle:
entry 所在的 initial bundlelazy load 需求的 async bundle 和自定义别离规矩的 custome bundle

这几个构建东西各有优势:

  • Webpack 大而全,装备灵活,生态丰厚,是构建东西的首选。

  • Parcel 声称零装备,运用简略,合适不太需求定制化构建的项目运用。

  • Rollup 推重 ESM 标准开发,打包出来的代码洁净,适用于组件库开发。

Vite / Esbuild

新一代构建东西。

esbuild, 根据 go 言语完成,代码直接编译成机器码(不用像 js 那样先解析为字节码,再编译为机器码),构建速度比 webpack 更快。

vite, 开发形式下借助浏览器对 ESM 的支撑,选用 nobundle 的方法进行构建,能供给极致的开发体会;生产形式下则根据 rollup 进行构建。

js 模块化的开展史和构建东西的改变

javascript 言语规划之初,仅仅作为一个简略的脚本言语用来丰厚网站的功用,并不像 javac++ 那样有 module 的概念,开展到现在的模样,也经历了相当长的时刻。

这段时刻,能够简略归纳为:

  • 青铜时代 – no module;

  • 白银时代 – cjs、amd、cmd、umd、esm 相继呈现;

  • 黄金时代 – 组件模块化;

不同的时代,构建东西也不同。

青铜时代

由于没有 module 的概念, javascript 无法在言语层面完成模块之间的彼此阻隔彼此依靠,只能由开发人员手动处理。

相应的,早期的 web 开发也比较简略乃至简陋:

  • 经过对象iife(或者闭包)的方法完成模块阻隔
  • 经过手动确认 script加载次序确认模块之间的依靠联系
  • jsp 开发形式,没有专门的前端,htmljscss 代码一般也由后端开发人员编写。

为了节省带宽保密,一般需求对前端代码做紧缩混淆处理。这个时分,构建东西为 YUI Tool + Ant

白银时代

chrome v8 引擎 和 node 的横空出世,给前端带来了无限的或许。

一起,javascript 的模块化标准也有了新的开展:

  1. commonjs 标准,适用于 node 环境开发。

  2. amdcmd 标准,适用于浏览器环境。

  3. umd,兼容 amdcommonjs,代码能够一起运行在浏览器node 环境。

  4. ESM,即 ES6 module(这个时分还不是很成熟);

一起还呈现了 lesssasses6jslinteslinttypescript 等新的东西, 前端人物也开端承当越来越重要的作用,渐渐的独立出来。

有了 node 供给的平台,大量的东西开端出现:

  • requirejs 供给的 r.js 插件,能够剖析 amd 模块依靠联系合并紧缩 js优化 css
  • less / sass 插件,能够将 less / sass 代码转化为 css 代码;
  • babel,能够将 es6 转化为 es5
  • typescript,将 ts 编译为 js
  • jslint / eslint,代码查看;

这个时分,我们能够将上面的的这些操作装备成一个个使命,然后经过 Grunt / Gulp 主动执行使命。

黄金时代

根据 AngularVueReact 三大框架Webpack 的运用,组件模块化成为前端开发的主流形式。一起 ESM 标准也本来越成熟,被更多的浏览器支撑。

ReactWebpack 为例,一般我们会将一个运用涉及到的所有的功用拆分为一个个组件,如路由组件、页面组件、表单组件、表格组件等,一个组件对应一个源文件,然后经过 Webpack 将这些源文件打包。在开发过程中,还会经过 Webpack 开启一个 local server,实时查看代码的运行作用。

Webpack 是一个静态模块打包器,它会以 entry 指定的进口文件为起点,剖析整个项目内各个源文件之间的依靠联系,构建一个模块依靠图 – module graph,然后将 module graph 别离为多个 bundle。在构建 module graph 的过程中,会运用 loader 处理源文件,将它们转化为浏览器能够是识别的 jscssimage音视频等。

随着时刻的开展, Webpack 的功用越来越来强大,也迎来诸多对手。

Webpack1
   |
   |
Rollup 呈现(推重 ESM 标准,能够完成 tree shaking, 打包出来的代码更洁净)
   |
   |
Webpack2(也完成了 tree shaking, 但是装备仍是太繁琐了)
   |
   |
Parcel (声称 0 装备)
   |
   |
Webpack4(经过 mode 确认 development 和 production 形式,各个形式有自己的默认装备)
   |
   |
Webpack5(持久化缓存、module federation)
Esbuild(选用 go 言语开发,比 Webpack 更快)
Vite(推重 ESM 标准,开发形式选用 nobundle,更好的开发体会)

丰厚的构建东西,形成了百花开放的局面,可用于不同的情形,给开发人员带来了越来越多的挑选。

结束语

现在来看,构建东西在整个前端体系中占据的方位是越来越重要。只会 Webpack 乃至不懂构建东西现已无法满足日常开发。这就需求我们时时学习,紧跟时代的脚步,了解最新的技能,不断前进。

尽管前路崎岖,依然相信未来可期,加油 !

我正在参加技能社区创作者签约方案招募活动,点击链接报名投稿。