前端程序员常用的9大构建工具
共 1314字,需浏览 3分钟
·
2020-12-17 10:38
说到构建工具,我往往会在前面加「自动化」三个字,因为构建工具就是用来让我们不再做机械重复的事情,解放我们的双手的。
在小型项目中,开发者往往手动调用构建过程,这样在大型的项目中很不实用,在构建过程中难以跟踪什么需要被构建、按照什么顺序构建以及项目中存在哪些依赖。使用自动化工具会使构建过程更为连续。
1:webpack
https://webpack.js.org/
webpack是一个打包模块化JS的工具,在webpack里一切文件都是模块,通过loader转换文件,通过plugin注入钩子,最后输出由多个模块组合成的文件。webpack专注于构建模块化项目。
![](https://filescdn.proginn.com/feafc5a615a7d0fb8a7a80b4a8455b1a/3b5cae122a26c01a42fa07e51fd6e2ca.webp)
2:gulp
https://www.gulpjs.com.cn/
gulp是一个基于流的自动化构建工具。除了可以管理和执行任务,还支持监听文件、读写文件。gulp被设计的非常简单,只通过下面5种方法就可以支持几乎所有构建场景:
![](https://filescdn.proginn.com/9333e669024ae0ea1bb5f11a4312e19a/d0044f992516b513bb9ae191fa527f6e.webp)
3:browserify
http://browserify.org/
Browserify 可以让你使用类似于 node 的 require() 的方式来组织浏览器端的 Javascript 代码,通过预编译让前端 Javascript 可以直接使用 Node NPM 安装的一些库。
![](https://filescdn.proginn.com/997a741cc96da8199260b4ba3fa4689b/34e27d849babd1eb02d83a3c71820061.webp)
4:yeoman
https://yeoman.io/
Yeoman是一个强健的工具,库,及工作流程的组合,帮你网页开发者快速创建出漂亮而且引人入胜的网页程序。
![](https://filescdn.proginn.com/b6710129d1a05871940018ad3d4ca6e7/28b8ca190a088b1409f643a969955b05.webp)
5:grunt
www.gruntjs.net
Grunt和Npm Script类似,也是一个任务执行者。Grunt有大量现成的插件封装了常见的任务,也能管理任务之间的依赖关系。
![](https://filescdn.proginn.com/20c44bb6a5255c6827c4fe680474086f/7b852ead78925234dc6bc0919f5f33ae.webp)
6:babel
https://babeljs.io
Babel 是一个工具链,主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法,以便能够运行在当前和旧版本的浏览器或其他环境中。
![](https://filescdn.proginn.com/635bcda87e6d5e0255a2ef2d093f11c1/4c86762345a2d175b78130399defa6b8.webp)
7:FIS3
https://fex-team.github.io/fis3/
Fis3是来自百度的国产构建工具,相对于grunt,gulp这些只提供了基本功能的工具,Fis3集成了web开发中常用的购将功能,
![](https://filescdn.proginn.com/10d3e46cff4063589a9a94d41a6219aa/ebac5000d9ce22e041f5d1e05ebc1557.webp)
8:Rollup
https://www.rollupjs.com/
Rollup是一个和webpack很类似但专注于ES6的模块打包工具,它的亮点在于,能针对ES6源码进行Tree Shaking,以去除那些已被定义但没使用的代码并进行Scope Hoisting(作用域提升),以减小输出文件的大小和提升运行性能。rollup的方法和webpack差不多
![](https://filescdn.proginn.com/b44d1f3d8600fcb03bea54e72ef0feb7/ffa5363a8175304cd0c7a8a64ff11d4a.webp)
9:Parcel
https://www.parceljs.cn/
极速零配置Web应用打包工具,Parcel 使用 worker 进程去启用多核编译。同时有文件系统缓存,即使在重启构建后也能快速再编译。
![](https://filescdn.proginn.com/88b996580d2c1ad80d58f2e1078d601f/14878ef1b4dbde768bf01c1d64ac94f9.webp)