fekit前端代码模块化工具

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开发一个简单的项目,实现模块化

时间: 2024-08-03 20:49:24

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

极客标签:可能是目前最好的前端代码学习工具

英国著名作家萧伯纳有一句名言:"两个人交换了苹果,每个人手里还是只有一个苹果:但是两个人交换了思想,每个人就同时有了两个人的思想."这说的是知识的分享对于人类进步的重要意义.时间到了现代,技术进步带给人们更多样化的沟通方式.可是,当人们交换各种类型的知识的时候,却发现依然没那么容易. 绝大多数有学问的人都选择了出书:网络的普及也让各种各样的博客出现,之后则是微信公众号的天下:也有人选择了言传身教的现代版--录制讲学视频. 但以上的各种方式都不适合编程学习,特别是web设计方面的学习.你

grunt前端代码管理工具的使用方法(by_shiyou)

中文官网:http://www.gruntjs.net/ 本文为自己整理的使用方法,本意是希望快速使用grunt上手并使用到项目中,具体grunt里面的很多进阶型功能可以会陆续补充: 第一步:先安装nodejs(Grunt和 Grunt 插件是通过 npm 安装并管理的,npm是 Node.js 的包管理器) 方法:https://nodejs.org/en/download/(这是nodejs官网下载页面,选择对于的下载即可) 第二步:安装grunt  命令:npm install -g gr

前端模块化工具-webpack

详解前端模块化工具-webpack webpack是一个module bundler,抛开博大精深的汉字问题,我们暂且管他叫'模块管理工具'.随着js能做的事情越来越多,浏览器.服务器,js似乎无处不在,这时,使日渐增多的js代码变得合理有序就显得尤为必要,也应运而生了很多模块化工具.从服务器端到浏览器端,从原生的没有模块系统的`<script>`到基于Commonjs和AMD规范的实现到ES6 modules.为了模块化和更好的模块化,我们总是走在探索的路上. 但是这些实现模块化的方法或多或

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

从开发文件到生产文件   有一天我突然意识到一个问题,在使用react框架搭建应用时,我使用到了sass/less,JSX模版以及ES6的语法在编辑器下进行开发,使用这些写法是可以提高开发的效率.可是浏览器它本身是并不能够"理解"这些语法的呀.就像下面这张图: 在开发代码文件 --> 生产代码文件的转换过程中,我们到底需要做些什么呢?没错,这一切都和webpack(或gulp)有关: 转一张webpack官网的图,webpack能把less/sass文件,json文件,乃至css

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

以下是关于前端项目模块化的实践,包含以下内容: 搭建 NPM 私有仓库管理源码及依赖: 使用 Webpack 打包基础设施代码: 使用 TypeScript 编写可靠类库 (实现中) 本文是关于前端项目模板化的第2部分 现状 实际项目远远比示例使用的 myGreeting 复杂,比如 为了提高可维护性我们将项目折成了许多功能模板: 我们希望使用 Promise 等语法等,但是顾忌目标环境的支持能力: 可能依赖了多个第三方类库: 为了提高加载速度我们打包时需要进行很多额外工作: 代码压缩: Tre

Duang~Duang~Duang 还在使用jsfiddle和jsbin做在线前端代码展示和演示吗? 试试更强大的在线代码分享工具吧!

传统的代码分享工具JSbin和JSfilddle jsfiddle和jsbin可能是前端开发中最早最常用的代码“把玩”工具,拥有大量的粉丝和用户,作为前端开发攻城师来说,我个人过去也常常使用. 不过作为国外的服务和产品,加载速度非常不理解,经常半天加载不上,如下图: 而且最重要的在于大量的CDN引用JS/CSS来自于Google CDN,大家也明白,天朝不再给Google发VISA啦,所有的Google域名下的服务或者文件都无法正常访问.除非你FQ!使用非常不流畅滴说!,如下图: 轻视频代码分享

前端构建和模块化工具-coolie

[前言] 如果你之前用过前端模块化工具:seajs,requirejs, 用过前端构建工具grunt.gulp, 并且感到了一些不方便和痛苦,那么你可以试试coolie [coolie] 本文不是一篇介绍coolie的文章,而是偏向新手上手coolie的常见问题解答, coolie相关: 社区文章:http://frontenddev.org/column/introduce-coolie/ git-book:http://coolie.ydr.me/index.html [知识储备] 如果你没

使用mini-define实现前端代码的模块化管理

这篇文章主要介绍了使用mini-define实现前端代码的模块化管理,十分不错的一篇文章,这里推荐给有需要的小伙伴. mini-define 依据require实现的简易的前端模块化框架.如果你不想花时间学习require.js,也不想翻看长篇的cmd/amd规范,那么这个mini-define就是你不错的选择.如果你之前用过sea.js或require.js那么mini-define更加高效,更加轻量,更加易用.项目地址:github 用法 首先定义模块 定义模块 一:定义模块用define函

前端代码性能优化工具

转自:http://segmentfault.com/a/1190000002585760 Google Closure Compiler 官网:https://developers.google.com/closure/compiler/ Closure Compiler的使用方法有如下3种: 在命令行下使用一个google编译好的java程序 使用google提供的在线服务 使用google提供的RESTful API 首先需要下载compiler-latest.zip,由于可能有的用户没法