Enterprise brief introduction

DevOps (a portmantedge of Development and Operations) is a collective term for a group of processes, methods, and systems used to facilitate Development (The application/ Software engineering), technical operations, and quality assurance (QA) departments to communicate, collaborate, and integrate to build, test, and release software quickly, frequently, and reliably.

DevOps process steps

The application scenario of DevOps is often a huge and complex background and process scenario, which is based on IT automation, continuous integration (CI) and continuous deployment (CD) to optimize all aspects of program development, testing, system operation and maintenance, and mostly contains a continuous delivery pipeline.

  • Developer:IDE,GitAnd other development and compilation tools
  • Version control system:Branching strategy,Semantic version
  • Build server:Continuous integration,Code quality inspection
  • Artifact library: Store binary packages that the browser can run directly
  • System package manager: Manages binary packages on the build or test environment system
  • Environment consistency, dependent package version, operating system, browser compatibility
  • Pre-release or production: pre-release environment is interchangeable with production environment (Blue green release.Gray released.scrolling)
  • Release management: Practice automated or semi-automated (human intervention) deployment based on a high degree of automated testing
  • Develop and produce environmental problem management system

Each of these steps is a necessary step in software development, and each step has important significance, as shown in the figure belowMicrosoft developer Azure DevOpsAn advanced summary diagram of learning.

Commitlint configuration for DevOps

In order to facilitate team development and better maintenance of projects, Commitlint is introduced. This article provides detailed explanations of the current popular configuration methods. The project in this article is built on the basis of Commitlint + HusKY + ESLint, and directly into the code.

View the local Node version

Cause: @commitlint only supports Node>=12, husky only supports Node>=12.

PS C:\Windows\ System32 > node -v v14.15.0Copy the code

Initialize the project

E: \ component library \ demo \ enterprise > git clone https://gitee.com/zhaotao27/commitlint-husky-demo.git Cloning into 'commitlint-husky-demo'... remote: Enumerating objects: 3, done. remote: Counting objects: 100% (3/3), done. remote: Compressing objects: 100% (2/2), done. remote: Total 3 (delta 0), reused 0 (delta 0), pack-reused 0 Unpacking objects: 100% (3/3), done. Checking connectivity... done.Copy the code

Or creates the project like this

E:\ component \demo\devops> NPM init -y Wrote to E:\ component \demo\devops\package.json: {"name": "commitlint-husky-demo", "version": "1.0.0", "description" : ""," main ":" index. Js ", "scripts" : {" test ", "echo \" Error: no test specified\" && exit 1" }, "repository": { "type": "git", "url": "https://gitee.com/zhaotao27/commitlint-husky-demo.git" }, "keywords": [], "author": "", "license": "ISC" }Copy the code

Install @commitlint/config-conventional @commitlint/cli in the project

npm install --save-dev @commitlint/config-conventional @commitlint/cli
Copy the code

Generate commitlint.config.js for the project configuration in the project root directory

echo module.exports = {extends: ['@commitlint/config-conventional']} > commitlint.config.js
Copy the code

The default commitlint. Config

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

Install other dependency packages

Commitizen Standard submission STANDARD CZ-Conventional – Changelog-zh Chinese version of the submission standard prompt

npm install husky commitizen cz-conventional-changelog-zh conventional-changelog-cli --save-dev 
Copy the code

Package. The json configuration

"config": {
    "commitizen": {
      "path": "./node_modules/cz-conventional-changelog-zh"
    }
  },
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "prepare": "npx husky install",
    "lint": "lint-staged",
    "release": "standard-version",
    "commit": "git add . && npm lint && git cz",
    "genlog": "conventional-changelog -p angular -i CHANGELOG.md -s"
  }
Copy the code

Activate the Husky configuration

E:\ component library \demo\devops\commitlint-husky-demo> NPM run prepare > [email protected] prepare E:\ componentLibrary \demo\devops\commitlint-husky-demo > NPX husky install husky-git hooks installed E:\ componentLibrary \demo\devops\commitlint-husky-demo>yarn husky add. husky/commit-msg 'NPM yarn commitlint --edit $1'Copy the code
Commit – MSG configuration

NPM run Lint verifies code formatting after submission

#! /bin/sh . "$(dirname "$0")/_/husky.sh" npm run lint && npx --no-install commitlint --edit $1Copy the code

Execute the commandnpm run commit

E:\ component libraries \demo\devops\commitlint-husky-demo> NPM run commit > [email protected] commit E:\ component library \demo\devops\commitlint-husky-demo > git add. && git cz warning: LF will be replaced by CRLF in package.json. The file will have its original line endings in your working directory. [email protected], [email protected]? Use arrow keys > feat: fix: a new feature fix: a bug docs style: a missing colon Perf: Performance optimization Test: Move up and down to reveal more choicesCopy the code

The installation code detects dependencies

Eslint code verification, prettier formatting code, Stylelint style parsing, standard-version version release specification

npm install --save-dev eslint lint-staged prettier standard-version stylelint stylelint-config-standard
Copy the code
Enable Eslint code detection for the project
E:\ component library \demo\devops\commitlint-husky-demo> NPX eslint --init √ How would you like to use eslint? √ What type of modules does your project use? · ESM # JS module parse √ Which framework does your project use? √ Does your project use TypeScript? · No/Yes # whether to use TS √ Where does your code run? √ What format do you want your config file to be in? The config that you've selected requires The following dependencies: eslint-plugin-react@latest √ Would you like to install them now with NPM? · No/Yes Installing eslint-plugin-react@latest + [email protected]Copy the code
addstylelint.config.jsfile
module.exports = {
  extends: 'stylelint-config-standard',
};
Copy the code
Release command

Note: The default is patch minor version iteration (feature will update minor, bug fix will update patch, BREAKING CHANGES will update major)

E:\ component libraries \demo\devops\commitlint-husky-demo> NPM run release > [email protected] release E:\ component library \demo\devops\commitlint-husky-demo > standard-version √ Bumping version in package.json from 1.0.1 to 1.0.2 √ Bumping version in package-lock.json from 1.0.1 to 1.0.2 √ outputting changes to Changelo.md √ research (case) package-lock.json and package.json and CHANGELOG.mdCopy the code
Plain Git commit Hooks
E:\ component \demo\devops\commitlint-husky-demo>git add. E:\ demo\devops\commitlint-husky-demo>git commit -m "chore: Add test script files "> [email protected] lint E:\ Component library \demo\devops\commitlint-husky-demo > Lint-staged [STARTED] Preparing... [SUCCESS] Preparing... [STARTED] Running tasks... [STARTED] Running tasks for **/*.less [STARTED] Running tasks for src/**/*.{js,vue} [SKIPPED] No staged files match **/*.less [STARTED] prettier --write [SUCCESS] prettier --write [SUCCESS] Running tasks for src/**/*.{js,vue} [SUCCESS] Running tasks... [STARTED] Applying modifications... [SUCCESS] Applying modifications... [STARTED] Cleaning up... [SUCCESS] Cleaning up... [master 5f984bb] chore: Add test script file 1 file Changed, 3 insertions(+) create mode 100644 SRC /example/test.demo.jsCopy the code

conclusion

All the above codes can be viewed in the Gitee code repository. If there is something wrong or not taken into account in the article, please point it out in the comment area, and I will make a timely supplement. There are some issues with installing Commitlint dependencies, the Commitlint Commitlint specification is finished, and the component library is now formally written. Devops still has a long way to go, and WE hope to learn more every day with you!