fepack

2.5.3 • Public • Published

fepack

Version

fepack是面向前端的工程构建工具。解决前端工程中资源加载、模块化开发、自动化工具、代码部署等问题。

1、安装全局依赖
npm install -g typescript
gem install compass

2、安装fepack
npm install -g fepack

例子

mkdir my-proj
cd my-proj

fepack init // 生成fepack.json,配置看后文介绍
fepack release dev
fepack server start

在浏览器中打开127.0.0.1:8080

支持功能

  1. 语法增强,支持

    (typescript,es6,coffee) => es5
    sass => css
    (jade,md) => html
    jsx => js
    
  2. 静态资源加版本号(支持.html inline模式 <script src="a.js" inline></script>, <link href="a.css" inline>

  3. 文件压缩

  4. 源文件常量注入

  5. 文件大小检测,主要是图片文件,默认大于200k报警

  6. 增加velocity模板语法支持,用法

  7. 支持jade文件mock,默认会去根目录mock目录下查找路径相同的js文件,比如 mock/index.data.js

模块加载

fepack支持browserify式的模块加载

// require业务js文件
let head = require('./head.js')
 
// require 4种格式模板文件
let headTemplate = require('./head.tpl')
require('./head.html')
require('./head.jade')
require('./head.md')
 
// require css
// index.css内容会被以style tag方式插入到head里
// cssModule代表生成的style tag
let cssModule = require('./index.css')
 
// require npm安装的node包(不支持依赖native环境的包)
// 在项目根目录npm install --save cookie
let cookie = require('cookie')

fepack.json

{
    "server": {
 
        //server监听的端口
        "port": 8080    
    },
    "release": {
 
        //项目名,会加到被引用的资源前
        "project": "",  
 
        //域名,会加到被引用的资源前
        "domain": "//s1.mljr.com",
 
        //是否开启coffee编译
        "coffee": "false", //默认不开启(如果开启,需要提前全局安装coffeescript, npm install -g coffee-script)
 
        //编译实例
        "cases": {
            "dev": {
                "optimize": false,
                "version": true,
                "watch": true,
 
                //常量注入
                //js里使用:let a = "@{FEPACK.aa}" => let a = "aaaa"
                //jade里使用: #{FEPACK.aa}
                "env": {    
                    "aa": "aaaa",
                    "bb": "bbbb",
                    "a": "cc"
                }
            },
            "qa": {
                //是否压缩,默认false
                "optimize": true,
 
                //是否加版本号,默认false
                "version": true,
 
                //是否watch,默认false  
                "watch": false,
 
                //是否启用域名,默认false  
                "domain": true,
 
                //覆盖全局的domain
                "reDomain": "//s2.mljr.com",
 
                 //指定编译结果目录,
                 //默认为/Users/${user}/.fedog-tmp/www
                "www": "../www",
                
                //如果指定为ture,则保留page目录下的jade文件不编译,主要用来发布时server端使用,并且会强制开启optimize
                "jadeKeep" : false
            }
        },
 
        // 设置文件原样复制,中间不做任何处理
        "copy": [
            "**/*.min.js",
            "static/script/copy/**/*"
        ],
 
        // 设置文件忽略
        "ignore": [
            "static/script/ignore/**/*",
            "fepack.json"
        ],
 
        // 设置全局模块引用
        "externals": {
            "jquery": "window.$"
        },
 
        // 设置postcss配置
        "postcss": {
            "autoprefixer": {"browsers": ["last 2 versions", "iOS 7", "Android 4.4", "> 5%"]},
            "pxtorem": {
                "root_value": 40,
                "prop_white_list": []
            }
        }
    }
}

Dependencies (18)

Dev Dependencies (0)

    Package Sidebar

    Install

    npm i fepack

    Weekly Downloads

    11

    Version

    2.5.3

    License

    ISC

    Unpacked Size

    163 kB

    Total Files

    39

    Last publish

    Collaborators

    • bravf