Code Monkey home page Code Monkey logo

fekit's Introduction

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 {命令名} --help

fekit.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 ) ->

如何增加一个项目自定义的编译处理类型

  1. 请在项目中增加编译模块,可以是一个文件,也可以是一个目录,目录的话默认入口文件位该目录下的index.js
  2. 在项目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)
}

fekit's People

Contributors

danxinju avatar dmfeng avatar edwonlim avatar kyriosli avatar netwjx avatar rinh avatar yashiro1899 avatar zhiyan avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

fekit's Issues

希望支持 web conponents

如通过 HTML import 引入的资源:
<link rel="import" href="google-map.html">

google-map.html 是一个 web conponent 资源,希望 fekit 支持类似资源 开发,构建,发布,而不仅仅是 css 和 js。
这样就可以使用 polymer (http://www.polymer-project.org/) 等基于 web conponent 实现的框架了。

fekit modules 常用写法

因为手里要做的东西需要对fekit modules作处理,所以收集了fekit modules使用的常见上下文,如果有遗漏和错误的地方,求帮忙指正。

fekit modules Usage

使用module.exports导出构造函数

Calculation.js

//将构造函数Calculation通过module.exports导出
function Calculation() {
}

Calculation.prototype.add = function(x, y) {
    return x + y;
};

module.exports = Calculation;

使用exports导出方法

math.js

exports.add = function() {
    var sum = 0, i = 0, args = arguments, l = args.length;
    while (i < l) {
        sum += args[i++];
    }
    return sum;
};

increment.js

var add = require('math').add;

exports.increment = function(val) {
    return add(val, 1);
};

无任何导出,功能是执行函数或者向全局对象添加方法

add.js

//向avalon添加add方法
function add(){
    var sum = 0, i = 0, args = arguments, l = args.length;
    while (i < l) {
        sum += args[i++];
    }
    return sum;
}

avalon.add = add;

作为入口,引入需要的包

//引入avalon json2.js 及jquery
require('avalon');
require('json2');
require('jquery');

require支持目录

require('a/b')
如果 b是一个目录且有 index.js 直接把 a/b/index.js 引进来

config文件增加urlmap

比如说我现在export需要需出这么一些文件

"scripts/scal/release/booking.js",
"scripts/scal/release/index.js",
"scripts/scal/release/list.js",
"scripts/hnair/release/booking.js",
"scripts/hnair/release/index.js",
"scripts/hnair/release/list.js"

而类似scal、hnair这样的site可能有很多,所以现在我会把scal这样的替换掉,再写一遍在exports里,如果比较多,就会重复写n遍。
所以我的需求就是:
可不可以将scal这部分做成自动替换,我可以通过写一个数组[scal, hnari ...]来自动生成基本重复的exports

删除源上的组件时加入版本号的输入验证

场景:
一个组件已经有两位数以上的子版本,将要删除最新的一个版本0.0.13,在删除的时候输入:

fekit unpublish [email protected]

现在输出:

prompt:are you sure? : (no)

能否考虑输出如下:

prompt:which version u want to unpublish?

用户可以在这个时候再次对要删除的版本进行验证,此时输入的版本号必须和unpublish时输入的版本号一致才生效。防止在输入unpublish命令时记错了版本号删除了错误的版本。

CSS压缩结果可读性调整

CSS压缩结果改为每一个样式定义单独一行,保持所有选择器都在行首的结构,适度增强生产环境的代码可读性

增加编译输出时, 上级模块引用判断

目前在编译时, 只会关注当前模块的引用. 但实际情况是, 当页面引用a.js b.js, 而这两个模块同时又引用了c.js, 那么编译的时候a和b均会引用c.

为了解决这个问题, 在配置文件fekit.config的export中, 可以将配置修改为

{
    "export": [
        "a.js" , 
        { path : "b.js" , parents : [ "a.js" ] }
    ]
}

fekit sync 子目录

在一些较大工程目录下,进行 fekit sync 将会比较耗时,而开发者仅仅想同步某子目录

fekit server -r 在windows下有问题

在windows下通过fekit server -r的路由功能指定其他物理地址时css文件的路径有问题。
比如flagship_1, fekit server请求得到对应的文件,但是对应文件中所有相对路径转换成具体路径时原flagship_1会变成flagship_1_1。

require文件名中包含 .vm 字符串的文件时存在bug

require('./xxxx.vmodel.js'); 的时候,此模块没有被引入;
改成 require('./xxxx.model.js'); 就可以了,
同时尝试require('./xxxx.vm.js'); 也是无法引入的;

结论:
引入文件名中包含 .vm 字符串的文件时存在bug;

首文件可以使用非 js , css

  1. 可以在config export中指定非 js , css 等文件,编译后,输出至 dev , prd 目录将生成对应 js , css 文件 。
  2. 开发时,在页面中引用原本的 export 中定义的 coffee, less 等文件 ,使用 fekit server 进行调试的时候,也可正确解析为原文件。 举例 :访问 index.coffee 或 index.js 均解析为 js

组件版本号递归检查

安装时需要递归检查版本号

假设有pkg1, pkg2两个模块
pkg1有 0.0.1 版本
pkg2有 0.0.1 和 0.0.2 版本

情景1

pkg1的依赖为

{
    "pkg2" : "*"
}

项目中使用了 pkg1 和 pkg2,依赖配置为

{
     "pkg1" : "0.0.1" , 
     "pkg2" : "0.0.2" 
}


项目中下载 [email protected] [email protected]
pkg1中不下载

情景2

pkg1的依赖为

{
    "pkg2" : "0.0.1"
}

项目中使用了 pkg1 和 pkg2,依赖配置为

{
     "pkg1" : "0.0.1" , 
     "pkg2" : "0.0.2" 
}


项目中下载 [email protected] [email protected]
pkg1中下载 [email protected]

缺乏反向代理机制

由于很多调试需要反向代理机制,类似fiddler一样,直接把线上接口映射到本地代码。

fekit test 的时候出现SyntaxError: Unexpected token ILLEGAL

在调用fekit test 的时候出现
d:\Program Files\nodejs\node_modules\fekit\node_modules.bin\mocha:2
basedir=dirname "$0"
SyntaxError: Unexpected token ILLEGAL。
请问这怎么解决,还有,目前fekit是否支持angular的unit 和e2e 测试

在server功能中, 将文件加载拆分

目前server功能中, 调用文件是编译并合并之后的

修改为按文件引用顺序 , 单独加载

compiler
增加单文件非依赖编译方式, 即

  • 只处理当前文件内容 , 而不解决依赖问题
  • 依赖方式可以被重写并输出成任意内容

server

  • 在文件调用时, 参数加上no_dependencies=true , 则将文件编译为非依赖模式

基于非依赖编译方式, 所有正常调用的文件均是依赖模式, 重写该文件的依赖方式, 以非依赖模式加载子模块, 实现将文件加载拆分

将程序结构改为支持回调

理由是, 各种支持库有的只提供异步调用方案, 为了不放弃这些库, 所以要改

需要注意的点是

  1. 当发生错误的时候依然返回error 1

在fekit.config中增加scripts

增加节点

scripts :  {
  "premin" : "./build/premin.js" , 
  "postmin" : "./build/postmin.js" ,
  "prepack" : "./build/prepack.js" , 
  "postpack" : "./build/postpack.js"
}

每一项均为 hook , 在 min 开始或结束后 与 pack 开始时或结束后会调用执行 指定位置的任意javascript文件

你可以使用全局变量 EXPORT_LIST

其结构为

[ 
   { 
      url : '源文件文件的物理路径' , 
      path : '源文件相对于根目录的路径' , 
      ver : '编译后的version版本号' ,
      minpath : '编译后的相对于根目录的路径, 包含版本号'
   }  
]

ver与minpath只在postmin时才会有

feikit install error

fekit install calendarCore
[LOG] fekit http GET http://l-registry.fe.dev.cn6.qunar.com:3300/calendarCore/
[LOG] fekit http GET http://l-registry.fe.dev.cn6.qunar.com:3300/jquery/
[LOG] fekit http GET http://l-registry.fe.dev.cn6.qunar.com:3300/dateUtil/
[LOG] fekit http GET http://l-registry.fe.dev.cn6.qunar.com:3300/calendarCore/-/calendarCore-0.0.1.tgz
[LOG] fekit http GET http://l-registry.fe.dev.cn6.qunar.com:3300/jquery/-/jquery-1.9.1.tgz

events.js:72
throw er; // Unhandled 'error' event
^
Error: EACCES, open '/Users/kangjia/workspace/temp/fekit_modules/calendarCore/fekit_modules/jquery/src/index.js'

fekit install dateUtil
[LOG] fekit http GET http://l-registry.fe.dev.cn6.qunar.com:3300/dateUtil/
[LOG] fekit http GET http://l-registry.fe.dev.cn6.qunar.com:3300/dateUtil/-/dateUtil-0.0.2.tgz

stream.js:94
throw er; // Unhandled stream error in pipe.
^
Error: EACCES, mkdir '/Users/kangjia/workspace/temp/fekit_modules/dateUtil/.git/branches'

增加 EXPORT_MAP

EXPORT_MAP 为object , 内容与EXPORT_LIST一致 , 但为 key-value 格式 , key 与 fekit.config 中配置一致

动态require

增加dynamic_require关键词, 方便动态加载js文件

文件增加时间戳

诉求是能够通过查看文件的时间戳确定文件的发布版本以及更新时间。

应用场景:在线上环境代码出现问题时,可以通过时间戳检验文件版本。

增加模块化支持

增加2种编译方式
Modular模式: 会将 import 和 require 以标准AMD方案的变化(Asynchronous Module Definition)进行处理, 模块内的内容将以exports或return对外提供接口
普通模式: 会将 import 和 require 引用的文件 inline 进文件中

  1. @import@require 修改为 import 和 require
  2. 在fekit.config中添加配置是否模块化编译的支持
    默认为 "compiler" : false , 如果为false则使用普通模式 , 其它值有 "modular"
  3. 完成模块化模式

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.