从零构建一个TypeScript-Node项目

[yanlele]

• 总体概括
• 装包问题
• 代码规范
• 测试部分
• 代码构建
• 总结
• 参考文章

总体概括

因为搭建的是node项目， 所以比前端项目搭建要简单很多。

从以下因素考虑

• 装包问题
  • yarn
  • 配置项： .yarnrc 、.npmrc
  • .gitignore
• 代码规范
  • eslint
  • prettier
  • commititlint
  • 每次提交自动检测eslint\commitLint
• 测试
  • jest、ts-jest
• 代码构建
  • tsconfig
  • typeings

装包问题

这个问题比较简单没有什么好说的， 推荐 yarn , 如果是非常复杂的项目， 推荐使用 yarn/workSpace + lerna 组合拳， 爽歪歪。

.yarnrc:

registry "https://registry.npm.taobao.org"

npmrc:

registry = https://registry.npm.taobao.org

.gitignore:

# See https://help.github.com/ignore-files/ for more about ignoring files.

# dependencies
node_modules/

# testing
coverage/
/doc/
/mock2easy/

# production
/build
/coverage

worker/

# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local
.idea
.idea/
/packages/**/*.js
/packages/**/*.js.map
!jest.config.js

tempDownload/

npm-debug.log*
yarn-debug.log*
yarn-error.log*
yarn.lock
package-lock.json

代码规范

集成eslint、prettier、recommended
.eslintrc.js:

module.exports = {
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    project: './tsconfig.json',
  },
  plugins: ['@typescript-eslint'],
  extends: [
    'prettier',
    'prettier/@typescript-eslint',
    'plugin:@typescript-eslint/recommended',
    'plugin:@typescript-eslint/eslint-recommended',
    'plugin:@typescript-eslint/recommended-requiring-type-checking',
    'plugin:prettier/recommended',
  ],
  env: {
    node: true,
    browser: false,
  },
  rules: {
    '@typescript-eslint/no-var-requires': 1,
    '@typescript-eslint/explicit-function-return-type': 2,
    '@typescript-eslint/explicit-member-accessibility': 2,
    'no-unused-vars': 2,
    semi: [2, 'always', { omitLastInOneLineBlock: true }],
  },
};

.prettierrc:

{
  "singleQuote": true,
  "trailingComma": "all",
  "printWidth": 140,
  "semi": true,
  "bracketSpacing": true,
  "jsxBracketSameLine": true,
  "arrowParens": "avoid",
  "requirePragma": false,
  "proseWrap": "preserve",
  "htmlWhitespaceSensitivity": "ignore",
  "tabWidth": 2
}

集成commitlint - commitlint.config.js:

module.exports = {
  extends: ['@commitlint/config-conventional'],
  rules: {
    'type-enum': [2, 'always', ['feat', 'fix', 'docs', 'style', 'refactor', 'test', 'chore', 'revert']],
    'subject-full-stop': [0, 'never'],
    'subject-case': [0, 'never'],
  },
};

每次提交自动检测eslint\commitLint：
可以看这篇文章：使用husky、prettier、lint、commitlint构建规范化项目实践

需要安装的依赖包：yarn add @commitlint/cli @commitlint/config-conventional @commitlint/prompt-cli commitizen lint-staged husky --dev

package.json

{
   "scripts": {
      "type-check": "tsc",
      "prettier": "prettier --write",
      "commit": "commit"
    },
    "config": {
      "commitizen": {
        "path": "cz-conventional-changelog"
      }
    },
    "husky": {
      "hooks": {
        "pre-commit": "lint-staged",
        "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
      }
    },
    "lint-staged": {
      "**/*.{js,ts,tsx}": [
        "yarn prettier",
        "git add"
      ],
      "**/*.{ts,spec.js,tsx}": [
        "eslint --fix",
        "git add"
      ]
    }
}

测试部分

装包：yarn add @types/jest jest ts-jest --dev

具体可以看看看这个文章： jest测试基础

jest.config.js:

module.exports = {
  transform: {
    '^.+\\.tsx?$': 'ts-jest',
  },
  testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$',
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
};

代码构建

tsconfig.json

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6",
    "noImplicitAny": false,
    //在表达式和声明上有隐含的any类型时报错
    "moduleResolution": "node",
    "typeRoots": [
      "node_modules/@type",
      "typings/modules",
      "node_modules"
    ],
    "allowJs": true,
    "emitDecoratorMetadata": true,
    //给源码里的装饰器声明加上设计类型元数据
    "experimentalDecorators": true,
    //启用实验性的ES装饰器
    "importHelpers": true,
    "removeComments": true,
    "preserveConstEnums": true,
    "sourceMap": true,
    "allowSyntheticDefaultImports": true,
    //    "outDir": "build",
    "baseUrl": ".",
    "lib": [
      "es6",
      "dom",
      "es7"
    ],
    "types": [
      "node",
      "@types/jest"
    ]
  },
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "node_modules/",
    "src/**/*.spec.ts",
    "src/**/*.js"
  ]
}

总结

package.json

{
  "name": "***",
  "version": "0.0.1",
  "description": "***",
  "main": "./src/main.js",
  "scripts": {
    "prepare": "npm run tsc",
    "lint": "eslint --ext .ts ./",
    "lint:fix": "yarn lint --fix",
    "type-check": "tsc",
    "prettier": "prettier --write",
    "commit": "commit",
    "test": "jest"
  },
  "config": {
    "commitizen": {
      "path": "cz-conventional-changelog"
    }
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged",
      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
    }
  },
  "lint-staged": {
    "**/*.{js,ts,tsx}": [
      "yarn prettier",
      "git add"
    ],
    "**/*.{ts,spec.js,tsx}": [
      "eslint --fix",
      "git add"
    ]
  },
  "devDependencies": {
    "@commitlint/cli": "^8.2.0",
    "@commitlint/config-conventional": "^8.2.0",
    "@commitlint/prompt-cli": "^8.2.0",
    "@types/jest": "^24.0.25",
    "@types/node": "^13.1.1",
    "@typescript-eslint/eslint-plugin": "^2.13.0",
    "@typescript-eslint/parser": "^2.13.0",
    "commitizen": "^4.0.3",
    "eslint": "^6.8.0",
    "eslint-config-prettier": "^6.9.0",
    "eslint-plugin-prettier": "^3.1.2",
    "husky": "^3.1.0",
    "jest": "^24.9.0",
    "lint-staged": "^9.5.0",
    "prettier": "^1.19.1",
    "ts-jest": "^24.2.0",
    "typescript": "^3.7.4"
  }
}

参考文章

• 在Typescript项目中，如何优雅的使用ESLint和Prettier
• jest测试基础
• 使用husky、prettier、lint、commitlint构建规范化项目实践
• unlight/node-package-starter/.eslintrc.js
• ESLint Plugin TypeScript