Nx带来极致的前端开发体验——项目搭建首发于公众号 code进化论，欢迎关注。项目搭建创建项目使用以下命令创建一个

首发于公众号 code进化论，欢迎关注。

项目搭建

创建项目

使用以下命令创建一个新的 React monorepo：

~ ❯ npx create-nx-workspace react-monorepo  --pm=pnpm --preset=react-monorepo

 NX   Let's create a new workspace [https://nx.dev/getting-started/intro]

✔ Application name · core
✔ Which bundler would you like to use? · rspack
✔ Which unit test runner would you like to use? · vitest
✔ Test runner to use for end to end (E2E) tests · none
✔ Default stylesheet format · scss
✔ Would you like to use ESLint? · No
✔ Would you like to use Prettier for code formatting? · No
✔ Which CI provider would you like to use? · skip
✔ Would you like remote caching to make your build faster? · skip

nx 提供了脚手架工具帮助开发者快速搭建项目，这里有几个点我们需要关注：

bunder

nx 目前集成了 webpack、vite、rspack 三款流行的打包工具，基本都能满足项目的开发。
测试框架

nx 目前集成了 jest、vitest 两款当前最流行的测试框架，他们之间的对比可参考 vitest 官网的介绍。
linter

nx 目前只支持 eslint，暂不支持 xolint，需要如果开发者想接入 xolint 需要手动配置。

其余的像 prettier 代码格式化、远程缓存这些需要开发者结合自己的场景确定。上述命令生成以下结构：

└─ react-monorepo
   ├─ apps
   │  ├─ core
   │  │  ├─ public
   │  │  │  └─ ...
   │  │  ├─ src
   │  │  │  ├─ app
   │  │  │  │  ├─ app.module.css
   │  │  │  │  ├─ app.spec.tsx
   │  │  │  │  ├─ app.tsx
   │  │  │  │  └─ nx-welcome.tsx
   │  │  │  ├─ assets
   │  │  │  ├─ main.tsx
   │  │  │  └─ styles.css
   │  │  ├─ index.html
   │  │  ├─ package.json
   │  │  ├─ tsconfig.app.json
   │  │  ├─ tsconfig.json
   │  │  ├─ tsconfig.spec.json
   │  │  └─ vite.config.ts
   ├─ package.json
   ├─ nx.json
   ├─ tsconfig.base.json
   ├─ tsconfig.json
   └─ vitest.workspace.ts

主要的设置包括：

一个新的 React 应用程序（apps/core）

在 Nx 中，推荐的一种方式是将应用程序放在 apps 文件夹下，将库应用（package）放在 libs 文件夹下，应用程序尽可能的保持轻量，通过组装 libs 文件夹下的库来实现具体的功能。
nx 基础配置文件（nx.json）
tsconfig 基础配置，之后创建的所有 package 的 ts 配置都会继承这个文件。
package.json 文件，默认在根目录安装所有依赖。

Nx 支持两种依赖管理策略，一个是各个 package 都定义自己的 package.json 来管理自己的依赖，一个是在根目录的 package.json 安装所有依赖，甚至可以在项目中混用这两种策略，这两种策略的优缺点在官方文档中作了详细的讲解。

启动项目

npx nx serve core

启动服务之后可以在 http://localhost:4200/ 预览。

创建react library

在一个项目中通常会包含各个业务模块，比如一个商城系统，需要包含商品页、订单页、个人中心页等，这些功能模块都是相互独立的，可以拆解成一个个独立的 packge，最终在应用程序中进行组合形成一个商城系统。

为了创建这些独立的 package，Nx 提供了相应的代码生成器，以 react项目为例，nx 提供了 @nx/react 工具，下面通过命令创建一个新的 react library：

npx nx g @nx/react:lib libs/shop

NX  Generating @nx/react:library

✔ Which bundler would you like to use to build the library? Choose 'none' to skip build setup. · vite
✔ What unit test runner should be used? · vitest

目前 react-library 的 bunder 只支持 vite 和 rollup 这种轻量级的打包工具，对于一个 library 已经够用了，反观 webpack 就太重了，很难发挥它的优势。

由于我们的 monorepo 项目底层是基于 workspace 搭建的（这里我们用的 pnpm），所以 library 在被其他库或者应用引用之前需要先进行构建：

npx nx run @react-monorepo/shop:build

构建完之后会生成一个 dist 文件夹，用来存放构建产物：

同时也可以查看该 library 的 package.json，里面通过 exports 定义了外部能够引用当前库中的那些数据，这些数据是从哪些路径抛出去的。

{
  "name": "@react-monorepo/shop",
  "version": "0.0.1",
  "type": "module",
  "main": "./dist/index.js",
  "module": "./dist/index.js",
  "types": "./dist/index.d.ts",
  "exports": {
    "./package.json": "./package.json",
    ".": {
      "development": "./src/index.ts",
      "types": "./dist/index.d.ts",
      "import": "./dist/index.js",
      "default": "./dist/index.js"
    }
  }
}

创建基础工具库

除了功能模块库，我们还需要创建一些基础工具库，比如常用的工具函数、hooks等。为了创建这些工具库，Nx 也提供了相应的代码生成器，以 typescript 工具函数为例，nx提供了@nx/js 工具，下面是一个示例：

npx nx g @nx/js:lib libs/utils

NX  Generating @nx/js:library

✔ Which bundler would you like to use to build the library? Choose 'none' to skip build setup. · tsc
✔ Which linter would you like to use? · none
✔ Which unit test runner would you like to use? · vitest

目前 Nx 已经支持 tsx、swc、esbuild、vite、rollup 等作为 ts 工具库的构建工具，默认使用 tsx，之后额直接进行构建：