配置

命令交互

命令交互生成的配置会保存到终端内存中，当命令执行之后会被回收。

📦 构建应用 bruce-app build / bruce-app b

选项	功能	默认	备注
mode	请选择环境模式	prod	可选test/pre/prod
polyfill	请选择代码垫片	es6	可选es5/es6/custom/dynamic
useCsslint	请确认是否校验样式代码	false	保障应用整体样式代码的质量，建议开启
useJslint	请确认是否校验脚本代码	false	保障应用整体脚本代码的质量，建议开启
useCompressor	请确认是否压缩文件数据	false	生成压缩文件，上传到服务器之后可以提供Gzip功能
useHash	请确认是否哈希文件名称	false	对生成文件设置哈希值，只有文件内容修改才会更新哈希值，用于长缓存优化
useTimer	请确认是否时化应用目录	false	时间序列化命名输出的应用根目录，增加时间戳区分版本
useAnalyzer	请确认是否分析打包结果	false	在构建之后展示构建依赖的关系，可以根据关系图合理分析模块

• mode配置提供test测试环境、pre预览环境和prod生产环境，在js/ts/jsx/tsx文件中可用全局变量RUN_ENV获取mode的具值
• polyfill配置提供es5 ES5静态垫片、es6 ES6静态垫片、custom自定义静态垫片和dynamic动态垫片
  • 自定义静态垫片：根据业务代码引入，兼容所有自定义范围的浏览器
  • 动态垫片：根据UserAgent引入，使用Polyfill服务
  • ES5静态垫片：根据业务代码引入，兼容所有ES5下限范围的浏览器
  • ES6静态垫片：根据业务代码引入，兼容所有ES6下限范围的浏览器

♾️ 创建应用 bruce-app create / bruce-app c

选项	功能	默认	备注
appName	请输入应用名称	unknown	只能由数字、字母或中划线组成且首末位字符只能为数字或字母
frame	请选择开发框架	js	可选js/react
style	请选择预设样式	scss	可选scss/less
deps	请选择应用依赖	[]	提供js/react相关的开发依赖，可选通用设计、通用工具、页面路由、状态管理和网络请求
useTs	请确认是否集成TypeScript	false	生成tsconfig.json，可用TS开发项目
useInstaller	请确认是否安装应用依赖	false	默认使用yarn安装，其次使用npm安装
ext	请选择配置后缀	js/ts	可选js/json/ts/yaml

• ext配置提供js、json、ts和yaml的后缀，使用TS时会将js变为ts，动态配置建议使用js/ts，静态配置建议使用json/yaml

🕹️ 调试应用 bruce-app dev / bruce-app d

选项	功能	默认	备注
port	请输入调试端口	9999	只能由正整数组成且范围在0~65535之间，会检测端口是否被占用
useHttps	请确认是否开启证书服务	false	调试基于Cookies的登录功能时必须开启此项
useCsslint	请确认是否校验样式代码	false	保障应用整体样式代码的质量，建议开启
useJslint	请确认是否校验脚本代码	false	保障应用整体脚本代码的质量，建议开启
useOpener	请确认是否打开初始网页	false	自动打开默认浏览器且跳转到指定链接

🎨 初始物料 bruce-app init / bruce-app i

选项	功能	默认	备注
mateName	请输入物料名称	demo	只能由数字、小写字母或中划线组成且首末位字符只能为数字或小写字母
template	请选择预设模板	component	可选component/layout/flow/view/page

• template配置提供component组件、layout布局、flow流程、view视图和page页面，根据src/${template}s/${mateName}拼接而成的路径生成对应文件

🌍 切换语言 bruce-app locale / bruce-app l

选项	功能	默认	备注
lang	请选择本地语言	简体中文	可选简体中文/繁体中文/英文

🗑️ 删除缓存 bruce-app remove / bruce-app r

选项	功能	默认	备注
caches	请选择废弃缓存	[]	可选dist/node_modules/package-lock.json/yarn.lock

命令参数

命令参数生成的配置会保存到终端内存中，当命令执行之后会被回收。

📦 构建应用 bruce-app build / bruce-app b

功能	配置	格式	描述
分析打包结果	-a, --analyze	true	不设置就不生效
压缩文件数据	-c, --compress	true	不设置就不生效
校验样式代码	-lc, --lintcss	true	不设置就不生效
校验脚本代码	-lj, --lintjs	true	不设置就不生效
环境模式	-m, --mode	test/pre/prod	不设置就默认为prod
哈希文件名称	-n, --named	true	不设置就不生效
代码垫片	-p, --polyfill	es5/es6/custom/dynamic	不设置就默认为es6
时化应用目录	-t, --timed	true	不设置就不生效

