從零構建一個TS-Node項目

總體概括

因爲搭建的是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"
    ]
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/module-creator/markdown-index.git"
  },
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/module-creator/markdown-index/issues"
  },
  "homepage": "https://github.com/module-creator/markdown-index#readme",
  "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"
  }
}

參考文章

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章