# app-shop-mono

**Repository Path**: KingGang/app-shop-mono

## Basic Information

- **Project Name**: app-shop-mono
- **Description**: 使用turborepo 创建monorepo
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-12-11
- **Last Updated**: 2023-12-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: monorepo, vue3, turborepo, vite5, vuei18n

## README

# App Shop monorepo实操

<p align="center">
    <img src="https://img.shields.io/badge/Vue-3.3.8-brightgreen.svg"/>
    <img src="https://img.shields.io/badge/Vite-5.0.0-green.svg"/>
    <img src="https://img.shields.io/badge/Element Plus-2.4.3-blue.svg"/>
    <img src="https://img.shields.io/badge/license-MIT-green.svg"/>
</p>

## 项目技术实现点

- [x] [搭建项目架构](#搭建项目结构)
- [x] [Vite配置](#vite-配置)
- [x] [Eslint配置](#eslint-配置)
- [x] [StyleLint配置](#stylelint-配置)
- [x] [Ts配置](#tsconfig-配置)
- [x] [Husky + Lintstage配置](#husky--lintstage配置)
- [x] [Turoborepo配置](#turoborepo配置)
- [x] [unbuild配置](#unbuild配置)
- [ ] 常用工具,lodash-es、vueuse、nprogress
- [ ] vue-i18n多语言配置
- [ ] vue-router路由配置
- [ ] pinia配置
- [ ] element-plus配置
- [ ] 页面布局
- [ ] 登录页面

### 搭建项目结构

1. 通过Vite创建一个基础项目
   ` pnpm create vite`
   ![vite项目截图](https://gitee.com/KingGang/images/raw/master/app-shop-mono/create-structure.png)
2. 创建项目目录

- packages文件夹: 存放其他项目的公共依赖
  - eslint-config: 存放Eslint的公共配置信息
  - style-config: 存放styleLint的公共配置
  - ts-config: 存放tsconfig 配置
  - vite-config: 存放vite的相关配置, 如插件、`Build`配置等
- apps文件夹: 不同的项目
  ![项目结构](https://gitee.com/KingGang/images/raw/master/app-shop-mono/1.png)

### Vite 配置

在其他项目中经常会用到的一些Vite配置,如插件、`build`选项等。可以提取出一个配置项目.

详细实现请参阅: [统一 Vite 配置](packages/vite-config/README.MD)

### tsconfig 配置

在其他项目中经常会用到的一些ts配置.

详细实现请参阅: [统一 tsconfig 配置](packages/ts-config/Readme.md)

### Eslint 配置

项目中经常用到的一些Eslint配置.

详细实现请参阅: [统一 Eslint 配置](packages/eslint-config/README.MD)

### StyleLint 配置

项目中经常用到的一些Eslint配置.

详细实现请参阅: [统一 StyleLint 配置](packages/stylelint-config/README.MD)

### Husky + Lintstage配置

项目中 Git代码提交规范

1. 安装依赖

```
pnpm add husky lint-staged -Dw
```

> 为什么使用`-Dw`参数？

> Running this command will add the dependency to the workspace root, which might not be what you want - if you really make it explicit by running this command again with the -w flag (or --workspace-root). If you don't want to see this warning anymore, you maygnore-workspace-root-check setting to true.

2. 初始化配置

```
npx husky-init
```

3. 添加提交前校验钩子

```
npx husky add .husky/pre-commit
```

4. 添加配置

```
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

PATH="/usr/local/bin:$PATH"

# Format and submit code according to lintstagedrc.js configuration
pnpm exec lint-staged
```

5. lintstage配置

```
{
  "*.{js,jsx,ts,tsx}": [
    "prettier --write",
    "eslint --fix"
  ],
  "{!(package)*.json,*.code-snippets,.!(browserslist)*rc}": [
    "prettier --write--parser json"
  ],
  "package.json": [
    "prettier --write"
  ],
  "*.vue": [
    "prettier --write",
    "eslint --fix"
  ],
  "*.{scss,less,styl,html}": [
    "prettier --write"
  ],
  "*.md": [
    "prettier --write"
  ]
}
```

### unbuild配置

> 为什么需要使用[unbuild](https://github.com/unjs/unbuild)

> 在项目中主要使用typescript代码,有一些文件需要在vite打包启动之前就需要运行,这时若直接引用ts,就会报`unknown file extension ts`,使用unbuild将这些ts文件编译成`cjs`或`mjs`文件导出，以供其他项目使用

1. 定义`build.config.ts`配置文件,用于unbuild打包.参阅[vite-config](/packages/vite-config/build.config.ts)
2. 在package.json中添加脚本

```
"stub": "pnpm unbuild --stub"
```

3. 在`package.json`中修改导出

```
"exports": {
    ".": {
      "types": "./dist/index.d.ts",
      "require": "./dist/index.cjs",
      "import": "./dist/index.mjs"
    }
  },
  "main": "./dist/index.cjs",
  "types": "./dist/index.d.ts",
  "module": "./dist/index.mjs",
  "files": [
    "dist"
  ],
```

### Turoborepo配置

1. 创建`turbo.json`[配置](turbo.json)
2. 在根目录`package.json`中添加脚本,使用npm的`postinstall`,在项目安装依赖的时候，编译各个项目的导出

```
 "postinstall": "turbo run stub",
```

pnpm add @vueuse/core pinia lodash-es nprogress vue-i18n element-plus -w