精华 coolie(苦力)-完善的前端开发构建工具
发布于 5 年前 作者 cloudcome 12354 次浏览 最后一次编辑是 4 年前 来自 分享

系列专辑 http://FrontEndDev.org/column/introduce-coolie/

1、大环境

如今,随着模块化思想的流行,越来越多的前端开发已经介入到模块化开发当中来了,模块化约定和规范也更加的完整,ECMAScript 也已经将其纳入标准制定计划当中。因此,可以说前端模块化是一个大趋势,更是随着 NodeJS 的风靡,加速了这一过程。本文及接下来的几篇文章介绍的 coolie(苦力),是模块化的一个相对完整的实现和解决方案。

2、coolie介绍

coolie,苦力。模块好比是集装箱,coolie 是搬运合适集装箱的一个苦力,因此请善待它。coolie 分为两部分,一部分是前端模块加载器,另一部分是前端发布工具。

  • 模块加载器:参考了业界比较流行的模块化加载器 seajs,以及其他比较流行的模块加载器。
  • 前端发布工具:参考了 seajs 的模块构建工具 spmjs,以及其他比较流行的模块构建工具。

为什么不使用seajs或是其他业界流行的解决方案呢?

coolie 作为模块加载器,更加的纯净,API 接口非常的简单,几乎零配置。以至于书写模块的时候与 nodejs 几乎一致,只是头尾增加了 define 包裹。当然,nodejs 模块的运行也是如此,运行过程中会添加 define 包裹。业界中比较流行的 模块加载器为了支持各种特性添加了各种配置,纷乱繁杂,增加用户的选择成本和学习成本。coolie 的简约是它的一个亮点,并且 coolie 目前只兼容 IE9 以上浏览器,高级特性使它保持了良好的身材。

coolie 作为前端发布工具,完整的解决了模块的依赖分析、依赖构建、模块压缩等,以及 CSS、HTML 的压缩合并等。使用简单,容易入门,没有各种复杂配置,只需要一条命令即可完成一个发布。与其他模块构建工具相比,coolie 的特色在于能够压缩模块的路径为单个字符,发布之后动态版本号,不会造成缓存困扰。

开发与生产环境的代码对比

img.png

img.png

img.png

img.png

3、下载安装

3.1、安装 nodejs

nodejs 是一个基于 Chrome V8 引擎的服务平台,使用 nodejs 可以创建 web 程序,本地应用等项目,使用 Javascript 编码,具有的无阻塞异步特性。访问 nodejs 官网,按照指定操作系统来安装 nodejs。

3.2、安装 coolie

在安装完成 nodejs 后,系统已经有了2个命令,分别是 node 和 npm。node 是运行程序,npm 是 nodejs 包管理服务(nodejs package manager)。

coolie 是全局模块,因此需要全局安装:

npm install -g coolie

参数 g 的意思是 global,表示全局安装。

安装完成后,在命令窗口输入

coolie

即可看到如下信息

img.png

如果你之前已经下载过 coolie,建议你检查下最新的版本号。

img.png

4、必备知识

在接下来的文章里,将指引如何使用 coolie 以及 coolie 的执行原理,为了更好的理解,你可能需要预先了解以下知识。

  • 如何使用命令,在 cmd、终端里使用命令行操作。
  • 了解 AMD、CMD、CommonJS 之间的区别。
  • 具有模块化编程的理念。
  • 能够使用模块化编程。
  • 生产环境与开发环境之间的代码区别。
  • 前端发布过程具体需要涉及哪些方面。
  • 如何在生产环境下前端最优化。

5、参考链接

18 回复

挺好,不过为啥不基于gulp呢?

@i5ting

有大量的定制东西,没有相对应的 gulp 插件。

@cloudcome 还是挺辛苦的,加油~坚持做下去

好东西,加油

向云老大学习~:P

和gulp有啥关系?

@chapgaga 和 gulp 没关系

这个和百度fis的关系是什么,建议还是合并到gulp生态系统里比较好~~

应接不暇,, 刚刚学会gulp,出了个duo,加上之前学的grunt,我整个人都凌乱了 大前端吃不消

@cloudcome 所以只能用grunt? 或者用gulp造个轮子?

@shuson 还有个yoman啥的

做这么一套东西出来,花了不少功夫吧,楼主厉害! 接触node这么多年有很多东西都设想过,最后只做了个半成品的dproxy,现在连我自己都不用了… 可惜了,没像做产品需求一样坚持下来。 楼主加油

@chapgaga yeoman MEAN,scaffolding too many

给力啊!!

谢谢楼上的这么多回复。

coolie 目前没有和其他产品做详细比较,但她的几个优点还是可以说下的:

1、与 fis 之间的区别:开发环境不需要实时编译,以前怎么写现在还是怎么写,只需要 NodeJS 即可,不需要 PHP、JAVA 2、亮点:支持构建模块路径压缩,100字符长的模块路径都可以转换成1个字符,因此不需要模块别名等乱七八糟的东西,貌似 webpack 可以实现 3、按需版本控制:只有被引用到的资源才会拥有完善的版本控制,样式、模块、图片、字体等都可以纳入静态资源版本控制 4、与 grunt、gulp 之间的区别:没有繁杂的插件,一个命令到底

其他前端构建工具不是太了解,至少基本没有发现任何其他一个 node 模块已实现上述完整过程。

coolie 是完整的前端开发构建工具,其中模块加载需要 coolie.js(https://github.com/cloudcome/coolie) 支持。目前还是处于开发和推广阶段,也用于企业生产环境,以及自己的社区网站(http://Frontenddev.org/)。

更多细节参考社区专辑介绍页http://frontenddev.org/column/introduce-coolie/

没看懂咋用。

回到顶部