使用typescript下的項目架構最佳實踐

若有錯誤，請聯繫筆者。分析碼字不易，轉載請代表出處，謝謝！

此文章記錄下在 typescript 項目裏的一些相關配置和包的選用，其中各類依賴包和最佳實踐都在不斷髮展演變中，最新的配置以該倉庫 MVVM 爲準。

typescript 支持

在webpack中使用 babel 7.0 +,摒棄了傳統的 ts-loader 或 awesome-typescript-loader 方案。緣由以下：

• 參考 1
• 參考 2

yarn add @babel/core babel-loader @babel/preset-env @babel/preset-typescript -D
yarn add @babel/plugin-proposal-class-propertie -D //根據項目需求添加其餘env未包含的轉義插件

複製代碼

babel 只負責轉換，並不會作對應的類型檢查，因此須要安裝 fork-ts-checker-webpack-plugin 來進行報錯提示：

yarn add fork-ts-checker-webpack-plugin -D
複製代碼

項目通用轉 ES5 安裝包：

yarn add @babel/plugin-transform-runtime @babel/runtime-corejs3 -D
複製代碼

babel.config.js：

module.exports = {
  presets: [
    [
      '@babel/env',
      {
        targets: '> 1%, not dead'
      }
    ],
    '@babel/preset-typescript'
  ],
  plugins: [
    [
      '@babel/plugin-transform-runtime',
      {
        corejs: 3
      }
    ],
    '@babel/plugin-proposal-class-properties'
  ]
};
複製代碼

tsconfig.json 配置：

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "commonjs",
    "noImplicitAny": true,
    "sourceMap": false
  },
  "include": ["src/**/*"]
}
複製代碼

webpack 配置：

module: {
  rules: [
    {
      test: /\.(js|ts)$/,
      exclude: /(node_modules|bower_components)/,
      use: ['babel-loader']
    }
  ];
}
複製代碼

代碼檢查 & 風格統一

代碼檢查使用 eslint（官方將來推薦），拋棄傳統的 tslint 方案：參考連接。

yarn add eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin -D

//@typescript-eslint/parser :將 TypeScript 轉換爲 ESTree，使 eslint 能夠識別
//@typescript-eslint/eslint-plugin :只是一個能夠打開或關閉的規則列表
複製代碼

@typescript-eslint/parser 做爲 babel 的解析器，這時候就不須要安裝 babel 默認推薦的 eslint 解析器(babel-eslint)了，規則列表查閱。

風格統一使用 prettier，在 typescript 項目裏將配置文件 prettier.config.js 裏添加 parser: "typescript" 便可(前提是已安裝 @typescript-eslint/parser：參考連接)。

項目通用 prettier 的其餘包：

yarn add prettier eslint-config-prettier eslint-plugin-prettier -D
複製代碼

結合 eslint+prettier，獲得：

prettier.config.js:

module.exports = {
  singleQuote: false,
  printWidth: 200,
  parser: 'typescript'
};
複製代碼

.eslintrc.js (這裏使用的 google 默認規則 eslint-config-google):

module.exports = {
  root: true,
  parser: '@typescript-eslint/parser',
  plugins: ['@typescript-eslint'],
  env: {
    browser: true,
    es6: true
  },
  extends: ['plugin:@typescript-eslint/recommended', 'google', 'prettier', 'prettier/@typescript-eslint'],
  globals: {
    Atomics: 'readonly',
    SharedArrayBuffer: 'readonly'
  },
  parserOptions: {
    ecmaVersion: 2018,
    sourceType: 'module'
  },
  rules: {
    '@typescript-eslint/no-explicit-any': 0,
    '@typescript-eslint/no-use-before-define': 0
  }
};
複製代碼

單元測試

jest

這裏選用 jest 框架來測試。jest 的優點？。

在 ts 項目裏，摒棄了傳統的 ts-jest，只需如上安裝 @babel/preset-typescript，並在 babel.config.js 裏的 presets 添加便可。參考連接。

yarn jest @types/jest -D  //@types/jest 是 jest 的 ts 類型定義文件，而 vscode 即是基於 ts 進行代碼提示的
複製代碼

• 經查 jest 依賴包裏發現，jest 依賴 babel-jest (用於支持 es6 語法)，故不須要在單獨引入依賴包 babel-jest。
• 由於引入了 @types/jest，也就不須要引入 eslint-plugin-jest 來消除 jest 變量的報錯。
• jest config 採用默認配置便可，更多個性化配置參見。

coveralls

這裏選用了 coveralls 做爲自動測試代碼覆蓋率的在線工具。因爲項目走 travis.com 的持續集成，因此配置爲：

yarn add coveralls -D
複製代碼

.coveralls.yml:

service_name: travis-pro
repo_token: COVERALLS_TOKEN # COVERALLS_TOKEN爲加密變量
複製代碼

package.json 添加 scripts (測試框架爲 jest，更多方法查閱):

"scripts": {
    "coveralls": "jest --coverage && cat ./coverage/lcov.info | coveralls"
  },
複製代碼

.travis.yml 添加：

