这是我参与「第五届青训营」伴学笔记创作活动的第 8 天
前言
上一篇笔记介绍了MonoRepo的优点和基于go语言的MonoRepo框架TurboRepo，这一篇我们详细介绍一下如何配置出一个团队能用的TurboRepo库，包括一些actions和自动部署预览等。
技术栈
- ⚡️
Nuxt3- SSR框架 - ✨
Vue3.2- 最新Vue更多语法糖 - 💨
Turbo- MonoRepo框架 - 💎
Strapi- Headless CMS 框架 - 😎
@Nuxt/Image- images 服务端渲染 - 😁
Umami- Better Analytics 访问源分析 - 🃏
Commit Lint- commit规范检查 - 💖
Husky & Lint Staged— precommit运行库 - 📏
Eslint- 规范化TypeScript、JavaScript代码 - 🐶
UnoCss- 原子化 CSS 引擎、兼容 tailwindcss、windicss - 🤖
preset-icons- unocss 自带icons - ⏰ The
<script setup>syntax setup语法糖 来自Vue3.2 - 🍍
Pinia- 全局状态管理库 更好用 - 🎨
APIs auto importing- 库自动引入 - 🦾
TypeScript- 更规范的语法 - 👷
Github Actions- actions自动运行、ci/cd云端检查语法 - 👀
Automatic Branch and Issue Autolink- Issue AutoLink actions 创建issue会创建一个分支 - 🗺
Nuxt SEO Kit- SEO优化 SSR必备 - 📦
Vercel- 自动部署、预览的平台 - 🔥
Netlify + Cloudflare- 部署平台
前端模板
前端模板选择了https://github.com/antfu/vitesse-nuxt3
是antfu的vitesse系列模板的nuxt3款
这套模板用了好多个 很好用的
配置很全、自带的unocss也是几乎兼容windicss和tailwind 很适应
想用icons可以去antfu的另一个项目里找
https://icones.js.org/ 这里二次封装了几万个icons用个爽
配置turbo
turbo官网有讲怎么配置到一个已有的MonoRepo里https://turbo.build/repo/docs/getting-started/existing-monorepo
这里只需要在根目录的package.json里建立workspaces字段 和packageManager字段
//package.json
{
"packageManager": "yarn@1.22.19",
"workspaces": [
"frontend",
"backend"
],
}
安装TurboRepo
yarn global add turbo
创建任务管道
在package.json 的turbo中，将想要”turbo”的命令添加到管道中 管道定义了 npm 包中 scripts 的依赖关系，并且为这些命令开启了缓存。这些命令的依赖关系和缓存设置会应用到 MonoRepo 中的各个包中
//turbo.json
{
"$schema": "https://turbo.build/schema.json",
"pipeline": {
"build": {
// A package's `build` script depends on that package's
// dependencies and devDependencies
// `build` tasks being completed first
// (the `^` symbol signifies `upstream`).
"dependsOn": ["^build"],
// note: output globs are relative to each package's `package.json`
// (and not the monorepo root)
"outputs": [".next/**"]
},
"test": {
// A package's `test` script depends on that package's
// own `build` script being completed first.
"dependsOn": ["build"],
// A package's `test` script should only be rerun when
// either a `.tsx` or `.ts` file has changed in `src` or `test` folders.
"inputs": ["src/**/*.tsx", "src/**/*.ts", "test/**/*.ts", "test/**/*.tsx"]
},
// A package's `lint` script has no dependencies and
// can be run whenever. It also has no filesystem outputs.
"lint": {},
"deploy": {
// A package's `deploy` script depends on the `build`,
// `test`, and `lint` scripts of the same package
// being completed. It also has no filesystem outputs.
"dependsOn": ["build", "test", "lint"]
}
}
}
上面的示例中，build和test这两个任务具有依赖性，必须要等他们的依赖项对应的任务完成后才能执行，所以这里用^来表示。 对于每个包中 package.json 中的 script 命令，如果没有配置覆盖项，那么TurboRepo将缓存默认输出到 dist/** 和build/**文件夹中。
运行
这样只需要运行
npx turbo run build test lint deploy
就可以运行全部参数
配置.gitignore
根目录 创建.gitignore文件
+ .turbo
+ build/**
+ dist/**
+ .next/**
Remote cache
turbo login
turbo link
然后删除你的./node_modules/.cache/turbo文件夹
显示 full turbo 则证明匹配到了云端的缓存，直接拉下来不再构建一遍
配置husky
在根目录安装husky
先运行husky install
然后创建.husky文件夹
文件树如上
配置文件
//.gitignore
*
# husky.sh
#!/usr/bin/env sh
if [ -z "$husky_skip_init" ]; then
debug () {
if [ "$HUSKY_DEBUG" = "1" ]; then
echo "husky (debug) - $1"
fi
}
readonly hook_name="$(basename -- "$0")"
debug "starting $hook_name..."
if [ "$HUSKY" = "0" ]; then
debug "HUSKY env variable is set to 0, skipping hook"
exit 0
fi
if [ -f ~/.huskyrc ]; then
debug "sourcing ~/.huskyrc"
. ~/.huskyrc
fi
readonly husky_skip_init=1
export husky_skip_init
sh -e "$0" "$@"
exitCode="$?"
if [ $exitCode != 0 ]; then
echo "husky - $hook_name hook exited with code $exitCode (error)"
fi
if [ $exitCode = 127 ]; then
echo "husky - command not found in PATH=$PATH"
fi
exit $exitCode
fi
//commit-msg
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
npx --no-install commitlint --edit "$1"
//post-merge
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
yarn install
//pre-commit
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
yarn lint-staged
安装commit lint
yarn install -D @commitlint/config-conventional @commitlint/cli
这个可以在MonoRepo内安装不在根目录装
在前端的package.json里配置
//./frontend/package.json
{
"name": "frontend",
"version": "1.0.0",
"private": true,
"scripts": {
"build": "nuxi build",
"dev": "nuxi dev",
"start": "node .output/server/index.mjs",
"lint": "eslint .",
"lint:fix": "eslint . --fix",
"generate": "nuxi generate",
"typecheck": "tsc --noEmit --incremental false",
"lint:strict": "eslint --max-warnings=0 ."
},
"lint-staged": {
"**/*.{js,ts,vue,html}": [
"eslint --max-warnings=0"
]
}
}
最后在根目录创建commitlint.config.js
里面写上commit lint 规则
//commitlint.config.js
module.exports = {
extends: ['@commitlint/config-conventional'],
rules: {
'type-enum': [
2,
'always',
[
'feat',
'fix',
'docs',
'chore',
'style',
'refactor',
'ci',
'test',
'revert',
'perf',
'build',
'vercel',
],
],
},
}
配置.gitignore
node_modules
*.log
dist
.output
.nuxt
.env
.turbo
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
lerna-debug.log*
# Diagnostic reports (https://nodejs.org/api/report.html)
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
# Runtime data
pids
*.pid
*.seed
*.pid.lock
# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov
# Coverage directory used by tools like istanbul
coverage
*.lcov
# nyc test coverage
.nyc_output
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
.grunt
# Bower dependency directory (https://bower.io/)
bower_components
# node-waf configuration
.lock-wscript
# Compiled binary addons (https://nodejs.org/api/addons.html)
build/Release
# Dependency directories
node_modules/
jspm_packages/
# TypeScript v1 declaration files
typings/
# TypeScript cache
*.tsbuildinfo
# Optional npm cache directory
.npm
# Optional eslint cache
.eslintcache
# Microbundle cache
.rpt2_cache/
.rts2_cache_cjs/
.rts2_cache_es/
.rts2_cache_umd/
# Optional REPL history
.node_repl_history
# Output of 'npm pack'
*.tgz
# Yarn Integrity file
.yarn-integrity
# dotenv environment variables file
.env
.env.test
# parcel-bundler cache (https://parceljs.org/)
.cache
# Next.js build output
.next
# Nuxt.js build / generate output
.nuxt
dist
# Gatsby files
.cache/
# Comment in the public line in if your project uses Gatsby and *not* Next.js
# https://nextjs.org/blog/next-9-1#public-directory-support
# public
# vuepress build output
.vuepress/dist
# Serverless directories
.serverless/
# FuseBox cache
.fusebox/
# DynamoDB Local files
.dynamodb/
# TernJS port file
.tern-port
.vercel
frontend/.env
配置vercel
创建vercel.json
由于是nuxt3项目 vercel有预设 只需要配置一个字段
{
"framework": "nuxtjs"
}
然后是登录vercel把项目绑定上去
配置好团队是这样的
配置netlify
创建netlify.toml
[build.environment]
NODE_VERSION = "16"
[build]
publish = "dist"
command = "yarn build"
functions = "netlify/functions"
[[redirects]]
from = "/*"
to = "/index.html"
status = 200
默认配置为如上
然后是登录netlify把项目绑定上去
配好了是这样的
配置workflows
配置一个actions用来在线lint 有错会xx
# lint.yaml
# https://github.com/kentcdodds/kentcdodds.com/blob/main/.github/workflows/deployment.yml
name: Code Check
on:
push:
branches:
- main
pull_request: {}
jobs:
lint:
name: ⬣ ESLint
runs-on: ubuntu-latest
steps:
- name: 🛑 Cancel Previous Runs
uses: styfle/cancel-workflow-action@0.9.1
- name: ⬇️ Checkout repo
uses: actions/checkout@v2
- name: ⎔ Setup node
uses: actions/setup-node@v2
with:
node-version: 16
- name: 📥 Download deps
uses: bahmutov/npm-install@v1
- name: 🔬 Lint
run: npx turbo lint:strict
配置一个release bot 用来生成打包文件 区分版本号
# release.yaml
name: release-please
on:
# workflow_dispatch:
push:
branches:
- main
jobs:
release-please:
runs-on: ubuntu-latest
steps:
- uses: google-github-actions/release-please-action@v3
with:
release-type: node
package-name: release-please-action
配置 issue bot 用来自动用issue创建分支
# issue.yaml
name: "Issue Autolink"
on:
pull_request:
types: [opened]
jobs:
issue-links:
runs-on: ubuntu-latest
steps:
- uses: tkt-actions/add-issue-links@v1.6.0
with:
repo-token: "${{ secrets.AUTO_LINK }}"
branch-prefix: "i"
resolve: "true"
结尾
到此应该初始化的差不多了
这个从创建 debug 到上线的时间大概花了两天 问题出在 vercel 和 netlify 上
vercel 对 nuxt 的兼容性不好，不如他的亲儿子 next
刚去查了一下 nuxt3在1月23日变成了默认版本
nuxt3用了一个叫nitro的编译框架 https://github.com/unjs/nitro
构建和部署通用JavaScript服务器
Nitro提供了一个强大的工具链和一个来自unjs生态系统的运行时框架，可以随时随地构建和部署任何JavaScript服务器！
unjs 我感觉是写js魔法的组织 里面全是魔法库
这位是主谋
这个框架会自动检测你当前的环境 给你分配一个preset 比如说你在当前node环境build nuxt的话会给你生成一个 .mjs文件 你运行文件就可以启动一个SSR服务器
你在vercel上运行的话就给你 preset：vercel 生成vercel认的文件格式
netlify同理
问题出在 使用MonoRepo 后 nitro不认我这是在vercel里了 他会生成默认的node的mjs文件 然后构建失败
很烦
参考
https://turbo.build/repo/docs/getting-started/existing-monorepo
https://github.com/antfu/vitesse-nuxt3
https://github.com/antfu?tab=repositories&q=vitesse&type=&language=&sort=
重新加载maven变更
