@@ -45,175 +45,9 @@ npm 包与 docker 镜像的对比,优点:
45
45
46
46
### build-config.json 的配置
47
47
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 )
216
49
50
+ VSCode 中可以通过安装插件 [ fec-builder-helper] ( https://marketplace.visualstudio.com/items?itemName=codingyjt.fec-builder-helper&ssr=false#overview ) 完成配置获取辅助提示。
217
51
218
52
### transformer 的配置
219
53
0 commit comments