背景 #

之前公司有微信小程序和 H5 双端编译的需求，所以自己用 Taro3 + Vue3 + Ts 搭了一个项目：仓库地址

一、搭建项目架构 #

初始化项目 #

初始化项目之前，需安装 taro-cli，请参考 Taro 文档，完成 tarojs 安装

使用命令创建模板项目：

taro init myApp

构建 weapp

pnpm dev weapp

打包完成后发现两点问题

• 微信提示 vonder.js 超过 500KB
• 代码依赖分析一直处于 loading，无法查看主包的依赖构成

taro 在打包的时候在 shell 中输出了提示：

在命令中添加 production 就可以开启生产环境的压缩模式，taro-cli 搭建的初始代码经过压缩后为 267KB

PS：在编译 H5 平台的时候，不推荐开启 production 模式，会导致编译报错：

H5 若需要开启依赖分析，可以在 config 中开启 webpack-bundle-analyzer 来分析打包后的依赖：

二、设置代码规范的 Eslint Prettier #

• 代码规范 ESlint
• 代码格式化 Prettier

1、安装依赖 #

pnpm add @vue/eslint-config-prettier @vue/eslint-config-typescript eslint-plugin-prettier prettier -D

2、设置配置 #

目录下新增 .eslintrc.js 和 .prettierrc 文件，具体配置可以按自己的喜好来。
如果 VSCode 中已经存在插件 prettier，请关闭。两者在保存的时候，VSCode 中的 prettier 插件的优先级大于项目中的 prettier。

三、Git 提交规范 #

• Git 钩子控制 husky
• Git 暂存区 lint 检查 lint-staged
• Git commit 提交检查 commitlint
• Git 自动生成 commit 信息 changelog
• Git 版本控制 standard-version

1、husky #

pnpm add husky -D
# 向package中添加script
npm set-script prepare "husky install"
# 始化husky,将 git hooks 钩子交由husky执行
pnpm prepare

2、lint-staged #

pnpm add lint-staged -D
# 添加commit前置hook 提交前进行代码检查
npx husky add .husky/pre-commit "npx lint-staged"
# 配置.lintstagedrc.js的检查规则

3、commitlint #

用于规范 git commit 提交的时候的信息格式，有助于多人开发时候的 commit 信息统一规范

pnpm add @commitlint/cli @commitlint/config-conventional -D
# 配置commitlint配置文件
echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js
# 添加husky hook -> commit-msg
npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'

提交的时候的格式约定：

来看看官方的 demo 示例：

4、conventional-changelog #

用于记录 CHANGELOG 日志，可以看到团队的更新日志，并能点击对应的 commit 看相应的代码

pnpm add conventional-changelog conventional-changelog-cli -D

Example

5、standard-version #

pnpm add standard-version -D
# 配置脚本
npm set-script release "standard-version"

配合 conventional-changelog 使用，standard-version 能做到:

• 可以自动添加 package 中的版本号
• 基于提交的 commit 自动生成 changelog
• 自动为当前版本号创建一个 tag，你也可以自己指定版本：

npm run release -- --release-as xxx (you want version)

发版的工作流 #

• git add .
• git commit -m "feat: xxx"
• git tag
• npm run release
• git push
• git push --tag 将生成的 tag 上传至远程仓库

四、安装 unocss #

pnpm add unocss @unocss/webpack -D

在入口文件 app.ts 中引入 unocss

添加 Unocss 小程序预设（用来转换 px 和 rpx 的单位换算）

pnpm add unocss-preset-weapp -D

在根目录下新增 unocss.config.ts，引入如下代码：

import presetWeapp from 'unocss-preset-weapp'
import { transformerAttributify, transformerClass } from 'unocss-preset-weapp/transformer'

export default {
  presets: [
    presetWeapp({
      isH5: process.env.TARO_ENV === 'h5',
      platform: 'taro',
      taroWebpack: 'webpack5',
      designWidth: 375,
      deviceRatio: {
        640: 2.34 / 2,
        750: 1,
        828: 1.81 / 2,
        375: 2 / 1
      }
    })
  ],
  transformers: [transformerAttributify(), transformerClass()]
}

另外还要在 taro 的 webpack config 文件中配置 H5 平台和 小程序 平台。

PS: taro 不同版本的根字体不同，需要在 index.html 的 body 上添加class="text-base"。

推荐使用 class 写法 #

<view class="mt-40px">unocss</view>

<view class="flex items-center text-green/500">unocss</view>

class="mt-40px" 在375（iphone6、iphoneX）的屏幕下对应小程序转换出来将会是:

.mt-40px {
  margin-top: 80rpx;
}

对应 H5 平台转换结果：

.mt-40px {
  margin-top: 40px;
}

五、Taro 多平台编译组件 #

参考 Taro 多端组件
对应的演示 demo 分别在 pages/index 和 components 下