umi搭建后台管理系统2之个性化

前言: 第一章已经演示了怎么创建项目，这一章将讲一下个性化的配置

一、eslint

我配置的eslint有下面的。各位自行取食。

npm install eslint eslint-config-airbnb eslint-config-prettier eslint-plugin-babel eslint-plugin-compat eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-markdown@1.0.0-beta.6 eslint-plugin-prettier eslint-plugin-react

接下来配置.eslintrc.js文件, 具体文件配置的意思需各位自己去问度娘了

module.exports = {
  parser: 'babel-eslint',
  extends: ['airbnb', 'prettier', 'plugin:compat/recommended'],
  env: {
    browser: true,
    node: true,
    es6: true,
    mocha: true,
    jest: true,
    jasmine: true,
  },
  globals: {
    BUILD_ENV: true,
    page: true,
    cy: true,
  },
  rules: {
    'react/jsx-filename-extension': [1, { extensions: ['.js'] }],
    'react/jsx-wrap-multilines': 0,
    'react/prop-types': 0,
    'react/forbid-prop-types': 0,
    'react/jsx-one-expression-per-line': 0,
    'react/destructuring-assignment': 0,
    'react/no-string-refs': 0,
    'import/no-unresolved': [2, { ignore: ['^@/', '^umi/'] }],
    'import/no-extraneous-dependencies': [2, { optionalDependencies: true }],
    'import/no-mutable-exports': 0,
    'import/prefer-default-export': 0,
    'no-underscore-dangle': 0,
    'no-unused-expressions': 0,
    'jsx-a11y/no-noninteractive-element-interactions': 0,
    'jsx-a11y/click-events-have-key-events': 0,
    'jsx-a11y/no-static-element-interactions': 0,
    'jsx-a11y/anchor-is-valid': 0,
    'linebreak-style': 0,
    'no-param-reassign': 0,
    'no-console': 'off',
    'consistent-return': 0,
    'import/extensions': 0,
    'react/sort-comp': 0,
    'import/order': 0,
  },
  settings: {
    polyfills: ['fetch', 'promises', 'url'],
  },
};

然后 stylelint

npm install stylelint

打开.stylelinttrc.js

module.exports = {
    "extends": ["stylelint-config-standard", "stylelint-config-prettier"],
    "rules": {
        "no-descending-specificity": null,
        "selector-pseudo-class-no-unknown": [
            true,
            {
                "ignorePseudoClasses": ["global"]
            }
        ],
        "selector-pseudo-element-colon-notation": "single"
    }
};

配置好之后,在install一遍即可
2, 移植到git仓库, 我用的码云, GitHub也一样.
下载git安装 (方法自行百度)
去github 或者 gitlab 或者码云...等代码管理软件去建一个仓库.拿到仓库地址.比如 https://gitee.com/example/umi_demo.git,
直接在你项目的文件夹右键, 选 git Bash Here

git init  // 初始化git仓库

git branch // 查看分支, 当前分支应该是master

git status // 查看状态,  当前应该会提示 在master分支, 还没有commit, 
 //如果有红色的字体,不用管. 还会提示没有东西添加到commit但是有跟踪到的文件
// 然后
git add . // 这个点和add没挨着

git commit -m "chore: 脚手架新建项目,增加eslint配置" // 后面字符串为提交信息, 便于以后回退代码,查看提交等.

// 然后拿到之前的仓库地址

git remote add origin https://gitee.com/example/umi_demo.git

// 关键的来了, 去清空你的仓库的目标分支, 这里是master, 也可以推
// 到其他分支, 具体操作去百度.  这里去清空master东西.
// 然后 push 即可, 如果原仓库该分支有东西, push会失败.

git push -u origin master

然后git到仓库到此完成.

三、前端代码风格自动化
既然用了git，那提交代码，当然需要把提交代码也控制一下。风格也必须统一，便于以后维护项目，方便管理。

说到风格统一，那自然是angular的那一套了。至于背景那点小八卦，各位自行百度。
下面正文。

npm install commitizen
npm install cz-customizable

然后在根目录下新建一个文件.commitlintrc.js, 打开输入

module.exports = {
  extends: ['@commitlint/config-conventional'],
  parserOpts: {
    bodyPattern: /[a-zA-Z]{1}[a-zA-Z0-9]-\d*/,
  },
  /**
   * The configuration array contains:
   * Level [0..2]: 0 disables the rule. For 1 it will be considered a warning for 2 an error.
   * Applicable always|never: never inverts the rule.
   * Value: value to use for this rule.
   */
  rules: {
    'type-enum': [
      2,
      'always',
      ['feat', 'fix', 'docs', 'style', 'refactor', 'test', 'revert', 'chore'],
    ],
    'body-max-length': [2, 'always', 72],
    'body-min-length': [2, 'always', 5],
  },
};

根目录下新建.cz-config.js , 输入

'use strict';

module.exports = {
  types: [
    {
      value: 'feat',
      name: '✨  feat:     新增功能',
    },
    {
      value: 'fix',
      name: '🐞  fix:      修复 bug',
    },
    {
      value: 'refactor',
      name: '🛠  refactor: 代码重构，没有加新功能或者修复 bug',
    },
    {
      value: 'docs',
      name: '📚  docs:     仅仅修改了文档，比如 README、CHANGELOG、CONTRIBUTE 等等',
    },
    {
      value: 'test',
      name: '🏁  test:     测试用例，包括单元测试、集成测试等',
    },
    {
      value: 'chore',
      name: '🗯  chore:    改变构建流程、或者增加依赖库、工具等',
    },
    {
      value: 'style',
      name: '💅  style:    仅仅修改了空格、格式缩进、逗好等等，不改变代码逻辑',
    },
    {
      value: 'revert',
      name: '⏪  revert:   回滚到上一个版本',
    },
  ],

  scopes: ['*', 'config', 'components', 'pages', 'utils', 'styles'],

  allowCustomScopes: true,
  allowBreakingChanges: ['feat', 'fix'],
};

这只代表我的配置,(不是标准,不是标准,不是标准), 各位可根据官方文档自行修改.

husky继承了Git下所有的钩子，在触发钩子的时候，husky可以阻止不合法的commit,push等等。所以需要下载husky(如果是最新的版本,husky自带了)

注意: 文件夹必须有.git文件,否则无法提交. 该配置无效. 如果操作了上述git的步骤. 文件夹没有.git文件, 可能是隐藏了.取消隐藏即可.

npm install husky --save-dev

安装后再package.json 增加

  "husky": {
    "hooks": {
      "pre-commit": "npm run lint-staged",
      "commit-msg": "commitlint -e $GIT_PARAMS"
    }
  },
  "config": {
    "commitizen": {
      "path": "node_modules/cz-customizable"
    }
  },

保险起见, npm install 一下
然后

git add .
git cz

如图所示, 即安装成功.

image.png

下一章, 会写关于项目里的一些调整, 方法的一些封装, 约定等.