开始使用
安装
boi以命令行工具的形式工作,使用npm全局安装:
npm install boi -g
国内网络环境下访问npm仓库比较缓慢,可以将npm仓库地址修改为国内淘宝镜像:
npm config set registry https://registry.npm.taobao.org
或者使用cnpm安装:
cnpm install boi -g
安装成功后,你可以使用boi脚手架创建一个新的boi项目,或者按照配置文档将已存项目改造为boi项目。
脚手架
使用下述命令创建一个新的boi项目:
boi new <dirnam> -t boiapp
如果不指定dirname
或者取值为.
或./
将会在当前目录创建项目;如果dirname
为合法的目录名称,将会创建以diename
命名的新文件夹并在新文件夹内创建项目文件。
更多的脚手架使用细节请参照脚手架文档。
编译
在项目根目录下执行:
boi build <env>
通过<env>
指定构建项目的环境。build
命令默认在testing
环境下编译,生产环境下编译运行以下命令:
boi build prod
编译成功后,默认输出目录为dest
。
关于boi环境配置的细节请参阅编译环境配置。
兼容性
浏览器版本
boi作为一种工具,不会限制编译生成文件的浏览器兼容性(这也是为何选择webpack v1版本的原因)。但是boi封装的对ES2015/2016规范的默认编译方案只兼容IE8以上浏览器。如果要兼容更低版本的浏览器,可按照配置文档自行配置。
虽然目前IE8浏览器市场份额占有度不高,但是国内的市场环境下,部分产品是必须要兼容IE8的,比如面向政府的项目以及地图等大众项目。所以,后续boi会封装一套兼容IE8的编译方案以及开发规范,敬请期待。
Node.js版本
boi支持v4及以上的Node.js版本,但是考虑到性能因素建议尽量使用v5及以上版本。
本地服务器
boi提供一个本地服务容器,方便前端工程师独立开发。在项目根目录下运行serve
命令:
boi serve
如果项目中只存在一个
index.*.html
文件,直接访问localhost:8888
即可;如果项目中存在多个
index.*.html
文件,访问localhost:8888/*.html
或者或者完整路径localhost:8888/<views dir>/*.html
(views路径和html文件名可自行配置)。
本地服务器默认监听
8888
端口。
浏览器自动刷新
本地服务器支持浏览器自动刷新,开发过程中已存文件的内容修改保存后会动态编译并且出发浏览器自动刷新,无需重启本地服务器。但如果增加新文件或者已存文件重命名,则必须重启本地服务器才可看到效果。
本地服务器详细功能配置请参阅本地服务器。
Mock服务
本地服务器同时集成了Mock服务,前端工程师可以自行定义接口名称和返回数据,比如有以下配置:
boi.mock({
'GET /login?$name&pwd': {
ok: {
code: 100,
msg: '登录成功',
data: {
user: 'boi'
}
},
fail: {
code: 101,
msg: '登录失败'
}
}
});
客户端浏览器对api/login
发起请求后,Mock服务器会根据参数的完整性决定返回ok
或者fail
数据。
关于Mock的详细功能配置请参阅Mock。
部署
编译完成之后,执行以下命令将生成的代码部署到远程服务器:
boi deploy <env>
其中env
可选testing
或prod
,分别对应测试服务器和线上服务器。
boi部署功能使用ftp作为传输协议,所以需要接受服务器提供ftp服务和上传权限。部署的详细功能配置可参阅远程部署。