• 示例1：bruce-app build --mode test --polyfill es5 --analyze --lintcss --lintjs
• 示例2：bruce-app b -m pre -p dynamic -a -lc -lj

♾️ 创建应用 bruce-app create / bruce-app c

功能	配置	格式	描述
开发框架	-f, --frame	js/react	不设置就默认为js
安装应用依赖	-i, --install	true	不设置就不生效
应用名称	-n, --name	unknown	不设置就默认为unknown
预设样式	-s, --style	scss	不设置就默认为scss
集成TypeScript	-ts, --typescript	true	不设置就不生效

• 示例1：bruce-app create --name test-react-ts --frame react --style less -i -ts
• 示例2：bruce-app c -n test-react -f react -s less -i

🕹️ 调试应用 bruce-app dev / bruce-app d

功能	配置	格式	描述
开启证书服务	-e, --encrypt	true	不设置就不生效
校验样式代码	-lc, --lintcss	true	不设置就不生效
校验脚本代码	-lj, --lintjs	true	不设置就不生效
打开初始网页	-o, --open	true	不设置就不生效
代码垫片	-p, --port	9999	不设置就默认为9999

• 示例1：bruce-app dev --port 9876 --encrypt --lintcss --lintjs --open
• 示例2：bruce-app d -p 9876 -e -lc -lj -o

🎨 初始物料 bruce-app init / bruce-app i

功能	配置	格式	描述
代码垫片	-n, --name	demo	不设置就默认为demo
代码垫片	-t, --template	component/layout/flow/view/page	不设置就默认为9999

• 示例1：bruce-app init --name navbar --template layout
• 示例2：bruce-app i -n navbar -t layout

注意事项

• 如果--opt [val]的val为false，就不要增加这个配置
• 配置一定要输入完整且正确，格式为--opt [val]，不然会报错

文件配置

文件配置生成的配置会保存到配置文件中，会一直生效，除非修改文件配置。

配置文件使用brucerc命名，可选后缀为js|json|ts|yaml，请不要随意修改配置文件的名称。不对配置做动态处理建议使用json/yaml后缀，否则使用js|ts后缀。一般情况下，应用最终上线会区分测试环境、预览环境和生产环境，某些配置就要根据mode进行区分，这样只能使用js|ts后缀。

选项	功能	类型	默认	备注
alias	快捷方式	Object	{}	配置详情请查看webpack->resolve->alias
browsers	兼容范围	String[]	[]	配置详情请查看browserslist
buildError	构建失败回调	Function	null	形式为({dist,mode})=>{}，dist为输出路径，mode为环境模式
buildSuccess	构建成功回调	Function	null	形式为({dist,mode})=>{}，dist为输出路径，mode为环境模式
copyFiles	复制文件	Array/Function	[]	函数形式为(mode)=>[]，数组元素由from和to组成
eslintIgnores	Eslint忽略路径	String[]	[]	配置详情请查看eslint->ignore
eslintRules	Eslint校验规则	Object	{}	配置详情请查看eslint->rule、es-rules和ts-rules
frame	开发框架	String	js	可选js/react，由命令生成，请不要做任何修改
linkAssets	链接资源	Array	[]	在HTML的<head>中插入链接资源，数组元素由<link>的属性组成
openPages	打开网页	String[]	[]	默认浏览器在开发环境准备之后自动打开数组中所有网页
proxy	接口代理	Object	{}	配置详情请查看webpack-dev-server->proxy
proxyHost	代理域名	String	""	默认浏览器在开发环境中自动将当前域名替换为代理域名
publicPath	公共路径	String/Function	""	插入资源文件前缀，函数形式为mode=>""
scriptAssets	脚本资源	Array	[]	在HTML的<body>中插入脚本资源，数组元素由<script>的属性组成
style	预设样式	String	scss	可选scss/less，由命令生成，请不要做任何修改
stylelintIgnores	Stylelint忽略路径	String[]	[]	配置详情请查看stylelint->ignore
stylelintRules	Stylelint校验规则	Object	{}	配置详情请查看stylelint>rule和css-rules
transpileDeps	转译依赖	Array	[]	转译node_modules中没有输出ES5的模块
useTs	集成TypeScript	Boolean	false	可选true/false，由命令生成，请不要做任何修改

