基于20230414最新Taro进行创建

最新taro安装即报错，Issues提供如下解决方案

//packjson.json  记得锁版本

"resolutions": {
    "@swc/core": "1.3.42"
},
"dependencies":{
  "@swc/core": "1.3.42",
}

项目校验规范

husky+lint-staged+commitlint/cli

大白话解析模块

1. husky

• git提交钩子，提交之前可做一些校验工作

1. lint-staged

• 可作为一些规则的集合，然后统一操作

1. commitlint/cli @commitlint/config-conventional

• 提交规范约束，如git commit -m "feat: 新创建项目"

提交规范约束

yarn add husky lint-staged  @commitlint/cli  @commitlint/config-conventional

{
 "scripts":{
    "prepare": "husky install",
    "lint": "eslint src",
    "fix": "eslint src/**/*.* --fix"
 },
 "husky":{
    "hooks": {
        "pre-commit": "lint-staged"
    }
 }
}
"lint-staged": {
   "src/\*\*/\*.{js,jsx,ts,tsx}": \[
   "prettier --write",
    "eslint --fix"
 ]
}

基于上述配置，为提交代码做了前置保证，现在开始加入提交流程

  yarn prepare

在默认创建的.husky文件中的pre-commit中加入

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

npx lint-staged

创建commit-msg

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

npx --no -- commitlint --edit 

创建commitlint.config.js

  module.exports = {
  extends: ['@commitlint/config-conventional'],
}

现在整个代码的提交得到了规范

eslint+prettier

对代码的质量和优化，进行统一配置，保证在gitLab上队友提交代码不会发现大规模差别，导致后期无法定位问题

  yarn add eslint prettier -D
  

  "eslint": "eslint --init",
  "lint": "eslint src",
  "fix": "eslint src/**/*.* --fix"

建议配置如下

.eslintrc.js如何配置

这里只讲冲突重点

1. prettier和eslint的冲突

  yarn add eslint-plugin-prettier

2. 关于tabs的冲突，关闭校验，eslint不校验即可

   "rules":{
     indent: ['off'],
   }

vscode配置

统一开发工具，这里以vscode为例

1. 创建.vscode文件,在下面创建

mkdir settings.json

写入最小配置

{
  // vscode默认启用了根据文件类型自动设置tabsize的选项
  "editor.detectIndentation": false,
  // 重新设定tabsize
  "editor.tabSize": 2,
  // 每次保存的时候自动格式化
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    // 使用eslint来fix，包括格式化会自动fix和代码质量检查会给出错误提示
    "source.fixAll.eslint": true
  },
  // 把prettier设置为vscode默认的代码格式化工具
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  // vue文件的默认格式化工具选择prettier
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "eslint.enable": true, //是否开启vscode的eslint
  "eslint.autoFixOnSave": true, //是否在保存的时候自动fix eslint
  "eslint.options": {
    //指定vscode的eslint所处理的文件的后缀
    "extensions": [".js", ".vue", ".ts", ".tsx"]
  },
  "prettier.useTabs": true,
  "eslint.validate": [
    //确定校验准则
    "javascript",
    "javascriptreact",
    {
      "language": "html",
      "autoFix": true
    },
    {
      "language": "vue",
      "autoFix": true
    },
    {
      "language": "typescript",
      "autoFix": true
    },
    {
      "language": "typescriptreact",
      "autoFix": true
    }
  ]
}

volar

都可以接入，但是格式化配置以prettier为准

lf和CRLF的配置

windows和mac电脑可能会有冲突，所以需要配置

根目录创建

.editorconfig

root = true

[*] indent_style = space; indent_size = 2 charset = utf-8 trim_trailing_whitespace = true insert_final_newline = true

[*.md] trim_trailing_whitespace = false

针对小程序最关键的分包问题，提出一些建议

缩减体积的简单思路

scss

将常用的css抽离函数或者mixins,积少成多，如果不抽离，这一步代码也会积累

sass: {
    resource: [path.resolve(__dirname, '..', 'src/assets/styles/variable.scss')],
  },

文件

1. 将分包的subPackages作为变量导入，不同端插入不同分包模块，建议一开始就要跟产品说明，抽离表单创建，用户信息，echarts，IM模块，主包尽可能小
2. 如果使用pinia，建议不同模块的store，json（这里着重强调）放入指定分包,不要把主包没有用到的模块放进去

小程序CI/CD

个人随便造，这边讲一下基于公司模块的思路

1. 小程序密钥放服务器，接口请求得到
2. 创建时，选择weapp,dd,zhifubao等需要打包的版本
3. 以github,gitee,gitlab为例子，都可以收到请求
4. 在jenkins里有物料，接入之后，即可完成流程

小程序

developers.weixin.qq.com/miniprogram…

模板分享

gitee.com/alienwareBo…

内置组件

customPage

支持自定义下拉刷新，上拉加载

customHeader

就是单纯的自定义头部而已

补充一个React版本的template

没啥，只不过换了一个语言框架，脚手架就这些东西