script:
 - sed -i "s/COVERALLS_TOKEN/$COVERALLS_TOKEN/" .coveralls.yml #$COVERALLS_TOKEN爲在travis.com項目裏配置的加密變量
 - yarn run coveralls
複製代碼

在 vscode 裏調試 jest/webpack 等 node.js

調試 -> 添加配置 -> 選擇node.js，自動生成.vscode/launch.json，修改配置爲：

文檔

"configurations": [
        {
          "type": "node", //系統默認，不可更改，標識要使用的調試器的類型
          "request": "launch", //系統默認，不可更改，在指定的文件上啓動調試器 program. attach: 將調試器附加到已經運行的進程。
          "name": "Launch Program", //調試配置的名稱
          "program": "${workspaceFolder}/index.js", //要調試的Node.js程序的絕對路徑
          "args": ["--runInBand", "--env=jsdom", "${fileBasename}"], //傳遞給程序進行調試的參數[array]
          "runtimeExecutable": "npm", // 要使用的運行時可執行文件的絕對路徑。默認是node (https://code.visualstudio.com/docs/nodejs/nodejs-debugging#_launch-configuration-support-for-npm-and-other-tools)
          "runtimeArgs": ["run-script", "debug"], // 傳遞給運行時可執行文件的可選參數
          "runtimeVersion":"7.10.1", //使用nvm能夠用此屬性控制node.js版本
          "port": 5858, //要使用的調試端口
          "console": "externalTerminal", //指定如何顯示程序輸出: externalTerminal:獨立控制檯窗口,integratedTerminal(默認):VS代碼集成終端
          "stopOnEntry": true, // 設置爲true時，在調試程序的第一行中斷開調試器。若是省略（默認）或設置爲false，則調試器將程序運行到第一個斷點。
          "skipFiles": ["<node_internals>/**/*.js","${workspaceFolder}/lib/**/*.js"] // 跳過不感興趣的代碼, Node.js的內置核心模塊定義爲：<node_internals>，其餘變量定義(https://code.visualstudio.com/docs/editor/variables-reference)
        }
    ]
複製代碼

• 調試單一 node 文件：
  • launch.json 配置：
    • program:${workspaceFolder}/index.js
    • args:['--dev']
• 調試 npm scripts (包括普通 node 命令如 index.js 和非 node 命令如 jest,webpack 等)時：
  • launch.json 配置：
    • runtimeExecutable:"npm" //必須設置爲npm
    • runtimeArgs:["run", "debug"] //第一個參數必須爲run
    • runtimeVersion:"10.6.0" //可選
  • package.json 的 npm scripts 配置：
    • 必須加 --inspect-brk=5858，5858 與 port 設置須相同
    • 非普通命令須要轉換成 node 調用: webpack=>./node_modules/.bin/webpack (由於 npm run build 實際調用的是 node_modules/.bin/webpack)
    • 帶參數的命令接在後面便可：node --inspect-brk=5858 ./node_modules/.bin/jest --coverage

npm scripts:

"scripts": {
    "debug": "node --inspect-brk=5858 index.js",
    "build": "node --inspect-brk=5858 ./node_modules/.bin/webpack --mode=development",
    "test": "node --inspect-brk=5858 ./node_modules/.bin/jest --coverage"
  },
複製代碼

前端測試概念

測試類型

• 單元測試 (Unit Test) - 經過模擬輸入和預測輸出的方式測試獨立的函數或者類。
• 集成測試 (Integration Test) - 測試多個模塊間的聯動是否和指望相同。
• E2E 測試 (也被稱爲 Functional Test) - 關注點不在內部實現方式，而是測試產品在真實使用場景（好比在瀏覽器）中是否能夠達到預想的結果，屬於黑盒測試。

更多

其餘

Typescript 錯誤忽略

• 單行忽略 // @ts-ignore
• 忽略全文 // @ts-nocheck
• 取消忽略全文 // @ts-check

github 徽章

在 shields 上面可生成任意徽章。

.d.ts 文件是什麼

d.ts 就是 TypedDefinition 類型定義文件，用來定義類型信息以及接口規範。

ts代碼最終會編譯成 .js 的 js 代碼，供他人使用。這個時候類型信息就丟失了。因此 ts 編譯器會自動根據 .ts 中的信息，能夠自動生成對外的 .d.ts 文件，和生成的 js 文件搭配使用。其中，js 文件是給運行引擎用的，而 .d.ts 文件是給 IDE（智能編輯器） 寫代碼時參考用的。

如何測試本地 node 包

採用 npm link

• 在須要測試的包（如 test ）路徑下執行：npm link，這時 全局node_modules 包下就能夠看到這個 test 包。
• 在需引用的目標包的項目下安裝該測試包：npm link test（若是有做用域須要加上做用域：npm link @fe_korey/test）,這時 test 包就被安裝在了該目錄下，在 test 包裏的修改會同步到目標包裏。
• 取消鏈接：在 test 包裏執行：npm unlink 便可.

注意：在 webpack 項目中，若是用 npm link 方式測試本地包，須要設置 config:

resolve: {
  symlinks: false;
}
複製代碼