iloka-fis
v1.0.0
Published
易上手的前端构建工具,基于 fis3,面向业务项目和业务组件,支持simple、webpage、webapp、component四种模式。
Downloads
10
Readme
iloka-fis (内测版)
易上手的前端构建工具,基于 fis3,面向业务项目和业务组件,支持simple、webpage、webapp、component四种模式。
安装方法
npm install -g iloka-fis
iloka-fis -v
使用方法
使用方法和fis3一致,此外提供四种模式整套配置。
脚手架使用
脚手架请查看 https://github.com/rosettech
使用规则:
iloka-fis init <github username>/<github project>@<version>
简写:
iloka-fis init component 等价于 iloka-fis install rosettech/component@latest
iloka-fis init react 等价于 iloka-fis install rosettech/react@latest
iloka-fis init vue 等价于 iloka-fis install rosettech/vue@latest
默认配置选项
var config = {
project: {
// 项目名称
name: '',
// 项目版本号,填了后自动替换源码中@VERSION@标识,不填则由ci-shell来替换,没有CI环境时必须设置
version: '',
// 静态资源部署目录
statics: '/asset',
// 业务入口, 入口的设置方式决定了打包的方式
// entry(直接设置文件入口路径): '/app/m/index.js' => /asset/pkg/app.js /asset/pkg/app.css
// entry(设置app/单业务入口标识)-推荐: ['m'] => /asset/pkg/lib.js /asset/pkg/lib.css /asset/pkg/app.js /asset/pkg/app.css
// entry(设置app/多业务入口标识)-推荐: ['marketing', 'platform'] /asset/pkg/lib.js /asset/pkg/lib.css /asset/pkg/common.js /asset/pkg/common.css /asset/pkg/{entry}.js /asset/pkg/{entry}.css
entry: [],
// 项目调试的服务环境:(local|dev|sit|uat|prd),填了后自动替换源码中@ENV@标识,不填则不替换
debugENV: '',
// 是否在调试模式下(非media)合并后开启 SourceMap 功能,启用后watch状态要3s+生效,相对比较慢,但方便调试
useSourceMap: false,
// eslint配置文件 http://eslint.org/
eslintrc: {},
// stylelint配置文件 https://stylelint.io/
stylelintrc: {}
},
environment: {
// 开发环境
development: {
// 静态资源的域名
domain: '',
// 是否优化
optimizer: true,
// 是否打包
packager: true
},
// 测试环境
testing: {
// 静态资源的域名
domain: '',
// 是否优化
optimizer: true,
// 是否打包
packager: true
},
// 生产环境
production: {
// 静态资源的域名
domain: '',
// 是否优化
optimizer: true,
// 是否打包
packager: true
}
}
};
simple 配置模式
fis.simple(config);
webpage 配置模式
fis.webpage(config);
webapp 配置模式
fis.webapp(config);
component 配置模式
var pkg = require('./package');
var eslintrc = require('./.eslintrc');
var stylelintrc = fis.util.readJSON('./.stylelintrc');
// 项目基础配置
fis.component({
project: {
// 项目名称
name: pkg.name,
// 项目版本号,填了后自动替换源码中@VERSION@标识,不填则由ci-shell来替换,没有CI环境时必须设置
version: pkg.version,
// eslint配置文件 http://eslint.org/
eslintrc: eslintrc,
// stylelint配置文件 https://stylelint.io/
stylelintrc: stylelintrc
}
});
配置示例
fis-conf.js
var pkg = require('./package');
// 项目基础配置
fis.webapp({
project: {
// 项目名称
name: pkg.name,
// 业务入口
entry: ['m'],
// eslint配置文件
eslintrc: fis.util.readJSON('./.eslintrc'),
// stylelint配置文件
stylelintrc: fis.util.readJSON('./.stylelintrc')
},
environment: {
// 开发环境
development: {
domain: ''
},
// 测试环境
testing: {
domain: ''
},
// 生产环境
production: {
domain: 'http://cdn.xxx.com/${project.name}'
}
}
});
// 项目拓展配置
已使用项目
- 上海诺石科技有限公司
- 艾乐卡官网:webpage配置模式,使用的生态模块有 jQuery、artTemplate、Beetl等。
- 艾乐卡微站:webapp配置模式,使用的生态模块有 lodash、vue、vuex、vux等。
- 艾乐卡资讯编辑器:webapp配置模式,使用的生态模块有 lodash、react、redux、antd、ueditor等。
- 艾乐卡活动编辑器:webapp配置模式,使用的生态模块有 lodash、react、redux、antd、heditor等。
- 艾乐卡营销中心:webapp配置模式,使用的生态模块有 lodash、react、redux、antd等。
- 小云雀:webapp配置模式,使用的生态模块有 lodash、react、redux、antd.mobile等。
- ...
- 更多
TODO
- [ ] 说明文档
- [ ] 配置示例
- [ ] 项目示例
- [ ] 使用教程
- [ ] 测试用例