1、大环境

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

2、coolie介绍

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

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

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

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

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、参考链接