从这里开始使用mokjs
安装
-
在你的工作目录(假设为workspace)通过npm命令安装:
npm install mok-js 还要执行全局安装命令:
npm install -g mok-js
配置
-
在你的工作目录里创建名为
mok-config.js 的文件,mokjs的所有配置都写在这个文件里,包括服务器监听端口号和各种配置。此时你的工作目录结构如下:
workspace/ ├─ node_modules/ │ ├─ .bin/ │ └─ mok-js/ └─ mok-config.jsmok-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.htmlindex.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 这里版本号是182、构建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的时候请加上端口号。