fekit
v0.2.148
Published
FE Toolkit
Downloads
288
Readme
FEKIT
fekit是什么?
fekit是一套前端开发工具, 其中包含了
- 本地开发支持环境
- 静态文件编译 css / js
- 组件源服务
- 开发辅助工具等
如何安装
安装前提
nodejs & npm
https://nodejs.org/en/download/
安装
npm install fekit -g
npm config set user 0
npm config set unsafe-perm true使用
fekit {命令名} --helpfekit.config
{
// 编译方案, 参考 [issue #1](https://github.com/rinh/fekit/issues/1)
"compiler" : false 或 "modular" 或 "component" ,
// 如果是组件，需要有如下节点
"name" : "hello1" , // 组件名称
"version" : "0.0.1" , // 遵循semver
"author" : "rinh" , // 作者名
"email" : "[email protected]" , // 作者邮箱
"description" : "" , // 组件描述
"main" : "home" , //指定某个文件作为包入口, 该路径以src目录为根. 默认使用 src/index
// 依赖的组件
"dependencies" : {
"dialog" : "1.2.*"
} ,
// 别名的配置, 该库作为编译时, @import url 和 require 使用
"alias" : {
"core" : "./src/core" /* 该路径相对于当前fekit.config文件 */
} ,
// 在本地开发时(fekit server)，需要用到的一些配置
"development" : {
// 自定义依赖解决方案
// 指向一个js脚本，运行环境是 nodejs
// 请指定入口函数为 exports.render = function( context )
// context 内容为:
// {
// type : 'javascript 或 css' , 文件类型
// path : '..' , 当前文件的物理路径
// url : '..' , 当前文件的引用路径
// base_path : '..' , 当前文件的父级物理路径
// }
"custom_render_dependencies" : "./build/runtime.js" ,
// 在 vm 模板使用 parse 解析文件时，如果指定了该配置项，则以该项为根目录解析
"velocity_root" : "./vm/"
} ,
// 配置导出使用的全局参数
"export_global_config" : {
// 优先级为 页面 > 全局
"domain_mapping" : "domain.com => img1.domain.com img2.domain.com img3.domain.com img4.domain.com"
} ,
// 将要导出至 `prd` 和 `dev` 目录的文件列表
// 其中所有路径, 均相对于 `src` 目录
"export" : [
// 第一种配置方式, 直接写出要导出的文件相对路径
"./scripts/page-a.js" ,
// 第二种配置方式, 当要导出的文件, 在实际使用时有上级依赖, 则可以将上级依赖的文件加入`parents`节点
{
"path" : "./scripts/page-b.js" ,
"parents" : [ "./scripts/page-a.js" ]
} ,
// 允许某个文件不含版本号信息
// 参考: https://github.com/rinh/fekit/issues/11
{
"path" : "./scripts/page-c.js" ,
"no_version" : true
} ,
// 允许 css 使用 domain_mapping 功能
{
"path" : "./scripts/page-a.css" ,
"domain_mapping" : "domain.com => img1.domain.com img2.domain.com img3.domain.com img4.domain.com"
}
] ,
// 自动化hook脚本, 请参考 https://github.com/rinh/fekit/issues/10 , https://github.com/rinh/fekit/issues/12
"scripts" : {
"premin" : "./build/premin.js" ,
"postmin" : "./build/premin.js" ,
"prepack" : "./build/premin.js" ,
"postpack" : "./build/premin.js" ,
"prepublish" : "./build/prepublish.js"
} ,
// 自定义编译参数
"min" : {
"config" : {
// 参数名及含义见: https://github.com/fmarcia/UglifyCSS
"uglifycss" : {} ,
// 参数名及含义见: https://github.com/mishoo/UglifyJS
"uglifyjs" : {
"compressor" : {
// 参考 https://www.npmjs.com/package/uglify-js#compressor-options
} ,
"beautifier" : {
// 参考 https://www.npmjs.com/package/uglify-js#beautifier-options
}
}
}
} ,
// 发布其它文件
"refs" : {
// copy 命令 , 将 ver 目录复制到 refs 中
"cp" : [ "ver" ]
// 自定义脚本, 当前目录为项目目录, 可以制定任意内容
// 全局对象可以使用
// path , file , cwd , refs_path
"sh" : "./auto.js"
},
// 项目自定义build方案
"build": {
".jsx": { // 后缀名
"path": "./build" // 编译文件所在路径，配置目录则为该目录下的index.js，该路径相遇于当前fekit.config文件，推荐项目中新建build目录
}
}
}为fekit贡献代码
fekit是一个插件化, 易于扩展的工具集, 如果你愿意为它增加功能, 请看下面的内容
开发外部扩展请使用 fekit extension template
fekit所有源码全部使用coffeescript开发
- bin - 放置可执行文件
- lib - 执行代码(编译结果,请不要修改)
- src - 源码
- test - 单元测试
- testcase - 测试用例, 模拟了一个真实项目的case
- Cakefile - 部署文件
如何增加一个命令
请在src/commands增加文件 {命令名}.coffee
一个命令请包含如下内容
# 命令的使用说明
exports.usage = "使用说明"
# 命令的参数定义, 请参考optimist的使用方法
exports.set_options = (optimist) ->
# 命令入口
exports.run = (options) ->如何增加一个编译处理类型
请在src/compiler/plugins增加文件 {编译处理后缀名}.coffee
其中必须存在的方法是
# 决定该编译方式是用于哪类处理
exports.contentType = "javascript 或 css"
# 处理方法
# @source 待处理文件的内容
# @path 待处理文件的路径
# @callback( err , result ) 处理完成的回调
# 返回结果应该编译结果
exports.process = ( source , path , callback ) ->如何增加一个项目自定义的编译处理类型
- 请在项目中增加编译模块，可以是一个文件，也可以是一个目录，目录的话默认入口文件位该目录下的index.js
- 在项目fekit.confg中增加build配置，配置内容见上面fekit.config说明
其中入口文件必须存在的方法是
// 决定该编译方式是用于哪类处理
exports.contentType = "javascript 或 css"
// 处理方法
// @source 待处理文件的内容
// @path 待处理文件的路径
// @module 当前正在处理的模块
// @callback( err , result ) 处理完成的回调
// 返回结果应该编译结果
exports.process = function(source, path, module, callback) {
// do something
callback(err, result)
}