如何正确地将 .js 库添加到我的应用程序中，以便我可以将它们导入 TypeScript 模块

Question

在我了解一点 TypeScript 模块的工作原理之前，如果我想使用 jQuery 之类的 js 库，我会简单地添加一个引用该库的 script 标签，但现在我使用的是 TypeScript，我经常会找到类似的示例这个：

import * as $ from 'jquery'

但是 jQuery 不是 TypeScript 模块，那么它是如何工作的呢？我应该如何向我的模块添加外部非打字稿库？

编辑 #1

---

tsconfig.json

明确告诉 typescript 使用 AMD 格式（我选择了这个而不是 commonjs，因为我读到由于 AMD 异步加载模块，它更适合 Web 应用程序）

{
  "compilerOptions": {
    "sourceMap": false,
    "target": "es5",
    "module": "amd",
    "outDir": "Scripts"
  },
  "exclude": [
    "node_modules",
    "wwwroot"
  ]
}

要安装类型定义，我使用 typings

typings install dt~jquery --global --save

提到了我实际使用的内容，但我不明白的是，当我仅在 @987654331 之后指定要加载的文件（在本例中为 app.js）时，RequireJs 是如何找到第三方库的@加载

<script data-main="Scripts/app/app" src="Scripts/require.js"></script>  

我尝试在require.js 的脚本标签前后添加jquery.js 文件的脚本标签，但没有成功。那么我应该如何告诉require.js“看我需要这个x 文件，去为我加载它”？

我问这个是因为如果我正确理解类型定义的目的，它们的存在只是为了给我们类型检查，仅此而已，我们仍然需要添加我们想要使用的实际库。

---

编辑#2

所以最后这就是我最终要做的：

I) 根据此页面http://requirejs.org/docs/api.html#data-main，data-main 仅适用于页面只有一个主入口点并且当您需要其他 js 文件时会失败，因此应使用以下配置：

<script src="~/Scripts/require.js"></script>
<script>
        require.config({
            paths: {
                "lodash": "Scripts/lodash"
            }
        });
        require(["Scripts/app/js/app"]);
</script>

这里我明确告诉 require.js 在哪里可以找到我想要使用的库的源代码，在本例中为 lodash.js。只有完成所有路径映射后，我才指示 require 加载 app.js

II) app.ts

   /// <reference path="../../typings/index.d.ts" />
    import * as _ from "lodash";
    console.log('Using Lodash: ' + _.snakeCase("For Whom the Bells Toll");

要使类型定义正常工作，您必须包含 reference 标记

就是这样。

要测试一切是否正常，我所要做的就是检查控制台并查看一切是否按预期工作：

还有一点我还不是很清楚，所有的魔法在幕后是如何运作的，但是看看为 app.js 生成的 js 代码，我猜第三个依赖 "lodash " 在require.config指定的所有路径中查找

define(["require", "exports", "lodash"], function (require, exports, _) {
    "use strict";
    console.log('Using Lodash: ' + _.snakeCase("For Whom the Bells Toll"));
});

哦，最后一件事，如果您不想在需要使用 d.ts 文件时在 ts 文件中包含 reference 标记，则可以将路径添加到 index.d.ts在tsconfig.json 文件中是这样的：

{
  "compilerOptions": {
    "sourceMap": false,
    "target": "es5",
    "module": "amd",
    "outDir": "js"
  },
  "include": [
    "src/**/*.ts",
    "../typings/index.d.ts"
  ] 
}

Answer 1

首先，我要指出 TypeScript 不会强制您将 jQuery 用作模块。从技术上讲，您可以将其用作全局变量。

你说得对，jQuery 不是作为 TypeScript 模块编写的。但是有两件事要带走：

1. jQuery 以一种格式编写，以便可以在 CommonJS、AMD/Require.js 等模块系统中使用。因为 TypeScript 覆盖了 ES6 模块以抽象出这些系统，所以它更易于使用。
2. 可以使用 TypeScript 声明文件（也称为 .d.ts 文件）来描述不是用 TypeScript 编写的库。这些文件告诉 TypeScript 已经存在的 JavaScript 代码，以便您获得更好的工具和错误检测。

(2) 即使您不决定使用模块也适用。但是通过这种组合，您可以使用 TypeScript 按照您指定的方式使用 jQuery。

首先，让我们获取 jQuery 的声明文件：

npm install -S @types/jquery

您应该能够在 TypeScript 中引用 jQuery。如果没有，请将"jquery" 添加到tsconfig.json 中的"types" 字段，如下所示：

{
    "compilerOptions": {
        "types": ["jquery"]
    }
}

此时，只要您的文件不使用任何导入/导出，您就可以像以往一样使用 jQuery。

如果您这样做，请确保您仍然在您的 jQuery 的 HTML 中使用 <script> 标记。

---

现在，您仍然可以决定使用模块 - 在这种情况下，这会变得更加复杂，您需要选择要使用的模块系统。

一般来说，在新的 JavaScript 中使用模块被认为是最佳实践，但它会让人觉得有点不知所措。这不是 TypeScript 的问题，而是生态系统中的实践如何围绕模块浮出水面。

---

如果您使用的是 Webpack 或 Browserify，请将 "module": "commonjs" 添加到您的 tsconfig.json 中的编译器选项中。然后你就可以写了

npm install -S jquery

而带有ts-loader 的Webpack 将负责其余的工作。请参阅our guide here 了解如何设置 Webpack。请注意，在链接设置中，您仍需要为您决定添加到 externals 字段的任何库使用 <script> 标记。

---

如果您使用的是 Require.js，请将 "module": "amd" 添加到您的 tsconfig.json 的编译器选项中。 Require.js 需要一些配置才能运行，但我们有使用 AMD 模块的 a guide here。

你必须让 Require.js 知道导入到 jQuery 的内容应该重定向到哪里：

这可以放在自己的.ts 文件中，称为require-config.ts

declare var require: any;
require.config({
    paths: {
        "jquery": "Scripts/externals/jquery-3.1.1",
    }
});

然后您可以将适当的脚本标签添加到您的页面：

    <script src="./Scripts/externals/require.js"></script>
    <script src="./Scripts/app/require-config.js"></script>
    <script>
        require(["Scripts/app/app"]);
    </script>