注意事项

• 如果配置文件使用js|ts后缀，必须使用ESM规范，导出形式为export default {}
• 如果配置文件的属性是null/""/[]/{}其中之一，会自动过滤并使用内置配置的默认值
• copyFiles数组元素的from表示源文件路径，to表示源文件复制之后的路径，from必须以src/xxx/yyy.js的形式书写，to必须以xxx的形式书写，在复制文件时进程会为to自动加上dist/

export default {
	alias: {
		swiper: "swiper/dist/js/swiper.js"
	},
	browsers: [
		"> 0.2%",
		"last 2 version",
		"not dead"
	],
	buildError({ dist = "", mode = "prod" }) {
		console.log("失败", dist, mode);
	},
	buildSuccess({ dist = "", mode = "prod" }) {
		console.log("成功", dist, mode);
	},
	copyFiles: [
		{ from: "src/manifest.json", to: "" },
		{ from: "src/sw.js", to: "" }
	],
	eslintIgnores: [
		"src/components/*"
	],
	eslintRules: {
		"space-before-function-paren": ["error", "always"]
	},
	frame: "react",
	linkAssets: mode => [
		{ href: `${mode === "test" ? "/test" : ""}/manifest.json`, rel: "manifest" },
		{ href: "https://static.yangzw.vip/img/logo-256.png", rel: "apple-touch-icon" },
		{ href: "https://static.yangzw.vip/css/reset.css", rel: "stylesheet" }
	],
	openPages: [
		"about",
		"contact"
	],
	proxy: {
		"/api": {
			changeOrigin: true,
			secure: false,
			target: "https://yangzw.vip"
		}
	},
	proxyHost: "https://yangzw.vip",
	publicPath: mode => mode === "test" ? "/test/" : "/",
	scriptAssets: [
		"https://static.yangzw.vip/js/stats.js"
	],
	style: "scss",
	stylelintIgnores: [
		"src/assets/css/*"
	],
	stylelintRules: {
		"color-hex-case": "upper"
	},
	transpileDeps: [
		"recoil",
		"ssr-window",
		"swiper"
	],
	useTs: true
};

如果使用TS编码，可以安装@yangzw/bruce-type提供类型定义。

import { readFileSync, writeFileSync } from "node:fs";
import { normalize } from "node:path";
import { defineConfig } from "@yangzw/bruce-type";

export default defineConfig({
	alias: {
		swiper: "swiper/dist/js/swiper.js"
	},
	browsers: [
		"> 0.2%",
		"last 2 version",
		"not dead"
	],
	buildError({ dist = "", mode = "prod" }) {
		console.log("失败", dist, mode);
	},
	buildSuccess({ dist = "", mode = "prod" }) {
		if (mode === "test") {
			const manifestPath = normalize(`${dist}/manifest.json`);
			const manifestContent = readFileSync(manifestPath, "utf8");
			const manifestContentX = manifestContent.replace("user?app=pwa", "ngp/user?app=pwa");
			writeFileSync(manifestPath, manifestContentX, "utf8");
		}
	},
	copyFiles: [
		{ from: "src/manifest.json", to: "" },
		{ from: "src/sw.js", to: "" }
	],
	eslintIgnores: [
		"src/components/*"
	],
	eslintRules: {
		"space-before-function-paren": ["error", "always"]
	},
	frame: "react",
	linkAssets: mode => [
		{ href: `${mode === "test" ? "/test" : ""}/manifest.json`, rel: "manifest" },
		{ href: "https://static.yangzw.vip/img/logo-256.png", rel: "apple-touch-icon" },
		{ href: "https://static.yangzw.vip/css/reset.css", rel: "stylesheet" }
	],
	openPages: [
		"about",
		"contact"
	],
	proxy: {
		"/api": {
			changeOrigin: true,
			secure: false,
			target: "https://yangzw.vip"
		}
	},
	proxyHost: "https://yangzw.vip",
	publicPath: mode => mode === "test" ? "/test/" : "/",
	scriptAssets: [
		"https://static.yangzw.vip/js/stats.js"
	],
	style: "scss",
	stylelintIgnores: [
		"src/assets/css/*"
	],
	stylelintRules: {
		"color-hex-case": "upper"
	},
	transpileDeps: [
		"recoil",
		"ssr-window",
		"swiper"
	],
	useTs: true
});