gpt4 book ai didi

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

转载 作者:搜寻专家 更新时间:2023-10-30 21:12:38 25 4
gpt4 key购买 nike

如果我想使用像 jQuery 这样的 js 库,在了解 TypeScript 模块的工作原理之前,我会简单地添加一个引用该库的 script 标签,但现在我正在使用 TypeScript我经常找到这样的例子:

import * as $ from 'jquery'

但是 jQuery 不是 TypeScript 模块,那么它是如何工作的呢?我应该如何向我的模块添加外部非 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

在提到我实际使用的内容之后,我不明白的是,当我在 require.js 加载

<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

二) app.ts

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

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

就是这样。

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

enter image description here enter image description here

有一件事我还不是很清楚,所有的魔法是如何在幕后运作的,但是看看为 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 标签文件,您可以在 tsconfig.json 文件中添加 index.d.ts 的路径,如下所示:

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

最佳答案

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

你说得对,jQuery 不是作为 TypeScript 模块编写的。但有两点需要注意:

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

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

首先,让我们获取 jQuery 的声明文件:

npm install -S @types/jquery

马上,您应该能够在 TypeScript 中引用 jQuery。如果没有,请添加 "jquery""types"在你的字段 tsconfig.json如下:

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

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

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


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

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


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

npm install -S jquery

Webpack 使用 ts-loader会处理剩下的事情。参见 our guide here了解如何设置 Webpack。请注意,在链接设置中,您仍然需要使用 <script>您决定添加到 externals 的任何库的标签字段。


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

你必须让 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>

关于typescript - 如何正确地将 .js 库添加到我的应用程序,以便我可以将它们导入 TypeScript 模块,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40443088/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com