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

因为依赖太少，你们能够根据须要定制本身的方案！