Skip to content

Commit 2339bd3

Browse files
codingstarnighca
authored andcommitted
增加 build-config.json 的描述文件 (#120)
* add build-config schema * add build-config.md * adjust schema markdown * add shema2md * update readme * fix review * fix review2
1 parent 206ef20 commit 2339bd3

File tree

7 files changed

+748
-201
lines changed

7 files changed

+748
-201
lines changed

README.md

+2-168
Original file line numberDiff line numberDiff line change
@@ -45,175 +45,9 @@ npm 包与 docker 镜像的对比,优点:
4545

4646
### build-config.json 的配置
4747

48-
* extends
49-
50-
作为基础进行扩展的配置信息名,不填写该字段会默认使用 [`default`](https://github.com/Front-End-Engineering-Cloud/builder/blob/master/preset-configs/default.json),目前可用的内置配置[见此](https://github.com/Front-End-Engineering-Cloud/builder/tree/master/preset-configs)。若该项值置为 `""`,则不会基于任何已有配置进行扩展。
51-
52-
也可以提供一个本地文件的路径,使用本地配置文件作为被扩展对象,如:`./build-config.base.json`,相对路径会被相对当前配置文件的路径进行解析。
53-
54-
* publicUrl
55-
56-
静态资源被发布后的线上 URL,一般直接使用存放静态资源的 bucket 对应的公开域名即可,如 `"https://o4jiepyc4.qnssl.com/"`。
57-
58-
* srcDir
59-
60-
源码目录,相对于项目根目录(即存放 `build-prepare.sh` 与 `build-config.json` 的目录)的路径,如 `"src"`。
61-
62-
* distDir
63-
64-
构建目标目录,相对于项目根目录(即存放 `build-prepare.sh` 与 `build-config.json` 的目录)的路径,如 `"dist"`。
65-
66-
* entries
67-
68-
入口文件,要求是一个 object,key 为入口文件名(如 `"index"`),value 为入口文件相对于项目根目录的路径(如 `"src/index.js"`)。
69-
70-
* pages
71-
72-
页面,要求是一个 object,key 为页面名(如 `"index"`),value 为一个 object,包含三个字段:`template`, `entries`, `path`
73-
74-
- template
75-
76-
页面的模板文件相对于项目根目录的路径,支持 ejs
77-
78-
- entries
79-
80-
页面上的入口文件列表,在只有一个入口文件的情况下,可以直接传入一个字符串,即该入口文件名(如 `"index"`);也可以传入一个数组,数组每一项为一个入口文件名,(如 `["sidebar", "index"]`)
81-
82-
- path
83-
84-
在应用中该页面的路径正则(如 `""`、`"^\\/financial\\/"`),dev server 在请求匹配对应 path 时会返回该页面的内容作为响应。
85-
86-
* transforms
87-
88-
构建过程中的转换配置,要求是一个 object。key 为文件后缀名,value 为转换信息。转换信息支持两种格式:
89-
90-
1. 直接使用 transformer 名,如 `"css"`、`"less"`
91-
92-
2. 一个 object,包含两个字段:`transformer` 与 `config`,具体各 transformer 对应的可配置项见下方 transformer 的配置
93-
94-
- `transformer`: 即 transformer 名,如 `babel`
95-
- `config`: 即 transformer 的配置,如
96-
```json
97-
{
98-
"presets": ["es2015"]
99-
}
100-
```
101-
102-
* envVariables
103-
104-
注入到代码中的环境变量,如配置:
105-
106-
```json
107-
{
108-
"envVariables": {
109-
"API_PREFIX": "http://foobar.com/api"
110-
}
111-
}
112-
```
113-
114-
则代码中:
115-
116-
```js
117-
const apiUrl = API_PREFIX + 'test'
118-
```
119-
120-
会被转换为:
121-
122-
```js
123-
const apiUrl = "http://foobar.com/api" + 'test'
124-
```
125-
126-
* targets
127-
128-
配置构建的目标环境信息。目前支持字段:`browsers`
129-
130-
- browsers 设置构建的目标浏览器版本,同时设定 babel-env 和 autoprefix,类型为 `string[]`,详见:[browserslist](https://github.com/browserslist/browserslist#full-list)
131-
132-
* devProxy
133-
134-
需要 dev sever 进行代理的请求配置,要求是一个 object,key 为 api 路径前缀,value 为代理目标,如
135-
136-
```json
137-
{
138-
"/api": "http://foobar.com"
139-
}
140-
```
141-
142-
表示把形如 `/api/*` 的请求代理到 `http://foobar.com/api/*`
143-
144-
* deploy
145-
146-
部署配置,要求是一个 object,包含两个字段:`target` 及 `config`
147-
148-
- target 部署目标,目前仅支持 `"qiniu"`
149-
- config 针对当前部署目标的配置信息,如 target 为 `"qiniu"` 时,需要提供的 config 形如:
150-
151-
```json
152-
{
153-
"AccessKey": "xxx",
154-
"SecretKey": "yyy",
155-
"bucket": "zzz"
156-
}
157-
```
158-
159-
表示使用 `xxx`、`yyy` 分别作为 AccessKey 与 SecretKey,上传到名为 `zzz` 的 bucket。
160-
161-
* engines
162-
163-
配置对构建环境的要求。目前支持字段:`builder`
164-
165-
- builder 配置项目所要求的 fec-builder 版本范围,格式遵循 [node-semver range](https://github.com/npm/node-semver#ranges)
166-
167-
在统一的构建环境中,服务应依据该版本范围去选择合适的 builder 版本对项目进行构建;本地开发时,若本地使用的 builder 版本不匹配项目所配置的版本范围,会输出警告信息,但不影响使用
168-
169-
示例:
170-
171-
```json
172-
{
173-
"engines": {
174-
"builder": "^1.5.0"
175-
}
176-
}
177-
```
178-
179-
* optimization
180-
181-
优化项
182-
183-
- addPolyfill
184-
185-
是否开启自动 polyfill 功能,开启后会根据 `targets.browsers` 参数自动打包对应的 polyfill,并在作为独立的包被页面前置引用,`true` 启用,`false` 禁用
186-
187-
- extractCommon
188-
189-
控制是否抽取 entries 间的公共内容到单独的文件中,在有多个 entry 时可以减少结果文件的总体积,`true` 启用,`false` 禁用
190-
191-
- extractVendor
192-
193-
控制抽取固定依赖(vendor)的行为,要求传入一个入口文件名(`entry`)以启用;该 entry 的内容将会被认为是固定依赖,被抽取到单独的文件中,而不会重复出现在每个 entry 的结果文件里。一方面它可以更精确地实现抽取公共内容的效果,另外一方面,在 vendor entry 内容不变的情况下,结果文件本身的 hash 不会改变,可以更充分地利用浏览器缓存。典型的 vendor entry 的内容形如:
194-
195-
```javascript
196-
import 'react'
197-
import 'moment'
198-
import 'lodash'
199-
```
200-
201-
- compressImage
202-
203-
是否压缩图片(png, jpe?g, gif),`true` 启用,`false` 禁用
204-
205-
- transformDeps
206-
207-
是否对第三方依赖包(node_modules 中的内容)的 Javascript 内容进行转换(builder 默认会跳过对依赖包 Javascript 内容的转换,以提升构建效率)。这里传入 `true` 表示全部进行转换,`false` 则全部不转换;也可以传入包名列表来指定需要转换的第三方依赖包,如传入 `[ "react", "mobx" ]`,表示仅对包 react 与包 mobx 的 Javascript 内容进行转换
208-
209-
* test
210-
211-
测试相关配置
212-
213-
- setupFiles
214-
215-
需要在每个测试用例前执行的脚本,数组,每项值为脚本相对于项目根目录的路径,如:`["test/setup.js"]`
48+
[build-config.md](./build-config.md)
21649

50+
VSCode 中可以通过安装插件 [fec-builder-helper](https://marketplace.visualstudio.com/items?itemName=codingyjt.fec-builder-helper&ssr=false#overview) 完成配置获取辅助提示。
21751

21852
### transformer 的配置
21953

0 commit comments

Comments
 (0)