基于"去哪儿网"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官网

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,590评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 86,808评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,151评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,779评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,773评论 5 367
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,656评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,022评论 3 398
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,678评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 41,038评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,659评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,756评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,411评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,005评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,973评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,203评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,053评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,495评论 2 343

推荐阅读更多精彩内容