開發本身的工具庫(一)：項目搭建

時間 2019-11-17

標籤開發本身工具項目搭建简体版

原文原文鏈接

前言

本系列文章將經過本身的一個開發工具庫的實戰經驗(踩過的坑)教你們如何開發屬於本身的一個工具庫，在這裏你能夠學到Git的使用規範，基礎項目的搭建，代碼編寫的規範，函數式編程思想，TypeScript實戰，單元測試，編寫文檔和發佈NPM包等等知識。html

閱讀文章你可能須要如下基礎知識：node

Git的基本使用
TypeScript
ES6

項目源碼

Windlike-Utilsgit

Git項目

Git分支

├── master -------------------------------- 和發佈版本代碼保持一致
│   ├── dev -------------------------------- 開發分支
│   │   ├── feature -------------------------------- 開發新特性的分支
│   │   ├── hotfix -------------------------------- 修復BUG的分支
複製代碼

Git提交規範

代碼有編寫規範，Git提交的信息固然也要有規範啦。es6

<type>(<scope>): <subject>
// 空一行
<body>
// 空一行
<footer>
複製代碼

type用於說明本次提交的類型：github

feat：新功能（feature）
fix：修補bug
docs：文檔（documentation）
style：格式（不影響代碼運行的變更）
refactor：重構（即不是新增功能，也不是修改bug的代碼變更）
test：增長測試
chore：構建過程或輔助工具的變更

scope用於說明本次改動涉及的範圍，如數據層、控制層，選填。 subject爲本次提交的簡要概述。typescript

這裏是一個栗子：npm

fix(model): fix something

- fix first bug
- fix second bug

Closes #123
複製代碼

但是有人不遵照或者無心識地不按格式填怎麼辦呢，這裏就須要工具來作驗證啦，我使用的是ghooks和validate-commit-msg，具體看下面。編程

想看更多Git提交規範知識點這裏：Commit message 和 Change log 編寫指南json

項目結構

├── .vscode ------------------------------- vscode相關配置文件
├── dist ---------------------------------- 構建後文件的輸出目錄
├── docs ------------------------------ 文檔
├── release ---------------------------------- Gulp合併打包後的文件，用於CDN版本
├── packages ------------------------------ 存放獨立發佈的包的目錄
├── src ----------------------------------- 源碼
│   ├── __test__ -------------------------- 存放入口文件的測試用例
│   ├── <module> ------------------------------ 工具庫模塊
│   │   ├── __test__ ---------------------- 測試該模塊的測試用例
│   │   ├── index.d.ts ---------------------- 該模塊的頭文件
│   │   ├── index.ts ---------------------- 該模塊的實現代碼
│   ├── utils.d.ts ---------------------------- 公共的頭文件
│   ├── utils.ts ------------------------- 導出全部模塊的文件
├── package.json 
├── .eslintignore ----------------------------- eslint忽略配置文件
├── .eslintrc.js ------------------------- eslint配置文件
├── .gitignore --------------------------- git忽略配置文件
├── .npmignore ------------------------------ npm忽略配置文件，用於發佈
├── .vcmrc ----------------------------- 用於檢驗git提交信息是否符合格式
├── CHANGELOG.md ------------------------- 版本更變日誌
├── gulpfile.js ---------------------------- gulp
├── index.js ---------------------------- 入口文件
├── README.md ---------------------------- README
├── tsconfig.json ---------------------------- TypeScript配置文件
複製代碼

package.json

{
  "name": "windlike-utils",  // 要發佈包的名字
  "version": "2.0.7",  // 版本
  "description": "",  // 描述
  "main": "index.js",  // 入口文件
  "scripts": {
    "test": "jest",  // 測試
    "dev": "tsc -w --downlevelIteration",  // 開發，檢測代碼變化並編譯成JS
    "start": "node index",  // 運行入口文件
    "build": "tsc -d && gulp build",  // 打包，編譯成JS並用Gulp合併壓縮
    "eslint": "eslint src --ext .ts",  // 檢查代碼格式
    "eslint:fix": "eslint src --ext .ts --fix",// 檢查並修復代碼格式
    "log": "conventional-changelog -p angular -i CHANGELOG.md -w -r 0"  // 生成版本日誌
  },
  "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",  // 生成版本日誌的工具
    "eslint": "^5.2.0",
    "eslint-plugin-typescript": "^0.12.0",   // eslint檢測TS代碼的工具
    "ghooks": "^2.0.4",  // git週期管理
    "gulp": "^3.9.1",
    "gulp-concat": "^2.6.1",  // gulp合併工具
    "gulp-uglify": "^3.0.0",  // gulp壓縮工具
    "jest": "^23.4.1",  // 測試代碼的工具
    "source-map-loader": "^0.2.3",
    "ts-jest": "^23.0.1",
    "typescript": "^2.6.2",
    "typescript-eslint-parser": "^17.0.1",  // eslint檢測TS代碼的工具
    "validate-commit-msg": "^2.14.0"  // 驗證git提交代碼工具
  },
  "jest": {  // jest配置
    "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",  // 提交前檢查代碼格式和運行測試用例
      "commit-msg": "validate-commit-msg"  // 提交時驗證提交信息是否符合格式
    }
  }
}
複製代碼

驗證Git提交信息

使用ghooks和validate-commit-msg能夠在git提交時檢查信息。gulp

"ghooks": {
  "pre-commit": "npm run eslint && npm test",  // 提交前檢查代碼格式和運行測試用例
  "commit-msg": "validate-commit-msg"  // 提交時驗證提交信息是否符合格式
}
複製代碼

但還須要一個驗證規則的文件.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
}
複製代碼

這樣就能夠檢驗提交信息是否符合格式，不符合是不能提交成功的。

TypeScript配置

tsconfig.json:

{
    "compilerOptions": {
        "outDir": "./dist/",  // 輸出目錄
        "sourceMap": true,  // 是否啓用sourceMap，用於代碼調試
        "noImplicitAny": true,  // 是否不能含有潛在的```any```類型
        "module": "commonjs",  // 編譯輸出的模塊類型
        "target": "es5",
        "lib": [
            "es2017",
            "dom"
        ]
    },
    "include": [  // 須要編譯的代碼
        "./src/*"
    ]
}
複製代碼