Skip to content

docs: add explanation and related script configuration to distinguish build environment #5826

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 9 commits into from
Mar 31, 2025
Merged
67 changes: 67 additions & 0 deletions docs/src/en/guide/essentials/development.md
Original file line number Diff line number Diff line change
Expand Up @@ -150,6 +150,73 @@ To run the `docs` application:
pnpm dev:docs
```

### Distinguishing Build Environments

In actual business development, multiple environments are usually distinguished during the build process, such as the test environment `test` and the production environment `build`.

At this point, you can modify three files and add corresponding script configurations to distinguish between production environments.

Take the addition of the test environment `test` to `@vben/web-antd` as an example:

- `apps\web-antd\package.json`

```json
"scripts": {
"build:prod": "pnpm vite build --mode production",
"build:test": "pnpm vite build --mode test",
"build:analyze": "pnpm vite build --mode analyze",
"dev": "pnpm vite --mode development",
"preview": "vite preview",
"typecheck": "vue-tsc --noEmit --skipLibCheck"
}
```

Add the command `"build:test"` and change the original `"build"` to `"build:prod"` to avoid building packages for two environments simultaneously.

- `package.json`

```json
"scripts": {
"build": "cross-env NODE_OPTIONS=--max-old-space-size=8192 turbo build",
"build:analyze": "turbo build:analyze",
"build:antd": "pnpm run build --filter=@vben/web-antd",
"build-test:antd": "pnpm run build --filter=@vben/web-antd build:test",

······
}
```

Add the command to build the test environment in the root directory `package.json`.

- `turbo.json`

```json
"tasks": {
"build": {
"dependsOn": ["^build"],
"outputs": [
"dist/**",
"dist.zip",
".vitepress/dist.zip",
".vitepress/dist/**"
]
},

"build-test:antd": {
"dependsOn": ["@vben/web-antd#build:test"],
"outputs": ["dist/**"]
},

"@vben/web-antd#build:test": {
"dependsOn": ["^build"],
"outputs": ["dist/**"]
},

······
```

Add the relevant dependent commands in `turbo.json`.

## Public Static Resources

If you need to use public static resources in the project, such as images, static HTML, etc., and you want to directly import them in the development process through `src="/xxx.png"`.
Expand Down
67 changes: 67 additions & 0 deletions docs/src/guide/essentials/development.md
Original file line number Diff line number Diff line change
Expand Up @@ -150,6 +150,73 @@ pnpm dev:ele
pnpm dev:docs
```

## 区分构建环境

在实际的业务开发中,通常会在构建时区分多种环境,如测试环境`test`、生产环境`build`等。

此时可以修改三个文件,在其中增加对应的脚本配置来达到区分生产环境的效果。

以`@vben/web-antd`添加测试环境`test`为例:

- `apps\web-antd\package.json`

```json
"scripts": {
"build:prod": "pnpm vite build --mode production",
"build:test": "pnpm vite build --mode test",
"build:analyze": "pnpm vite build --mode analyze",
"dev": "pnpm vite --mode development",
"preview": "vite preview",
"typecheck": "vue-tsc --noEmit --skipLibCheck"
},
```

增加命令`"build:test"`, 并将原`"build"`改为`"build:prod"`以避免同时构建两个环境的包。

- `package.json`

```json
"scripts": {
"build": "cross-env NODE_OPTIONS=--max-old-space-size=8192 turbo build",
"build:analyze": "turbo build:analyze",
"build:antd": "pnpm run build --filter=@vben/web-antd",
"build-test:antd": "pnpm run build --filter=@vben/web-antd build:test",

······
}
```

在根目录`package.json`中加入构建测试环境的命令

- `turbo.json`

```json
"tasks": {
"build": {
"dependsOn": ["^build"],
"outputs": [
"dist/**",
"dist.zip",
".vitepress/dist.zip",
".vitepress/dist/**"
]
},

"build-test:antd": {
"dependsOn": ["@vben/web-antd#build:test"],
"outputs": ["dist/**"]
},

"@vben/web-antd#build:test": {
"dependsOn": ["^build"],
"outputs": ["dist/**"]
},

······
```

在`turbo.json`中加入相关依赖的命令

## 公共静态资源

项目中需要使用到的公共静态资源,如:图片、静态HTML等,需要在开发中通过 `src="/xxx.png"` 直接引入的。
Expand Down