使用Webpack在Angular打字稿项目中加载第三方脚本

Question

我有一个使用Typescript和Webpack的Angular项目。它是Visual Studio 2017附带的默认Angular项目模板。

它基本上为您提供了一个简单的Web应用程序，其中安装了一些NPM模块，如bootstrap和jquery。

我有一个＆＃34;第三方＆＃34;无法与NPM或Bower一起安装的javascript文件，但它确实需要jQuery。

Web应用程序加载main-client.js和main-client.vendor.js。两者都是由Webpack创建的。最后一个包含Bootstrap，jQuery等代码。

在我的网页中包含这样的脚本（我实际上有更多的脚本）：

<script type="text/javascript" src="~/dist/main-client.js"></script>
<script type="text/javascript" src="~/dist/main-client.vendor.js"></script>
<script type="text/javascript" src="~/plugins/custom.jqueryfile.js"></script>

但网页不断给我以下错误：

Uncaught ReferenceError: jQuery is not defined

以下是一些图片，显示了如何在我的项目中设置脚本顺序。

所有文件都按正确顺序加载

基本上我的问题是：我如何加载＆＃34;第三方＆＃34;正确的脚本需要加载＆＃34;全局＆＃34;，但也需要jQuery。我的Typescript文件中是否有一般的位置？或者可以用Webpack完成吗？

Answer 1

发生错误是因为您根本没有将jQuery包含在项目中。您可以在控制台中查找node_modules/jquery目录或键入jQuery以进行检查。

正如您在Bootstrap的package.lock文件中所看到的，jQuery仅作为对等依赖项出现。

如果您要使用的第三方脚本必须在webpack的供应商输出之前定义，那么我建议您在index.html的开头添加常用的脚本标记：

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

您也可以尝试npm i jquery（不要忘记--save标记npm版本＆lt; 5）。插件应该等待jQuery初始化，所以它也可以使它工作。但是，您还需要在输入文件中import 'jquery';。