前言
上节课，我们已经为搭建博客准备了一系列的工具，从这里开始，我们正式开始搭建项目工程。
为了方便演示整个项目，我创建了 github 项目，https://github.com/workerfe/website-tech，可以在这里查看整个工程，每个章节我会设置不同的分支，大家可以通过切换分支查看整个开发过程。
项目工程架构
我们的项目，分为服务端、前端项目和管理端三个模块。因此，这里准备采用 Monorepo 架构，将这三个模块都放在同一个仓库中。
Monorepo 的具体架构实现，可以看看我之前的文章使用 pnpm 搭建 Monorepo 仓库
同时，为了提供更好的SEO体验，我们将使用 EJS 模版，来渲染前端项目的页面。
因此，我们需要的子仓库只需要两个 admin 和 server，整体结构如下：
搭建 Pnpm 工程
还是参考之前的文章使用 pnpm 搭建 Monorepo 仓库，来搭建我们的项目工程。
- 项目初始化
# clone 项目
git clone https://github.com/workerfe/website-tech.git
cd website-tech
# pnpm 初始化项目
pnpm init- 搭建 pnpm Monorepo
# 新建 pnpm Monorepo 目录
mkdir apps
mkdir apps/admin
mkdir apps/server
# 生成 pnpm-workspace.yaml 文件
touch pnpm-workspace.yaml
echo "packages:
- 'apps/*'" > pnpm-workspace.yaml- 项目配置
3.1 项目配置包括 .gitignore 文件，用于忽略一些文件，例如 node_modules 目录。
# 新建 .gitignore 文件
touch .gitignore
echo "node_modules" > .gitignore3.2 增加 eslint 和 prettier 配置，用来规范代码风格
# 新建 eslint 配置文件
touch .eslintrc.js
echo "module.exports = {}" > .eslintrc.js
# 新建 prettier 配置文件
touch .prettierrc.js
echo "module.exports = {}" > .prettierrc.jslint 相关的依赖包下：
# 安装 ESLint 和相关依赖
pnpm add -D eslint @babel/eslint-parser eslint-config-alloy eslint-plugin-prettier -w
# 安装 Prettier
pnpm add -D prettier -w
# 如果需要 Babel 核心包（@babel/eslint-parser 的依赖）
pnpm add -D @babel/core -w具体的配置都在 github 仓库中，不再文档赘述。
- 生成服务端项目
# 进入 server 目录
cd apps/server
# 生成 express 项目
express -e
# pnpm 安装依赖
pnpm install- 生成服务端启动命令
在项目根目录的 package.json 中添加启动脚本：
{
"scripts": {
"start": "cd apps/server && node ./bin/www",
},
}最后，我们可以通过 npm start 来启动服务端项目，默认会监听 3000 端口，访问 http://localhost:3000/ 即可
至此，我们已经完成了服务端项目的搭建。前端项目比较麻烦，我们后续再搭。
原文地址：https://webfem.com/post/website-0，转载请注明出处
