preface
In this series of articles, you will learn how to develop a tool library of your own. You will learn how to use Git, how to build basic projects, how to write code, how to use functional programming, how to use TypeScript, how to use TypeScript, how to use TypeScript, how to use TypeScript, how to use TypeScript, how to use TypeScript. Writing documentation and publishing NPM packages.
You may need the following basics to read the article:
- Basic use of Git
- TypeScript
- ES6
Program source code
Windlike-Utils
Git project
Git branch
├ ─ ─ master -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- and release code consistent │ ├ ─ ─ dev -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- development branch │ │ ├ ─ ─ feature -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- the development of new features of branch │ │ ├ ─ ─ hotfix -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- branch of fixing bugsCopy the codeGit submission specification
Git code has its own code, and Git information must have its own code.
<type> (the < scope >) : < subject > / / short line < body > / / short line < footer >Copy the codeType Indicates the type of the submission:
- Feat: New Feature
- Fix: Fixes bugs
- -Jenny: There are some docs.
- Style: format (changes that do not affect code execution)
- Refactor: refactoring (i.e. code changes that are not new features or bug fixes)
- Test: Adds a test
- Chore: Changes to the build process or helper
Scope Indicates the scope involved in the change, for example, data layer and control layer. Subject provides a brief overview of this submission.
Here is a chestnut:
fix(model): fix something
- fix first bug
- fix second bug
Closes # 123
Copy the codeI’m using ghooks and validate-commit-msg, as shown below.
Git Commit message and Change log
The project structure
├ ─ ─. Vscode -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- vscode relevant configuration file ├ ─ ─ dist -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- build output directory file after ├ ─ ─ the docs -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- document ├ ─ ─ release -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- Gulp merger documents after packaging, Used in CDN version ├ ─ ─ packages -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- hold independent release package directory ├ ─ ─ the SRC -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- source │ ├ ─ ─ __test__ -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - test cases where entry files │ ├ ─ ─ < module > -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- tool library module │ │ ├ ─ ─ __test__ -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- testing of the module test case │ │ ├ ─ ─ the index, which s -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- the module header files │ │ ├ ─ ─ index. The ts -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- the module implementation code │ ├ ─ ─ utils. Which s -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- the head of the public file │ ├ ─ ─ utils. Ts -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- export all module file ├ ─ ─ package. The json ├ ─ ─ the eslintignore -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- eslint ignore configuration file ├ ─ ─ . Eslintrc. Js -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- eslint configuration file ├ ─ ─ the gitignore -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- the git ignore configuration file ├ ─ ─ the npmignore ------------------------------ NPM ignores configuration files, For distributing ├ ─ ─. VCMRC -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- is used to test the git submit information is in accordance with the format ├ ─ ─ CHANGELOG. Md -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- version more log ├ ─ ─ Gulpfile. Js -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- gulp ├ ─ ─ index. The js -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - entry documents ├ ─ ─ the README, md -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- the README ├ ─ ─ tsconfig. Json -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- TypeScript configuration fileCopy the codepackage.json
{" name ":" windlike - utils, / / to publish a package name "version" : "2.0.7, / / version" description ":" ", "main" / / description: "Index. Js", / / entry file "scripts" : {" test ":" jest ", / / test "dev" : "Tsc-w --downlevelIteration", // develop, detect code changes and compile into JS "start": "node index", // run entry file "build": "Eslint ": "eslint SRC -- ext. ts", // Check the code format "eslint:fix": "Eslint SRC -- ext. ts --fix",// Check and fix code format "log": "Magnetwork-changelog -p angular-i changelog. md-w-r 0" // Generate version log}, "repository": {"type": "git", "url": "git+https://github.com/MrWindlike/Windlike-Utils.git" }, "keywords": [], "author": "Windlike", "license": "ISC", "bugs": { "url": "https://github.com/MrWindlike/Windlike-Utils/issues" }, "homepage": "https://github.com/MrWindlike/Windlike-Utils#readme", "devDependencies": { "@types/jest": "^ 23.3.0 awesome - typescript -", "loader" : "^ 3.4.0", / / TS loader "Babel - core" : "^ 6.26.0", "Babel - loader" : "^ 7.1.2," "Babel - plugin - transform - runtime" : "^ 6.23.0", "Babel - preset - es2015" : "^ 6.24.1", "Babel - runtime" : "^6.26.0", "CZ-Conventional - Changelog ":" 2.1.0", // Tools for generating version logs "ESlint ": "^5.2.0", "eslint-plugin-typescript": "^ 0.12.0", / / TS code eslint detection tool "ghooks" : "^ 2.0.4", / / git cycle management "gulp" : "^ 3.9.1", "gulp - concat" : "^ 2.6.1," / / "gulp - uglify" gulp merge tools: "^ 3.0.0", / / gulp compression tools "jest" : "^ 23.4.1", / / test code tools "source - the map - loader" : "^ 0.2.3 ts -", "jest" : "^ 23.0.1", "typescript" : "^ 2.6.2", "typescript - eslint - parser" : "^17.0.1", // esLint tool for checking TS code "validate-commit- MSG ": "^2.14.0", "jest": {// jest config "roots": [ "<rootDir>/src" ], "transform": { "^.+\\.tsx?$": "ts-jest" }, "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$", "moduleFileExtensions": [ "ts", "tsx", "js", "jsx", "json", "node" ] }, "config": { "commitizen": { "path": "./node_modules/cz-conventional-changelog" }, "ghooks": { "pre-commit": "NPM run ESlint && NPM test", // Check the code format and run the test case before committing "commit-msg": "validate-commit-msg" // Verify that the commit information meets the format when committing}}}Copy the codeVerify Git commit information
Use ghooks and validate-commit-msg to check the information at git commit time.
"ghooks": {
"pre-commit": "npm run eslint && npm test", // Check the code format and run the test cases before committing"commit-msg": "validate-commit-msg"// Verify that the submission information is in the format}Copy the codeBut you also need a file to validate the rules. VCMRC:
{
"types": [
"feat"."fix"."docs"."style"."refactor"."perf"."test"."build"."ci"."chore"."revert"]."scope": {
"required": false."allowed": [
"*"]."validate": false."multiple": false
},
"warnOnFail": false."maxSubjectLength": 100,
"subjectPattern": "+"."subjectPatternErrorMsg": "subject does not match subject pattern!"."helpMessage": ""."autoFix": false
}
Copy the codeIn this way, you can verify that the submitted information conforms to the format, otherwise the submission will not succeed.
TypeScript configuration
tsconfig.json:
{"compilerOptions": {"outDir": "./dist/", // output directory "sourceMap": true, // Enable sourceMap for code debugging "noImplicitAny": True, // Can't contain a potential 'any' type "module": "commonjs", // compile the output of the module type "target": "es5", "lib": [" es2017 ", "dom"]}, "include:" [/ / need to compile the code ". / SRC / * "]}Copy the codeconclusion
This article will stop there, other details are not covered, to learn more about other configuration files can be source repository, the next article will cover some knowledge of functional programming.