https://github.com/bravf/fepack
一款配置简单、功能强大的前端构建工具
https://github.com/bravf/fepack
Last synced: 6 months ago
JSON representation
一款配置简单、功能强大的前端构建工具
- Host: GitHub
- URL: https://github.com/bravf/fepack
- Owner: bravf
- Created: 2016-09-07T05:37:01.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2018-11-19T02:17:01.000Z (over 7 years ago)
- Last Synced: 2025-10-26T01:20:48.535Z (9 months ago)
- Language: JavaScript
- Homepage:
- Size: 1.14 MB
- Stars: 21
- Watchers: 3
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# fepack
[](https://www.npmjs.org/package/fepack)
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模式 `, `）
3. 文件压缩
4. 源文件常量注入
5. 文件大小检测，主要是图片文件，默认大于200k报警
6. 增加velocity模板语法支持，[用法](https://github.com/bravf/fepack/tree/master/test/vm)
7. 支持jade文件mock，默认会去根目录mock目录下查找路径相同的js文件，比如 mock/index.data.js
## 模块加载
### fepack支持browserify式的模块加载
```js
// 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
```js
{
"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": []
}
}
}
}
```