基于"去哪儿网"fekit的模块化开发

fekit是由国内去哪儿网公司开发的一款前端自动化构建工具.

WHAT?何为自动化构建工具,是一款写代码的软件吗?NO!NO!NO!构建工具,说白了就是用来让我们不再做机械重复的事情,解放我们的双手的。辅助我们开发的!我也习惯叫打包工具,出了名的构建工具有grunt,gulp,webpack(facebook开发的),CoffeeScript/EC6等等



基于
fekit

前端不只是切图仔!前端是一项工程!


由于是国内开发的产品,对于很多有心理障碍的公司来说,压根都不想用它,但是我们学习使用它,对于一些小型的项目,足够可以应付得了了。


好的,开始入门~~

首先fekit是基于node开发的,所以要保证你的开发环境已经安装node

1.安装fekit,cnpm(npm) install –g fekit   (cnpm是转向国内淘宝镜像安装路径,如果你的网速够慢,就用cnpm)。安装好之后,我们直接在cmd里输入fekit命令查看是否出现了帮助文档

2.运行命令fekit init是初始化fekit项目的操作,然后可以查看一下fekit的项目结构,里面有src目录以及fekit.config等主要文件,fekit.config其实是一个json文件格式内容,里面包含了compiler(modular/component)等参数,alias、export等参数设置。

3.我们可以在src目录下建立一个index.html文件。但是我们的目标是通过http://localhost/..../index.html来打开我们的index.html文件,其本质就是建立起fekit的本地服务器。

4.建立fekit的本地服务器可以通过运行命令fekit server或者fekit srever –p 8080等端口号来进行不同的项目同一时间的开发操作)

5.我们的目标是实现本地的环境和最终服务器上的生产环境一致,甚至是包括域名在开发的时候也希望和以后正式的网站项目一样显示,需要修改window/system32/drivers/etc/hosts文件,将127.0.0.1指向到你所需要的域名,比如127.0.0.1 www.ahshx.gov.cn,注意需要保存成功以后才能运行。

6.在src目录下建立scripts目录,在src/scripts下新建index.js文件;

7.首先在index.js里console.log(‘index.js’),然后在index.html里引入index.js文件,注意引入的地址;10.在scripts下建立common目录,然后在common下建立utils目录,并在该目录下创建dateUtil.js以及stringUtil.js,然后在这两个文件中创建相应的对象内容,对象内容里包含相应的方法操作;

8.注意,如果想让dateUtil.js和stringUtil.js的对象能够被index.js所引用,必须使用module.exports进行接口暴露;

9.在index.js中利用require进行模块引入,路径是我们的全路径;

10.在index.html里引入index.js并运行,发现“出错啦”----require is not defined

11.将index.html里的路径进行修改,将修改成,重新运行,发现“出错啦”---- 404文件未找到

12.修改我们的fekit.config文件,在export里加入“scripts/index.js”进行入口文件的导出;

13.直接刷新index.html发现dateUtil被index.js所引入了,并且能够执行dateUtil的方法;

14.查看index.html的源代码,发现只引入index.js一个文件,但是点击查看index.js的源文件发现document.write了三次,并且我们在查看netwrok网络资源的时候发现有4次js 的http的请求,这似乎有违背我们的目标。

15.返回cmd命令行模式,ctrl+c进行任务的中断,重新运行命令fekit server –c,发现所有的dateUtil/stringUtil/index.js全部合并成了一个index.js文件,并且index.js文件里的源代码我们看不太懂了。但是经过测试发现我们的dateUtil.js里的方法最终只被引入了一次,实现了模块化开发的功能。但是介于dns解析时间及速度的问题,可能不一定马上就能够进行本地域名级别的访问操作。

16.Css的模块化操作非常简单,和js的模块化开发的方式是一致的,首先我们创建styles/modules/n1.scss,styles/modules/n2.css不同的类型样式文件,然后在styles/index.css里进行

require(‘./modules/n1.scss’);

require(‘./modules/n2. css’);

模块文件的引入操作,也可以利用import进行文件的引入

@import url('./modules/m1.css');

@import url('./modules/m2.css');

17.修改index.html,将index.css引入到index.html中,需要在fekit.config里的export中加入”styles/index.css”入口文件的导出操作

18.我们可以在fekit.config里设置我们的alias别名,通过类似

“utils”:“src/scripts/common/utils/”这样的方式缩短我们require的路径,然后我们在进行require引入文件的时候就不再存在相对路径的问题,require的方式可以有utils/dateUtil.js,utils/dateUtil,utils.dateUtil等方式。

19.注意:修改完fekit.config的配置文件以后千万要记得重启fekit server...命令!!!

20.我们创建src/scripts/mock/skill.json、detail.json.....等json数据文件,还有mock.conf,配置mock.conf文件的内容,主要有两个参数:pattern、respondwith,mock.conf主要解决的是模拟数据的内容以及URL的接口地址路径。

21.要正确运行mock数据的地址需要运行命令:fekit server –m ./scr/scripts/mock/mock.conf –p 8000 –c

22.在index.js中可以直接require我们的jquery模块,利用$.post进行json数据操作。

23.但是发现从官网下载的zepto并不支持CommonJs规范,所以进行require操作无法运行。所以我们需要解决该问题可以向自己提出相应的关键字,比如:zepto commonjs module(注意:别用百度这个垃圾了)

24.https://www.npmjs.com/package/commonjs-zepto这个zepto模块是支持commonjs规范的,所以将它复制到src/scripts/common/commonjs-zepto。

25.修改index.js,利用require进行zepto的引入,可以单个的引入zepto的部分模块,比如event/ajax等。

26.现在可以利用zepto进行$.post进行数据请求操作等。


基于
grunt

grunt同样也是一款前端构建工具,详情请查看官网  grunt官网

你可能感兴趣的:(基于"去哪儿网"fekit的模块化开发)