前语
最近有幸在前端团队里边做了一次关于 webpack 的技能共享。在共享的准备过程中，为了能让我们更好的了解 webpack，特意对市面上曾经和现在盛行的构建东西做了一个梳理总结。在收拾和共享的过程中，获益匪浅，对前端构建东西有了新的认识。在这里，将自己的一些思考总结写出来，期望也能给到对构建东西相同感兴趣的同学一点协助。
本文的目录结构如下:
- 构建东西的宿世此生
- js 模块化的开展史和构建东西的改变
- 结束语
构建东西的宿世此生
谈到构建东西，我们首先想到的必定便是 Webpack 以及现在最的 Vite。Webpack，功用强大，生态丰厚，从面世到今天，一直是很受我们欢迎；Vite 选用 unbundle 构建形式，带来了极致的开发体会，给开发人员以新的挑选。
在这两个构建东西之外，还有其他的构建东西，如和 Webpack、Vite 类似的 Rollup、Parcel、Esbuild，主动化构建东西 grunt、gulp，以及更加久远的 YUI Tool。
这些东西的存在，构成了前端构建东西的开展史。
YUI Tool + Ant
YUI tool 是 07 年左右呈现的一个构建东西，功用比较简略，用于紧缩混淆 css 和 js 代码，需求配合 java 的 Ant 运用。
当时 web 运用开发首要选用 JSP，还不像现在这样前后端别离，一般是由 java 开发人员来编写 js、css 代码，前端代码都是和后端 java 代码放在一起的。因而前端代码的紧缩混淆也就根据 java 完成了。
Grunt / Gulp
Grunt / Gulp 都是运行在 node 环境上的主动化东西。
在开发过程中，我们能够将一些常见操作如解析 html、es6 代码转换为 es5、less / sass 代码转换为 css 代码、代码查看、代码紧缩、代码混淆装备成一系列使命，然后经过 Grunt / Gulp 主动执行这些使命。
Grunt 和 Gulp 的不同点：
-
运用
Grunt的过程中，会发生一些中间态的临时文件。一些使命生成临时文件，其它使命或许会根据临时文件再做处理并生成终究的构建后文件，导致呈现屡次I/O。 -
Gulp有文件流的概念，经过管道将多个使命和操作连接起来，不会发生临时文件，减少了I/O操作，流程更明晰，更纯粹，大大加快了构建的速度。
Webpack / Rollup / Parcel
Webpack、Rollup、Parcel 统称为静态模块打包器。
这一类构建东西，一般需求指定进口 – entry，然后以 entry 为起点，经过剖析整个项目内各个源文件之间的依靠联系，构建一个模块依靠图 – module graph，然后再将 module graph 别离为三种类型的 bundle:
entry 所在的 initial bundle、lazy load 需求的 async bundle 和自定义别离规矩的 custome bundle。
这几个构建东西各有优势:
-
Webpack大而全，装备灵活，生态丰厚，是构建东西的首选。 -
Parcel声称零装备，运用简略，合适不太需求定制化构建的项目运用。 -
Rollup推重ESM标准开发，打包出来的代码洁净，适用于组件库开发。
Vite / Esbuild
新一代构建东西。
esbuild, 根据 go 言语完成，代码直接编译成机器码(不用像 js 那样先解析为字节码，再编译为机器码)，构建速度比 webpack 更快。
vite, 开发形式下借助浏览器对 ESM 的支撑，选用 nobundle 的方法进行构建，能供给极致的开发体会；生产形式下则根据 rollup 进行构建。
js 模块化的开展史和构建东西的改变
javascript 言语规划之初，仅仅作为一个简略的脚本言语用来丰厚网站的功用，并不像 java、c++ 那样有 module 的概念，开展到现在的模样，也经历了相当长的时刻。
这段时刻，能够简略归纳为：
-
青铜时代– no module； -
白银时代– cjs、amd、cmd、umd、esm 相继呈现； -
黄金时代– 组件模块化；
不同的时代，构建东西也不同。
青铜时代
由于没有 module 的概念, javascript 无法在言语层面完成模块之间的彼此阻隔、彼此依靠，只能由开发人员手动处理。
相应的，早期的 web 开发也比较简略乃至简陋:
- 经过
对象、iife(或者闭包)的方法完成模块阻隔； - 经过手动确认
script的加载次序确认模块之间的依靠联系。 -
jsp开发形式，没有专门的前端，html、js、css代码一般也由后端开发人员编写。
为了节省带宽和保密，一般需求对前端代码做紧缩混淆处理。这个时分，构建东西为 YUI Tool + Ant。
白银时代
chrome v8 引擎 和 node 的横空出世，给前端带来了无限的或许。
一起，javascript 的模块化标准也有了新的开展:
-
commonjs标准，适用于node环境开发。 -
amd、cmd标准，适用于浏览器环境。 -
umd，兼容amd、commonjs，代码能够一起运行在浏览器和node环境。 -
ESM，即ES6 module(这个时分还不是很成熟)；
一起还呈现了 less、sass、 es6、 jslint、 eslint、typescript 等新的东西， 前端人物也开端承当越来越重要的作用，渐渐的独立出来。
有了 node 供给的平台，大量的东西开端出现:
-
requirejs供给的r.js插件，能够剖析 amd 模块依靠联系、合并紧缩 js、优化 css； -
less/sass插件，能够将less/sass代码转化为css代码； -
babel，能够将es6转化为es5； -
typescript，将ts编译为js； -
jslint/eslint，代码查看； - …
这个时分，我们能够将上面的的这些操作装备成一个个使命，然后经过 Grunt / Gulp 主动执行使命。
黄金时代
根据 Angular、Vue、React 三大框架和 Webpack 的运用，组件模块化成为前端开发的主流形式。一起 ESM 标准也本来越成熟，被更多的浏览器支撑。
以 React 和 Webpack 为例，一般我们会将一个运用涉及到的所有的功用拆分为一个个组件，如路由组件、页面组件、表单组件、表格组件等，一个组件对应一个源文件，然后经过 Webpack 将这些源文件打包。在开发过程中，还会经过 Webpack 开启一个 local server，实时查看代码的运行作用。
Webpack 是一个静态模块打包器，它会以 entry 指定的进口文件为起点，剖析整个项目内各个源文件之间的依靠联系，构建一个模块依靠图 – module graph，然后将 module graph 别离为多个 bundle。在构建 module graph 的过程中，会运用 loader 处理源文件，将它们转化为浏览器能够是识别的 js、css、image、音视频等。
随着时刻的开展， 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 乃至不懂构建东西现已无法满足日常开发。这就需求我们时时学习，紧跟时代的脚步，了解最新的技能，不断前进。
尽管前路崎岖,依然相信未来可期，加油 ！
我正在参加技能社区创作者签约方案招募活动，点击链接报名投稿。
评论(0)