通用的前端构建工具,屏蔽业务无关的细节配置,开箱即用
背景:业界前端工程化方案的趋同
- 模块化方案的统一
- 样式 & 图片等非 Javascript 资源的引入手段有最佳实践
- 性能优化的最佳实践趋同
上述背景下,前端开发者不应该再需要去关心具体的工程化方案的细节与搭建,工程层面的性能优化措施等。fec-builder 的目标是,通过尽可能少的配置,引入包含业界最佳实践的工程化方案,让开发者得以专注于业务的实现。
长期来看,前端项目不再需要向项目中引入 dev dependencies,也不再需要自己搭建构建、部署 & 持续集成的环境,通过向项目添加一个 build-config.json
文件,即可使用通用的服务完成这些过程。
npm 包(适合本地开发用)
# fec-builder 使用 npm-shrinkwrap.json 锁定依赖版本,yarn 不会识别 npm-shrinkwrap.json
# 这里请使用 npm 安装全局包
npm i fec-builder -g
# 项目目录下执行
fec-builder -p 8080
docker 镜像(适合持续集成环境使用)
docker pull hub.c.163.com/nighca/fec-builder:latest
# 项目目录下执行
docker run -v ${PWD}:/fec/input -e "BUILD_ENV=production" --rm fec-builder
npm 包与 docker 镜像的对比,优点:
- 不需要安装 docker,通过淘宝镜像源的话装起来应该也比 docker pull image 快
- 构建行为直接在宿主机运行,性能会比在容器中稍好,首次构建大约会快 20%
缺点:
- 没有那么可靠,安装时可能会出错(往往错在 node 构建二进制包的部分),构建行为也不能保证完全一致
-
extends
作为基础进行扩展的配置信息名,不填写该字段会默认使用
default
,目前可用的内置配置见此。若该项值置为""
,则不会基于任何已有配置进行扩展。也可以提供一个本地文件的路径,使用本地配置文件作为被扩展对象,如:
./build-config.base.json
,相对路径会被相对当前配置文件的路径进行解析。 -
publicUrl
静态资源被发布后的线上 URL,一般直接使用存放静态资源的 bucket 对应的公开域名即可,如
"https://o4jiepyc4.qnssl.com/"
。 -
srcDir
源码目录,相对于项目根目录(即存放
build-prepare.sh
与build-config.json
的目录)的路径,如"src"
。 -
distDir
构建目标目录,相对于项目根目录(即存放
build-prepare.sh
与build-config.json
的目录)的路径,如"dist"
。 -
entries
入口文件,要求是一个 object,key 为入口文件名(如
"index"
),value 为入口文件相对于项目根目录的路径(如"src/index.js"
)。 -
pages
页面,要求是一个 object,key 为页面名(如
"index"
),value 为一个 object,包含三个字段:template
,entries
,path
-
template
页面的模板文件相对于项目根目录的路径,支持 ejs
-
entries
页面上的入口文件列表,在只有一个入口文件的情况下,可以直接传入一个字符串,即该入口文件名(如
"index"
);也可以传入一个数组,数组每一项为一个入口文件名,(如["sidebar", "index"]
) -
path
在应用中该页面的路径正则(如
""
、"^\\/financial\\/"
),dev server 在请求匹配对应 path 时会返回该页面的内容作为响应。
-
-
transforms
构建过程中的转换配置,要求是一个 object。key 为文件后缀名,value 为转换信息。转换信息支持两种格式:
-
直接使用 transformer 名,如
"css"
、"less"
-
一个 object,包含两个字段:
transformer
与config
,具体各 transformer 对应的可配置项见下方 transformer 的配置transformer
: 即 transformer 名,如babel
config
: 即 transformer 的配置,如{ "presets": ["es2015"] }
-
-
envVariables
注入到代码中的环境变量,如配置:
{ "envVariables": { "API_PREFIX": "http://foobar.com/api" } }
则代码中:
const apiUrl = API_PREFIX + 'test'
会被转换为:
const apiUrl = "http://foobar.com/api" + 'test'