fekit是一套前端开发工具,是由去哪儿网开发。目前在github上开源。使用fekit的优点:

a.本地开发支持环境:从开发调试到上线,均是前后端工程独立开发、调试、部署,打破了原来前后端揉在一个工程的做法。 
  b.静态文件编译:可以将css、js、模版等fekit支持的文件编译,同时用require的方式来解决各模块的依赖问题。 
  c.css、js资源版本号问题:fekit工程发布完成之后,会将变化的css、js资源版本号以文件的方式发布到maven仓库里,这样后端工程在发布的时候按照预先配置好的fekit工程,去maven仓库将这些版本文件拉下来,然后可以在后端模版里直接引用。下面是一个简单的例子:

fekit依赖node.js,所以在使用fekit之前需要给自己的电脑安装node。本人使用的是Mac,电脑已经安装了homebrew,打开命令行输入brew install node即可安装好node。验证node是否安装成功,输入node -v.     npm是node自带的一个工具,所以当安装好node的时候,也就可以使用npm来安装一些我们需要的插件。本文需要的fekit也是通过npm实现的安装。

1.fekit 的安装

命令行输入 npm install fekit -g       验证fekit安装成功的方法   命令行输入 fekit

2.通过fekit来创建一个项目

自己先选好一个目录,在这个目录下执行fekit init 命令,然后就会出现下面的结果

当前目录会出现这四个文件夹    fekit.config文件夹中的内容解释如下

3.本地开发调试

使用fekit启动一个服务  在创建上述项目的目录中,输入fekit server

端口启动成功

在浏览器中打开index.html文件夹

默认端口是80  这个端口号也可以改变

以上就是一些环境的配置和端口的配置。下一篇博客我将使用fekit开发一个简单的项目,实现模块化

fekit前端代码模块化工具的更多相关文章

  1. JS代码检查工具ESLint

    前面的话 ESLint是一个JavaScript代码静态检查工具,可以检查JavaScript的语法错误,提示潜在的bug,可以有效提高代码质量,维持前端团队高度一致的编码风格.ESLint不但提供一 ...

  2. Web前端开发最佳实践(2):前端代码重构

    前言 代码重构是业内经常讨论的一个热门话题,重构指的是在不改变代码外部行为的情况下进行源代码修改,所以重构之前需要考虑的是重构后如何才能保证外部行为不改变.对于后端代码来说,可以通过大量的自动化测试来 ...

  3. 窥探原理:实现一个简单的前端代码打包器 Roid

    roid roid 是一个极其简单的打包软件,使用 node.js 开发而成,看完本文,你可以实现一个非常简单的,但是又有实际用途的前端代码打包工具. 如果不想看教程,直接看代码的(全部注释):点击地 ...

  4. Webpack:前端资源模块化管理和打包工具

    一.介绍: Webpack 是当下最热门的前端资源模块化管理和打包工具.它可以将许多松散的模块按照依赖和规则打包成符合生 产环境部署的前端资源.还可以将按需加载的模块进行代码分隔,等到实际需要的时候再 ...

  5. 前端模块化工具-webpack

    详解前端模块化工具-webpack webpack是一个module bundler,抛开博大精深的汉字问题,我们暂且管他叫'模块管理工具'.随着js能做的事情越来越多,浏览器.服务器,js似乎无处不 ...

  6. 【webpack学习笔记(一)】流行的前端模块化工具webpack初探

    从开发文件到生产文件   有一天我突然意识到一个问题,在使用react框架搭建应用时,我使用到了sass/less,JSX模版以及ES6的语法在编辑器下进行开发,使用这些写法是可以提高开发的效率.可是 ...

  7. 【webpack】流行的前端模块化工具webpack初探

    从开发文件到生产文件   有一天我突然意识到一个问题,在使用react框架搭建应用时,我使用到了sass/less,JSX模版以及ES6的语法在编辑器下进行开发,使用这些写法是可以提高开发的效率.可是 ...

  8. 前端项目模块化的实践2:使用 Webpack 打包基础设施代码

    以下是关于前端项目模块化的实践,包含以下内容: 搭建 NPM 私有仓库管理源码及依赖: 使用 Webpack 打包基础设施代码: 使用 TypeScript 编写可靠类库 使用 TypeScript ...

  9. 详解前端模块化工具-webpack

    webpack是一个module bundler,抛开博大精深的汉字问题,我们暂且管他叫'模块管理工具'.随着js能做的事情越来越多,浏览器.服务器,js似乎无处不在,这时,使日渐增多的js代码变得合 ...

随机推荐

  1. Entity Framework快速入门笔记—增删改查

    第一步:创建一个控制台应用程序,起名为EFDemo 2. 第二步:创建一个实体模型 (1)在EFDemo项目上面右击选择添加—新建项—在已安装的选项中选择数据—ADO.NET实体对象模型,如图所示: ...

  2. 最小生成树之Prim算法,Kruskal算法

    Prim算法 1 .概览 普里姆算法(Prim算法),图论中的一种算法,可在加权连通图里搜索最小生成树.意即由此算法搜索到的边子集所构成的树中,不但包括了连通图里的所有顶点(英语:Vertex (gr ...

  3. MD5Helper辅助类

    DES加密和解密 public class MD5Helper { ///DES加密 ///sKey public string MD5Encrypt(string pToEncrypt, strin ...

  4. 基于Noootes/Dooomino的文档工作流系统(转)

    (流程样例应用程序终于整理上传好可供下载了http://download.csdn.net/download/starrow/8422299) 上文分析了我们的流程配置使用三类对象,分别对应三类文档: ...

  5. [SAM4N学习笔记]按键程序(查询方式)

    一.准备工作:      将上一节搭建的工程复制一份,命名为"5.key scanf".这一节主要讲如何使用SAM4N的GPIO输入功能,实现按键的输入. 二.程序编写:      ...

  6. Linux I2C设备驱动编写(三)-实例分析AM3359

    TI-AM3359 I2C适配器实例分析 I2C Spec简述 特性: 兼容飞利浦I2C 2.1版本规格 支持标准模式(100K bits/s)和快速模式(400K bits/s) 多路接收.发送模式 ...

  7. OpenCL memory object 之 传输优化

    转载自:http://www.cnblogs.com/mikewolf2002/archive/2011/12/18/2291741.html 首先我们了解一些优化时候的术语及其定义: 1.defer ...

  8. Yii常用技巧总结

    //YII framework路径 Yii::getFrameworkPath(); //protected/runtime Yii::app()->getRuntimePath(); //pr ...

  9. AX2012服务器配置--Windows Server 2012 如何实现多个用户远程桌面登陆?

    Windows Server 2012 如何实现多个用户远程桌面登陆?说明:Windows Server 2012默认情况下,只运行2个用户远程桌面登陆,这里我们可以通过安装远程桌面会话主机配置来实现 ...

  10. ABAP ALV DEMO示例源码

    关于ALV表格颜色,感觉这种需求在项目中用到的时候不是很多,但是前一段时间面试的时候,面试官问了我关于ALV单元格颜色的问题. 以前了解过一点,回答的不是很好,后来百度了一下,大概了解了一些,今天工作 ...