前端开发服务框架

从这里开始使用mokjs

安装

在你的工作目录(假设为workspace)通过npm命令安装:npm install mok-js

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

配置

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

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

workspace/ ├─ node_modules/ │ ├─ .bin/ │ └─ mok-js/ └─ mok-config.js

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

启动

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

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

运行demos

步骤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的目录结构说明:

demos/ ├─ blog/ - JS模块化示例 │ ├─ build - 构建目录 │ ├─ src-node - 遵循CommonJS Modules模块化规范(像Node.js一样)的项目源码 │ ├─ src-define - 遵循CMD模块化规范的项目源码 │ └─ static - 静态资源(HTML页面、图片等) ├─ css/ - CSS模块化示例 ├─ css-build/ - CSS项目构建目录 ├─ html/ - HTML模块化示例 └─ www/ - HTML项目构建目录

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

blog的部分目录结构:

blog/ ├─ src-node/ - 像node.js一样写模块 │ ├─ core/ │ └─ main/ - JS的入口文件目录 │ ├─ article.js │ ├─ base.js │ └─ index.js └─ static/ ├─ article.html └─ index.html

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/-项目名称-bmokjs/-项目名称-build
  例如:mokjs/-blog-b
  压缩还支持传入版本号(或叫tag号)。
  命令:mokjs/-项目名称-b-v=版本号
  例如:mokjs/-blog-b-v=18 这里版本号是18

2、构建HTML项目(适用于HTML项目)
  mokjs/-项目名称-bmokjs/-项目名称-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提供一些后端服务功能,接收浏览器的请求,mokjs根据配置文件里的路由表,将请求转发给不同的处理程序进行处理,这些处理程序就包括JS/CSS/HTML模块化语法处理、静态资源输出、代理转发请求等等。

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

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

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

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