后台管理系统之项目初始化

初始化

这里还是采用了create-react-app来初始化一个react项目，本来是想用vite来着，后来试了试就打消了这个念头，后面有机会再说吧！

言归正传，我们使用以下命令创建一个react项目

# npm 
npm init react-app admin --template typescript
# pnpm
pnpm create react-app admin --template typescript
# yarn
yarn create react-app admin --template typescript

这里我使用的包管理工具是pnpm，而且想使用typescript来编写代码，所以就写了template，如果不想用，去掉就好

使用pnpm创建完项目后，项目结构如下

可以看见虽然用的命令是pnpm但是项目中还是npm，所以我们将package-lock.json与 node_modules删掉，再使用pnpm install重新安装依赖效果如下

然后删除一些用不太上的文件

是我目前用不太上，不是说他没用！

最后的结构如下

使用pnpm start启动项目，效果如下

这里已经修改了一部分代码了

到这里项目基本的初始化就完成了

规范

初始化完成项目之后，现在制定一下相关规范，如：代码格式，git提交相关

虽然项目是写着自己玩，但是该注意的还是要注意，练习练习

代码格式

代码格式我们使用eslint来进行检查，用prettier来格式化代码

1. create-react-app已经内置了eslint，我们只需要添加或覆盖规则即可

// .eslintrc.js  暂且写了这么些
module.exports = {
  extends: ["react-app"],
  rules: {
    semi: ["error", "always"],
    quotes: ["error", "double"],
    "no-unused-vars": "warn",
  },
};

2. 安装prettier，并配置规则

pnpm add -D prettier

规则如下

{
  "semi": true,
  "tabWidth": 2,
  "singleQuote": false,
  "trailingComma": "all"
}

提交规范

安装如下依赖

• 全局安装commitizen，用于提供一个git cz命令用于代替git commit
• 局部安装cz-customizable，用于自定义一些提交规范，在package.json中添加以下内容

"config": {
    "commitizen": {
      "path": "node_modules/cz-customizable"
    }
  }

• 在配置文件.cz-config.js配置规范

module.exports = {
  //可选类型
  types: [
    { value: "feat", name: "feat:   新功能" },
    { value: "fix", name: "fix:   修复" },
    { value: "docs", name: "docs:   文档变更" },
    { value: "style", name: "style:   代码格式(不影响代码运行的变动)" },
    {
      value: "refactor",
      name: "refactor:重构(既不是增加feature)，也不是修复bug",
    },
    { value: "perf", name: "perf:   性能优化" },
    { value: "test", name: "test:   增加测试" },
    { value: "chore", name: "chore:   构建过程或辅助功能的变动" },
    { value: "revert", name: "revert:   回退" },
    { value: "build", name: "build:   打包" },
    { value: "revert", name: "revert:   回退" },
  ],
  //消息步骤
  messages: {
    type: "请选择提交类型",
    customScope: "请输入修改范围(可选)",
    subject: "请简要描述提交(必填)",
    body: "请输入详细描述(可选)",
    footer: "请输入要关闭的issue(可选)",
    confirmCommit: "确认以上信息提交?(y/n)",
  },
  //跳过问题
  skipQuestion: ["body", "footer"],
  //subject文字长度默认是
  subjectLimit: 72,
};

​ 规范到这儿就配置完了，之后使用git cz代替git commit即可

4. 安装husky用于在提交的时期，代码与git提交信息是否符合规范

   • 安装husky

   pnpm add -D husky
   

   • 初始化husky

   npx husky install
   

   • 提交时进行代码检查，与提交信息检查

   # 由git commit命令触发，在commit-msg之前，检查代码是否符合规范
   npx husky add .husky/pre-commit "npm run lint"
   # git commit和git merge都会触发 检查是否定义的规范
   npx husky add .husky/commit-msg 'npx --no -- commitlint --edit "$1"'
   
   

结束语

这是第二遍才成功的，第一遍不知道咋回事，eslint一直不好使，可能是东西删多了，也有可能是vscode搞事情；第二次只是删了文件，没有删依赖，然后在WebStorm里搞的就好了，下次看会不会出猫病。初始化配置就是这些内容，后面就开始正式写！