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

因为依靠太少，人人能够根据须要定制本身的计划！