typescript + amd tips

tcdona發表於2019-02-16
TypeScript

typescript 配合 amd 規範的更輕量、”純” 前端開啟方式

曾經數年以前，就嘗試 typescript 無奈至今一直有幾個小問題沒有處理:

0 必須要 import * as $ from "jquery" 這樣的方式寫程式碼，才能有提示
1 由於0，必須要 webpack 打包專案，才能把 jquery 以 external 方式剔除
2 必須要 node_modules 下安裝各種庫的 d.ts 才能 resolve 到提示檔案

經常會想，既然很麻煩，怎麼使用無所謂，加個 webpack 工具鏈也能忍，html 提前引入指令碼方式要放棄，一點點妥協之後，專案才能跑起來，對 npm 和 webpack 的重度依賴終究是個梗！

於是突然有一天發現瞭如下解法：

import * as $ from "jquery"

使用程式碼不變，才能有提示

require.config({
    baseUrl: `./`,
    paths: {
        "jquery": "../lib/jquery.min",
    },
    shim: {
        "jquery": {
            exports: `$`
        },
    }
})

這裡同時加入 paths 和 shim，從而支援了 script 引入 和 require 載入

<script src="../lib/vue.min.js"></script>
<script src="../lib/esl.min.js"></script>

html 正常使用 script 全域性引入，我用了百度的 esl 載入器 requirejs 同理

"paths": {
  "jquery": ["typing/jquery/index.d.ts"]
},

tsconfig 配置後，可以把 @types/jquery 的申明檔案放在自定義專案目錄./typing/ 裡了

且你可以自定義靜態化的處理 typing 下的 d.ts 檔案!
且你可以自定義靜態化的處理 typing 下的 d.ts 檔案!
且你可以自定義靜態化的處理 typing 下的 d.ts 檔案!

重事3遍，d.ts 和 模組名的正確對應後，vscode 提示完美!

至此，任意一個前端專案僅需要依賴一個 tsc 編譯 typescript 就可以輕量的完美執行了，

終於可以優雅的寫 ts 了，爽！

由於依賴太少，大家可以根據需要定製自己的方案！

相關文章