前端构建工具对比



前言

前端生态日益健壮(2019年4月),各种工具层出不穷,首先关于前端一些热门名词,于此作出简单的概要。

  • node , 是javascript语言的环境和平台,
  • npm , yarn , bower 是一类,包管理,
  • webpack , browserify , rollup 是一类,javascript模块打包方案(方案+工具+插件),
  • babel, TypeScript, 算是一类,ES编译器,
  • requirejs , seajs 是一类, 以前基于 commonjs,amd,cmd,umd 之类的模块类包加载方案的框架,
  • grunt , gulp , 前端工具,结合插件,合并、压缩、编译 sass/less,browser 自动载入资源,
  • react , angular , vue , backbone 是一类,mvc , mvvm , mvp 之类的前端框架,
  • jquery , zepto , prototype 是一类,前端 DOM , BOM 类库 ,
  • ext , yui , kissy , dojo 是一类,前端应用组件,以前大而全的解决方案,
  • rxjs , lodash , underscore , ramda , immutable , moment , mathjs 是一类,JavaScript Utility Libraries,
  • JSLint , JSHint , JSCS , ESLint , 是一类,代码检验,
  • Ionic , NativeScript , React Native , Flutter , PhoneGap/Cordova , Xamarin 算是一类,Cross-Platform 开发工具,
  • Less , Sa|css , Stylus , PostCSS , 是一类,CSS 程式化方案,
  • Karma , Protractor , 测试

此篇主要讲前端构建工具。既然本篇主要聊的时”构建化”,那么第一个问题来了:

为什使用构建化工具?

一句话:自动化。对于需要反复重复的任务,例如压缩(minification)、编译、单元测试、linting等,自动化工具可以减轻你的劳动,简化你的工作。当你在 Gruntfile 文件正确配置好了任务,
任务运行器就会自动帮你或你的小组完成大部分无聊的工作。

Webpack、Browserify 和 Gulp 三者之间到底是怎样的关系?

简单的说,Grunt / Gulp 和 browserify / webpack 不是一回事。

  1. Gulp / Grunt 可以理解为帮助前端自动化的工具,用于优化前端工作流程。比如自动刷新页面、combo、压缩css、js、编译less等等。二者的区别可以自行百度,个人推荐Gulp。
  2. browserify / webpack 提供的是一个前端模块化的方案,和requirejs类似但又有不同。
  3. requirejs是一种在线”编译” 模块的方案,相当于在页面上加载一个AMD 解释器,以便于览器能够识别 define、exports、module,而这些东西就是用于模块化的关键。
  4. 而browserify / webpack,则是一个预编译模块的方案。它是预编译的,不需要在浏览器中加载解释器。

因此完全可以gulp+webpack 或者gulp+browserify这样的方式搭配使用,甚至,只使用webpack,由于其强大的插件支持,也能满足绝大多数需求了。

Grunt && Gulp

-------------The End-------------
0%