Webpack：使用依赖于 jquery 的非模块 javascript 文件答案

【问题标题】：Webpack: Using non-module javascript file with dependency on jqueryWebpack：使用依赖于 jquery 的非模块 javascript 文件
【发布时间】：2017-11-23 23:07:55
【问题描述】：

尽管有很多关于在 webpack 中使用 jquery 的问题，但我不知道如何包含依赖于 jquery 的 JS 文件并达到与脚本标签相同的效果。 github 或 Stack Overflow 上提到的每种方法都没有详细解释，也没有一种方法对我有用。另外，我没有使用 webpack 的经验。

我发现这些问题听起来和我的很接近，但他们没有具体回答这个问题：question & another question & another。这些问题没有提供实现这一结果的步骤。

概述：我正在使用这个template。我已将 nav-html 文件替换为需要（非模块）JS 文件的代码。文件中的代码不会导出任何内容，它应该在全局范围内运行。

在进行任何更改之前，请参阅此commit 了解基本模板。

方法一：在 webpack.config.vendor.js 中的 vendor 数组中包含 js 文件，检查这个commit

结果 1：我可以在 vendor.js 中看到代码，但是当我在 chrome 开发工具上设置断点时，代码没有被命中

方法 2：在 boot.ts 中添加了对 js 文件的要求。请注意，它不是一个模块。检查这个commit。

结果 2：未捕获的 ReferenceError：$ 未定义

方法 3：使用脚本加载器。检查这个commit。

结果 3：未捕获的 ReferenceError：$ 未定义

【问题讨论】：

那么你为什么不想使用脚本标签来包含jQuery呢？
@ChrisG jquery 已经包含在 vendor.js 中，为什么要再次包含它？在我看来，要么我使用 webpack 将库和依赖项捆绑在一起，要么一直使用脚本标签。
当我将 jQuery 添加到我的 react 应用程序时，我必须在导入行之后添加 /* global $ */。

标签： javascript jquery webpack

【解决方案1】：

抱歉，我没有看过你的代码，但希望对你有所帮助。

只需在其中一个模块中创建一个全局变量，您就可以将模块中的任何内容暴露给全局范围。

import * as $ from 'JQuery';
window.$ = $;

这将允许您的非模块代码引用作为模块加载的 Jquery。

【讨论】：