前端开发服务框架

在你的工作目录（假设为workspace）通过npm命令安装：npm install mok-js

还要执行全局安装命令：npm install -g mok-js

在你的工作目录里创建名为mok-config.js的文件，mokjs的所有配置都写在这个文件里，包括服务器监听端口号和各种配置。

此时你的工作目录结构如下：

mok-config.js示例内容如下：

在工作目录workspace下执行命令：mok，即可启动mokjs。

如果按上面的示例配置mokjs，那么在浏览器地址栏访问http://localhost将能看到“D:/www/”里的内容。

步骤1：从1144@GitHub下载mokjs的示例包demos，放到workspace里。

步骤2：把node_modules/mok-js/mok-config.js这个文件复制到workspace下（覆盖前面创建的那个mok-config.js）。

步骤3：执行命令mok启动mokjs；打开系统hosts文件配置这几个hosts：127.0.0.1 blog.cn m.com s.m.com。

点击http://blog.cn/index.html即可看到JS模块化和CSS模块化的运行结果。下面会讲解模块化是如何跑起来的。

点击http://m.com/即可看到HTML模块化的运行结果。

demos的目录结构说明：

下面以blog项目为例讲解模块化是怎么跑起来的。

blog的部分目录结构：

index.html文件的代码：

在浏览器里访问http://blog.cn/index.html时，mokjs根据mok-config.js里的路由配置将此请求定位到static下的index.html，并输出文件内容。

同样地，http://blog.cn/js/base.js会被根据路由配置将请求转发给mokjs进行处理：首先从blog项目的入口文件目录（src-node/main）里找到base.js文件，读取文件内容，然后根据模块化语法分析文件依赖关系，最后按一定规则合并输出所有被依赖的文件的内容。这样浏览器得到的就是一个完整可执行的JS文件。

对于http://blog.cn/css/main/test.css请求也是一样，mokjs会按照CSS的模块化语法分析依赖关系、合并文件内容输出给浏览器。

因为目前大部分前端开发人员都是在windows下开发，开发过程中也很少使用系统命令窗口，所以mokjs特意提供了一些内建命令，这些命令都是在浏览器地址栏里输入执行。这些命令主要完成项目构建工作。

执行命令之前，需要打开hosts文件，配置这个host：127.0.0.1 mokjs。

1、合并压缩项目文件（适用于JS、CSS项目）
　　mokjs/-项目名称-b 或 mokjs/-项目名称-build
　　例如：mokjs/-blog-b
　　压缩还支持传入版本号（或叫tag号）。
　　命令：mokjs/-项目名称-b-v=版本号
　　例如：mokjs/-blog-b-v=18 这里版本号是18

2、构建HTML项目（适用于HTML项目）
　　mokjs/-项目名称-b 或 mokjs/-项目名称-build

3、切换测试压缩文件模式（适用于JS、CSS项目）
　　mokjs/-项目名称-min
　　例如：mokjs/-blog-min
　　合并压缩完项目文件之后，可以执行这个命令，之后浏览器在请求项目js或css文件的时候，请求到的就是合并压缩过的文件，相当于模拟线上测试。再次执行这个命令，可以取消测试压缩文件，进入开发调试状态。

当然，也可以不配置mokjs这个host，其实可以把以上命令中的mokjs替换成任何一个指向127.0.0.1的域名，或者直接使用127.0.0.1都行。端口号不是80的时候请加上端口号。

主要原理是：mokjs提供一些后端服务功能，接收浏览器的请求，mokjs根据配置文件里的路由表，将请求转发给不同的处理程序进行处理，这些处理程序就包括JS/CSS/HTML模块化语法处理、静态资源输出、代理转发请求等等。

配置文件里还要提供项目配置，在处理请求时作为数据、参数供处理程序使用。

所以，对于mokjs已有功能来说，学会了配置，就学会了mokjs！

一般项目分为JS项目、CSS项目和HTML项目，JS项目的配置方法请看这里，CSS项目和HTML项目的配置方法请看这里。

骚年，开始你的项目实战吧~