阅读 361

开发自己的工具库(一):项目搭建

前言

本系列文章将通过自己的一个开发工具库的实战经验(踩过的坑)教大家如何开发属于自己的一个工具库,在这里你可以学到Git的使用规范,基础项目的搭建,代码编写的规范,函数式编程思想,TypeScript实战,单元测试,编写文档和发布NPM包等等知识。

阅读文章你可能需要以下基础知识:

项目源码

Windlike-Utils

Git项目

Git分支

├── master -------------------------------- 和发布版本代码保持一致
│   ├── dev -------------------------------- 开发分支
│   │   ├── feature -------------------------------- 开发新特性的分支
│   │   ├── hotfix -------------------------------- 修复BUG的分支
复制代码

Git提交规范

代码有编写规范,Git提交的信息当然也要有规范啦。

<type>(<scope>): <subject>
// 空一行
<body>
// 空一行
<footer>
复制代码

type用于说明本次提交的类型:

  • feat:新功能(feature)
  • fix:修补bug
  • docs:文档(documentation)
  • style: 格式(不影响代码运行的变动)
  • refactor:重构(即不是新增功能,也不是修改bug的代码变动)
  • test:增加测试
  • chore:构建过程或辅助工具的变动

scope用于说明本次改动涉及的范围,如数据层、控制层,选填。 subject为本次提交的简要概述。

这里是一个栗子:

fix(model): fix something

- fix first bug
- fix second bug

Closes #123
复制代码

可是有人不遵守或者无意识地不按格式填怎么办呢,这里就需要工具来做验证啦,我使用的是ghooksvalidate-commit-msg,具体看下面

想看更多Git提交规范知识点这里:Commit message 和 Change log 编写指南

项目结构

├── .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提交信息

使用ghooksvalidate-commit-msg可以在git提交时检查信息。

"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/*"
    ]
}
复制代码

总结

这篇文章就讲到这里啦,其他的细节就不一一讲啦,想了解其他的配置文件可以到源码仓库,下篇文章将讲下函数式编程的一些知识。

关注下面的标签,发现更多相似文章
评论