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开发一个简单的项目,实现模块化
fekit前端代码模块化工具的更多相关文章
- JS代码检查工具ESLint
前面的话 ESLint是一个JavaScript代码静态检查工具,可以检查JavaScript的语法错误,提示潜在的bug,可以有效提高代码质量,维持前端团队高度一致的编码风格.ESLint不但提供一 ...
- Web前端开发最佳实践(2):前端代码重构
前言 代码重构是业内经常讨论的一个热门话题,重构指的是在不改变代码外部行为的情况下进行源代码修改,所以重构之前需要考虑的是重构后如何才能保证外部行为不改变.对于后端代码来说,可以通过大量的自动化测试来 ...
- 窥探原理:实现一个简单的前端代码打包器 Roid
roid roid 是一个极其简单的打包软件,使用 node.js 开发而成,看完本文,你可以实现一个非常简单的,但是又有实际用途的前端代码打包工具. 如果不想看教程,直接看代码的(全部注释):点击地 ...
- Webpack:前端资源模块化管理和打包工具
一.介绍: Webpack 是当下最热门的前端资源模块化管理和打包工具.它可以将许多松散的模块按照依赖和规则打包成符合生 产环境部署的前端资源.还可以将按需加载的模块进行代码分隔,等到实际需要的时候再 ...
- 前端模块化工具-webpack
详解前端模块化工具-webpack webpack是一个module bundler,抛开博大精深的汉字问题,我们暂且管他叫'模块管理工具'.随着js能做的事情越来越多,浏览器.服务器,js似乎无处不 ...
- 【webpack学习笔记(一)】流行的前端模块化工具webpack初探
从开发文件到生产文件 有一天我突然意识到一个问题,在使用react框架搭建应用时,我使用到了sass/less,JSX模版以及ES6的语法在编辑器下进行开发,使用这些写法是可以提高开发的效率.可是 ...
- 【webpack】流行的前端模块化工具webpack初探
从开发文件到生产文件 有一天我突然意识到一个问题,在使用react框架搭建应用时,我使用到了sass/less,JSX模版以及ES6的语法在编辑器下进行开发,使用这些写法是可以提高开发的效率.可是 ...
- 前端项目模块化的实践2:使用 Webpack 打包基础设施代码
以下是关于前端项目模块化的实践,包含以下内容: 搭建 NPM 私有仓库管理源码及依赖: 使用 Webpack 打包基础设施代码: 使用 TypeScript 编写可靠类库 使用 TypeScript ...
- 详解前端模块化工具-webpack
webpack是一个module bundler,抛开博大精深的汉字问题,我们暂且管他叫'模块管理工具'.随着js能做的事情越来越多,浏览器.服务器,js似乎无处不在,这时,使日渐增多的js代码变得合 ...
随机推荐
- Android线程计时器实现
cocos2dx的计时器很好用,但当app进入后台,其计时器会pause掉,如果想要一个稳恒计时器就得自己去实现完成了,在Cocos2d-x for ios中我们可以利用NSTimer类并结合objc ...
- 【好文转载c++】 sizeof 使用的经典总结
为了在人面前畅快的吹牛逼,你必须学会背后努力 -----张小二. 写在转载之前: sizeof到底是多少?本来我没有关注,只是有次室友问了我几个sizeof的问题,我被问住了,他当时问我了sizeo ...
- html自定义checkbox、radio、select —— select篇
上一篇<html自定义checkbox.radio.select —— checkbox.radio篇>介绍了我们是怎么将 html 自带的 checkbox.radio 改成我们自定义的 ...
- shell脚本采用crontab定时备份数据库日志
测试服务器上才用定时脚本备份一个数据库 并打包压缩成tar避免文件过大 脚本如下: 测试服务器的shell backup_mysql.sh #!/bin/bash BASE_PATH=/alidata ...
- ASP.NET MVC- Controllers and Routing- Routing
二.Creating Custom Routes In this tutorial, you learn how to add a custom route to an ASP.NET MVC ap ...
- java数据结构--线性结构
一.数据结构 数据结构由数据和结构两部分组成,就是将数据按照一定的结构组合起来,这样不同的组合方式有不同的效率,可根据需求选择不同的结构应用在相应在场景.数据结构大致 分为两类:线性结构(如数组,链表 ...
- Winform DataTable 客户端操作数据
//创建 DataTable DataTable dt = new DataTable(); dt.Columns.Add("ID"); dt.Columns.Add(" ...
- 理解事件捕获。在限制范围内拖拽div+吸附+事件捕获
一.实现的效果是在限制范围内拖拽div+吸附+事件捕获. 这里需要理解的是事件捕获,这个事件捕获也是为了兼容div在拖拽过程中,文本不被选中这个问题. 如此良辰美景,拖拽也可以很洒脱哈.先看看图, 二 ...
- VM下的linux系统上不了网?? 使用putty远程登录不上linux的解决方法?
背景:昨晚想尝试一下用putty远程登录我的linux系统,悲剧的是,我竟然连接不上,显示 connection refused ,连接被拒绝.于是我就想看看能不能在linux下看看能不能访问百度 ...
- UDP打洞和心跳包设计
一.设备终端class DeviceClient { int deviceID; int IP; int port; char connectID[16]; time_t lastTime; stru ...