我司由于業務調整需要重新對現有的web portal 進行開發.現有的portal 存在10年并且承載了大量業務,里面有jq,knockout和angularjs 還有react 15和16 簡直就是一個前端發展史有沒有.
那么這么復雜的業務邏輯的dashboard開發必然要ts
如何初始化一個npm項目和這里不再細說
在server 下
安裝依賴包

$ npm install --save-dev ts-node nodemon typescript 

在之前nodejs 不支持es6語法的時候,有一個東西叫babel-node, 就是如果熟悉的人一定知道,就是用來代替node 命令來運行由es6語法編寫而成的nodejs 服務.
基本用法

$ ts-node app.ts

tsconfig.json如下

{
  "compilerOptions": {
    "target": "es2016",                     
    "module": "commonjs",                    
    "lib": ["es2016", "esnext.asynciterable"],                    
    "outDir": "dist",                        
    "rootDir": "src",                        
    "strict": true,                          
    "esModuleInterop": true,             
  }
}

大型項目,需要 多人開發的情況下,規約很重要,那么prettier和eslint 就必須要有..
eslint 配合 prettier 的配置如下 具體的可以在官網去看看相應的配置

.prettierrc.js

module.exports = {
  semi: true,
  trailingComma: "none",
  singleQuote: true,
  printWidth: 80,
  tabWidth: 2
}

接著到.eslintrc.js

  parser: '@typescript-eslint/parser',
  extends: [
    'plugin:@typescript-eslint/recommended',
    'prettier/@typescript-eslint',
    'plugin:prettier/recommended',
  ],
  parserOptions: {
    ecmaVersion: 2016,
    sourceType: 'module',
  },
  rules: {
    // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
    "@typescript-eslint/explicit-function-return-type": "off",
    "@typescript-eslint/interface-name-prefix": "off"
  },
};

其實到這里,基本上
在package.json 的script里添加兩條命令就可以進行開發了

"dev": "nodemon --ext js,ts --exec 'npm run lint:dev && ts-node src/main.ts'",
"lint:dev": "eslint './src/**/*.ts'"

ts-node每次不會產生編譯后的js文件,而是把它們丟到內存里, 隨著結束進程就銷毀
因此,eslint 可能不會起作用對你的代碼進行約束,因此你需要手動啟動 eslint 然后通過了再 開始執行ts-node.因為 nodemon exec參數傳進去的字符串可能有點問題,因此,你直接把eslint傳進去不工作,所以寫成一個命令即可.

那么大型的項目,需要調試,那你要設置斷點. vscode設置斷點這個玩意真是比較麻煩
打開項目,在左邊那個dubug標簽,你點擊它然后會生成一個

通過vscode 的launch.json 去執行npm腳本
首先在 package .json中的scripts里加入以下代碼

"debug":"nodemon  --ext js,ts   --exec node -r ts-node/register --inspect src/main.ts",

解釋一下就是使用nodemon 然后進入調試模式(打好斷點后) 接著執行debug模式
ts-node 本身不支持--inspect這個命令的,所以你需要用用原生的node然后引入ts-node 來編譯ts -r就是--require的縮寫然后開始
launch.json如下

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node2",
            "request": "launch",
            "name": "Launch Program",
            "runtimeExecutable": "npm",
            "runtimeArgs": [
                "run",
                "debug"
            ],
            "cwd": "${workspaceRoot}/server",
            "port": 9229,
           "console":"intergratedTerminal",
            "sourceMaps": true
        }
    ]
}

這樣就萬事大吉了,然后你可以直接啟動,debug會自動監聽9229 這個端口,因為你--inspect后,debugger就會掛載在你的應用程序里,通過websocket來通信.
然后你就可以愉快地進一步搭建基礎設施啦.