A simple CLI for serve and build web app, support JSON pattern config.
一个简单的CLI工具,无需复杂的配置,轻松的构建和调试项目。
Bee 是 create-react-app 和 roadhog 的克隆版,根据团队和自己日常开发的需求修改的一个版本。
Prerequisites: Node.js (>=6.9, 7.x preferred) and Git.
$ npm install -g bees-cli
本地开发
$ bee server
打包发布
$ bee build
bee server 支持 mock 功能,类似 dora-plugin-proxy,在 .beerc.mock.js
中进行配置,支持基于 require 动态分析的实时刷新,支持 ES6 语法,以及友好的出错提示。
比如:
export default {
// 支持值为 Object 和 Array
'GET /api/users': { users: [1,2] },
// GET POST 可省略
'/api/users/1': { id: 1 },
// 支持自定义函数,API 参考 express@4
'POST /api/users/create': (req, res) => { res.end('OK'); },
};
配置文件修改的修改会触发 bee server 的自动重启,会触发重启的文件有:
.beerc
.beerc.js
.beerc.mock.js
关于配置的一些基本概念:
- 配置存于
.beerc
文件中(如果你不喜欢 JSON 配置,可以用.beerc.js
以 JS 的方式编写,支持 ES6) - 格式为
JSON
,允许注释 - 布尔类型的配置项默认值均为
false
- 支持通过
webpack.config.js
以编码的方式进行配置,但不推荐,因为 bee 本身的 major 或 minor 升级可能会引起兼容问题。使用时会给予警告⚠️ ⚠️ ⚠️ , 。(webpack.config.js
本身的编写支持 ES6,会通过 babal-register 做一层转换。)
.beerc 默认配置:
{
"entry": "src/index.js",
"publicPath": "/",
"extraBabelPresets": [],
"extraBabelPlugins": [],
"extraPostCSSPlugins": [],
"cssSourceMap": false,
"analyze": false,
"autoprefixer": null,
"externals": null,
"multipage": false,
"define": null,
"proxy": null,
"env": null
}
.beerc 的 React开发配置:
{
"entry": "src/index.js",
"publicPath": "/",
"extraBabelPresets": [
"react"
],
"extraBabelPlugins": [
"transform-runtime"
],
"autoprefixer": null,
"externals": null,
"multipage": true,
"define": null,
"proxy": null,
"env": {
"development": {
"cssSourceMap": false
},
"production": {
"cssSourceMap": true,
"analyze": true
}
}
}
package.json 的 React开发配置:
{
"babel-preset-react": "",
"babel-plugin-transform-runtime": ""
}
指定 webpack 入口文件,支持 glob 格式。
如果你的项目是多页类型,会希望把 src/pages
的文件作为入口。可以这样配:
"entry": "src/pages/*.js"
配置生产环境的 publicPath,开发环境下永远为 /
。
配置额外的 babel plugin。babel plugin 只能添加,不允许覆盖和删除。
配置 autoprefixer 参数,详见 autoprefixer 和 browserslist。
比如,如果是做移动端的开发,可以配成:
"autoprefixer": {
"browsers": [
"iOS >= 8", "Android >= 4"
]
}
配置代理,详见 webpack-dev-server#proxy。(注意:仅支持 JSON 格式的配置,不支持 bypass
。)
如果要代理请求到其他服务器,可以这样配:
"proxy": {
"/api": {
"target": "http://jsonplaceholder.typicode.com/",
"changeOrigin": true,
"pathRewrite": { "^/api" : "" }
}
}
然后访问 /api/users
就能访问到 http://jsonplaceholder.typicode.com/users 的数据。
如果要做数据 mock,可以考虑和 json-server 或者 mock-server 结合使用,把 /api
代理到 json-server 或者 mock-server 启动的端口。
配置 webpack 的 externals 属性。
配置是否多页应用。多页应用会自动提取公共部分为 common.js 和 common.css 。
配置 webpack 的 DefinePlugin 插件,define 的值会自动做 JSON.stringify
处理。
在生产环境下开启 Visualizer
"env": {
"production": {
"analyze": true
}
}
针对特定的环境进行配置。server 的环境变量是 development
,build 的环境变量是 production
。
比如:
"env": {
"development": {
"cssSourceMap": false
},
"production": {
"cssSourceMap": true
}
}
这样,在 development 下不开启 CSS 的 SourceMap, 在 production 下开启 CSS 的 SourceMap
这样,开发环境下 CSS 的 SourceMap 是 "cssSourceMap": false
,而生产环境下是 "cssSourceMap": true
。
可环境变量临时配置一些参数,包括:
PORT
, 端口号,默认 8000HOST
, 默认 localhostHTTPS
,是否开启 https,默认关闭
比如,使用 12306 端口开启服务器可以这样:
// OS X, Linux
$ PORT=12306 bee server
// Windows (cmd.exe)
$ set PORT=12306&&bee server
$ bee server -h
Usage: bee server [options]
Options:
--open Open url in browser after started [boolean] [default: true]
-h Show help [boolean]
$ bee build -h
Usage: bee build [options]
Options:
--debug Build without compress [boolean] [default: false]
--watch, -w Watch file changes and rebuild [boolean] [default: false]
--output-path, -o Specify output path [string] [default: null]
[boolean] [default: false]
-h Show help [boolean]
$ bee test -h
Usage: bee test [options] [mocha-options]
Options:
--coverage Output coverage [boolean] [default: false]
-h Show help [boolean]
我们约定 public
目录下的文件会在 server 和 build 时被自动 copy 到输出目录(默认是 ./dist
)下。所以可以在这里存放 favicon, iconfont, html, html 里引用的图片等。