LESSON 03 · 前端实现
搭建开发环境,把项目跑起来
照着顺序做一遍,以后每次拿到新项目都能自己搞定:环境准备 → 安装依赖 → 启动项目。
01
环境准备
安装 Node.js(建议使用项目指定的版本,见 .nvmrc),先安装 nvm,然后使用 nvm use 即可统一 Node 版本。
安装 pnpm 包管理器。
02
安装依赖
项目代码只包含团队自己写的部分,还需要下载很多第三方库(叫"依赖")。安装完依赖后,项目才能正常运行。通常只需要在第一次拉取项目、或者依赖有更新时执行。
# 安装根目录依赖
pnpm install
# 安装特定应用依赖
cd apps/web
pnpm install
03
启动开发服务器
日常最常用的命令。运行后终端会输出一个本地地址(通常是 localhost:3000),在浏览器中打开就能看到页面。开发服务器会实时监听文件变化,修改代码后浏览器会自动刷新。
# 启动所有应用
pnpm dev
# 启动特定应用
cd apps/web
pnpm dev
# 或使用 TurboRepo 命令
pnpm --filter web dev
04
构建项目
把源代码编译、压缩、打包成可以直接部署到服务器的文件。和 dev 的区别是:dev 是开发时用的,能看到实时效果;build 是生产用的,生成最终可部署的文件。日常工作中主要用 dev,build 一般在发布时才需要。
# 构建所有应用
pnpm build
# 构建特定应用
pnpm --filter web build
05
代码质量检查
提交代码前运行这两个命令。lint 会检查代码中有没有潜在问题或不规范的写法,有问题会在终端列出来。format 会自动统一代码格式(缩进、换行、引号等),让团队所有人的代码风格一致。很多项目会在 CI 流水线中强制检查,不通过就无法合并。
# 运行 ESLint 检查
pnpm lint
# 格式化代码
pnpm format
本课核心