从零创建workspaces
npx create-nx-workspace@latest wsps --preset=react-monorepo
通过对话框填写Project配置信息：
NX Let's create a new workspace [https://nx.dev/getting-started/intro]
✔ Application name · activity1
✔ Which bundler would you like to use? · vite
✔ Test runner to use for end to end (E2E) tests · none
✔ Default stylesheet format · scss
✔ Do you want Nx Cloud to make your CI fast? · none
运行Project：
# 切换到workspaces
cd wsps
# 运行指定项目 nx <target name> <project name> <option overrides>
nx serve activity1
nx run activity1:serve
# 指定项目运行多个target
nx run-many -t test lint e2e activity1
# 针对所有项目运行target
nx run-many -t serve --all // serve需要调整每个项目运行的端口号，<project>/webpack.config
nx run-many -t serve -p activity1 activity2
# 针对更改代码的项目运行target
nx affected -t test
自定义target
全局targert
task定义
// ./package.json 根目录
{
"name": "myorg",
"scripts": {
"docs": "nx exec -- node ./generateDocsSite.js", // nx exec -- 可执行npm scripts
},
"nx": {}
}
- 在根目录的
package.json中配置run-scripts - 添加
"nx": {}，后续即可在命令行中通过nx调用该script task - 在命令行运行
nx docs
task配置
全局task配置项在
nx.json中配置
{
"targetDefaults": {
"build": {
"cache": true // 如果运行两次构建任务，第二次操作将是即时的，因为它是从缓存中恢复的。
},
"test": {
"cache": true
}
}
}
-
targetDefaults#build#cache在输入相同的情况下，始终产生相同的输出结果- 如果运行任务，第二次操作将是即时的，因为它是从缓存中恢复的。
- 首次运行任务后缓存存储在
.nx/cache中。 - 可以通过
nx build header --skip-nx-cache忽略项目缓存 - 通过
npx nx reset清空所有缓存
独立Project target
// apps\activity1\project.json 配置project#targets
{
"name": "activity1",
"$schema": "../../node_modules/nx/schemas/project-schema.json",
"sourceRoot": "apps/activity1/src",
"projectType": "application",
"tags": [],
"// targets": "to see all targets run: nx show project activity1 --web",
"targets": {
"test": {
"command": "echo 1111111111111",
"dependsOn": [""], // 依赖其他target，执行该任务之前，确保依赖已成功执行。可选
"options": {
"cwd": "apps/activity1",
"args": [
"--node-env=development" // command的参数，echo 1111111 --node-env=development
]
}
}
}
}
nx缓存task
// apps\activity1\package.json
{
"name": "activity1",
"scripts": {
"docs": "nx exec -- node ./generateDocsSite.js",
"test": "nx exec -- npm run docs"
},
"nx": {}
}
依赖限制
Nx 有一个通用机制，允许你为项目指定
"tags"。"tags "是可分配给项目的任意字符串，可在以后定义项目之间的边界时使用。
library类型
例如： "feature" library, "utility" library, "data-access" library, "ui" library
// libs/toast/project.json
{
...
"tags": ["type:feature"]
}
// apps/activity1/project.json
{
...
"tags": ["type:feature"]
}
Project作用域
例如： "feature" library, "utility" library, "data-access" library, "ui" library
// libs/toast/project.json
{
...
"tags": ["type:feature", "scope:orders"]
}
// apps/activity1/project.json
{
...
"tags": ["type:feature", "scope:products"]
}
指定依赖规则
// .eslintrc.base.json
{
...
"overrides": [
{
...
"rules": {
"@nx/enforce-module-boundaries": [
"error",
{
"enforceBuildableLibDependency": true,
"allow": [],
"depConstraints": [
{
"sourceTag": "*",
"onlyDependOnLibsWithTags": ["*"]
},
{
"sourceTag": "type:feature",
"onlyDependOnLibsWithTags": ["type:feature", "type:ui"]
},
{
"sourceTag": "type:ui",
"onlyDependOnLibsWithTags": ["type:ui"]
},
{
"sourceTag": "scope:orders",
"onlyDependOnLibsWithTags": [
"scope:orders",
"scope:products",
"scope:shared"
]
},
{
"sourceTag": "scope:products",
"onlyDependOnLibsWithTags": ["scope:products", "scope:shared"]
},
{
"sourceTag": "scope:shared",
"onlyDependOnLibsWithTags": ["scope:shared"]
}
]
}
]
}
},
...
]
}
环境变量设置
通过
.env.*文件配置环境变量
默认寻找
.env文件-
若需要不同环境设置不同的环境变量，需要结合
targets#<target-name>#<configuration-name>使用- 注册环境
// apps/subproject/project.json { "name": "activity1", "$schema": "../../node_modules/nx/schemas/project-schema.json", "sourceRoot": "apps/activity1/src", "projectType": "application", "targets": { "serve": { "configurations": { "development": { "envFiles": [".env.development"] } } } } }-
创建环境变量
在相应的项目下，
创建.env.development文件，填充变量# apps/activity1/.env.development a=1使用对应的环境变量
155-2731-8020