typescript + amd tips

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 了，爽！

因爲依賴太少，你們能夠根據須要定製本身的方案！