ae-biu

# AE-BIU 🔫🔫🔫 > Born For [AE](http://git.sdp.nd/component-h5/aeae), Born To Do 🎉🚀👊 > 为 [AE](http://git.sdp.nd/component-h5/aeae) 而生，生来就是干 🎉🚀👊 ## 环境 - `Node`: `^8.0.0` - `npm`: `^5` ## 安装 ```bash npm install -g ae-biu ``` ## 发布发布前请仔细了解[发布流程](./RELEASE.md) ## 包含功能 - 初始化项目 ```bash # 使用 master 分支作为模板 ae init # 使用指定分支或者 tag 作为模板 ae init -b <branch-name|tag-name> ``` - 提取多语言文件 ```bash # 使用 package.json 中定义的所有语言 ae i18n # 指定语言 ae i18n -l en-US,en-GB ae i18n --lang en-US,en-GB # 非扁平模式 ae i18n -u ae i18n --no-flat ``` - 本地开发 ```bash ae dev ``` - 打包部署 ```bash ae build ``` - 静态文件服务(模拟生产环境) ```bash ae start ``` - 启动 `Mock` ```bash ae mock ``` - 更多命令 ```bash ae help ``` ## 最佳实践 1. 安装 `ae-biu` 1. 初始化项目 `ae init` 1. `cd <项目文件夹>` 1. 启动本地服务 `ae dev`，默认对接共享平台测试环境，可通过设置 `process.env.SDP_ENV` 更改 1. 打包部署 `ae build`，默认打包目录为 `./dist`，可在 `package.json > ae > output` 中指定 ## 主题定制 `AE` 目前有一套默认的主题，如需定制或修改，只需在 `package.json` 中设置 `ae > theme` 即可。主题分为 `AE` 与 `Fish` 两部分，可分别设置。 ```json { "ae": { "theme": { "ae": {}, "fish": {} } } } ``` ### Fish `Fish` 主题自定义请参考[文档](http://fish-docs.dev.web.nd/docs/react/customize-theme-cn)，通过 `ae-biu`，`fish` 可支持 `JSON` 或者 `JSON` 文件的方式设置。 ### AE `AE` 主题支持 `JSON` 或者 `JSON` 文件的方式，目前 `AE` 主题如下 ```json { "white": "#FFFFFF", "black": "#000000", "red": "#FF5745", "blue": "#2D8CF0", "aside_width": "250px", "page_min_width": "980px" } ``` 如需更多主题项，[`issues are welcome`](http://git.sdp.nd/component-h5/aeae/issues) ## 自定义 `webpack` 配置 `ae-biu` 支持自定义 `webpack` 配置，只需要在和 `package.json` 同级目录下放置 `webpack` 配置文件即可，优先级为：`webpack.config.babel.js` > `webpack.config.js` > `webpack.js` 支持返回 `function` 或者 `object` ```javascript // function way export default (config) => { // handle config with your code return config } ``` ```javascript // object way export default { // webpack config } ``` ## 首页 `template` 首页模板已被整合入 [`ae-biu`](/template)。包括 `uc 1.0` 以及 `uc 0.93` 两个版本，默认为 `1.0`，如需切换只需在 `package.json > ae > uc` 指定即可。默认设置的组织名为 `nd`，如需重新设置只需在 `package.json > ae > org` 指定即可。 ```json { "ae": { "org": "ndtest", "uc": "0.93" } } ``` 也可以自定义模板，只需在 `package.json > ae > template` 指定模板路径即可。 ## 多语言 `ae-biu` 在初始化之时会默认设置多语言为`简体中文(zh-CN)`与`英文(en)`，如需更多语言或修改，可在 `package.json > ae > languages` 中修改，这些修改将会同步反馈到主题的语言选择中。 ```json { "ae": { "languages": [ "zh-CN", "en" ] } } ``` 目前 `AE` 支持的多语言如下，如需更多支持，[`issues are welcome`](http://git.sdp.nd/component-h5/aeae/issues) ```json { "zh-CN": "简体中文", "zh-HK": "繁体中文", "en": "English", "id": "Bahasa Indonesia", "th": "ภาษาไทย", "ar": "العربية" } ``` ## Mock Server `ae-biu` 支持 `Mock Server`，其底层依赖于 [`Express`](https://github.com/expressjs/express) 与 [`json-server`](https://github.com/typicode/json-server)，并在 `json-server` 的基础之上添加了 [`REST API`](http://doc.sdp.nd/index.php?title=RESTAPI%E8%A7%84%E8%8C%83-List) 支持，目前支持以下参数: - `$filter` - `$offset` - `$limit` - `$orderby` > `$count` 由于 `json-server` 限制不能支持，但可以参考 `json-server` 文档获取此值若要使用 `Mock Server`，需要在与 `package.json` 同级目录下创建 `mock/db.json` 即可，`db.json` 格式请参考 `json-server` 通过 `ae mock` 启动 `Mock Server` 之后，建议配合 `Charles` 的 `MapRemote` 或者 `Fiddler` 的 `AutoResponder` 实现真实地址映射本地地址，实现更友好的 `Mock Server` ## 为多语言文件增加 `hash` 从 [`v1.3.0`](http://git.sdp.nd/fed/ae-biu/commit/5d0ddc6abfb32bbf17386640d32c122a571cd082) 开始，`ae-biu` 将支持为多语言文件增加 `hash`，格式为 `[lang].[hash].json`，仅在 `ae build` 下生效若需要为多语言文件增加 `hash`，将 `package.json > ae > addHashForI18N` 设置为 `true` 即可 ## 添加 `polyfills` 若需要添加 `polyfills`，只需要在 `package.json > ae > polyfills` 中添加即可，如： ``` json { "ae": { "polyfills": [ "fetch-polyfill" ] } } ``` 举个栗子：[ae-boilerplate/mock-uc](http://git.sdp.nd/fed/ae-boilerplate/tree/mock-uc) ## Todo - [x] `ae init` - [x] `ae i18n` - [x] `ae build` - [x] `ae dev` - [x] ~~`ae lint`~~ - [x] ~~`ae test`~~ ***废弃***, 请使用 `ae unit` 以及 `ae e2e` - [x] `ae e2e` - [ ] `ae unit` - [x] `ae start` - [x] `ae mock` > 还有很多细节需要优化，欢迎提出 [issue](http://git.sdp.nd/fed/ae-biu/issues) 或者 [MR](http://git.sdp.nd/fed/ae-biu/merge_requests/new)，但请遵循[贡献指南](/CONTRIBUTING.md)