在 Vue JS 项目中不能包含没有 npm 的 JQuery答案

【问题标题】：Can not include JQuery without npm in Vue JS project在 Vue JS 项目中不能包含没有 npm 的 JQuery
【发布时间】：2019-11-29 21:07:29
【问题描述】：

我正在尝试在不使用 npm 的情况下将 JQuery 导入到我的 Vue JS 项目中。这是我正在尝试的：

***jquery-functions.js***

import '../../public/js/jquery.min.js'      

export function bar(){ $(".foo"){...} }
/$ is not defined as function/

【问题讨论】：

那是因为var 声明了一个模块级变量，而不是一个全局变量。
它没有全局定义变量。
“所以我找到了这个答案，它说如果变量是在该库中全局定义的，我可以这样使用它们。” 这是正确的，但我们又回来了对于 Bergi 的评论，即该变量未全局定义。
从 Vuejs 标签我可以看出这很可能是 webpack 的误解。您可以通过 main.js 设置全局变量在 vuejs 中注册库，或者在 jQueries 实例中您可以在 eslintrc.js 中设置 env 变量：stackoverflow.com/questions/44496906/…
如果您可以使用 eslintrc.js 进行设置，请执行此操作。 Vuejs 和 Webpack 可配置为能够利用对 jQuery 之类的东西的全局访问，所以除非你对这个静态 jQuery 文件有严格的要求，否则我会尝试切换到使用你的打包器（webpack 或其他）。

标签： javascript jquery vue.js ecmascript-6 javascript-import

【解决方案1】：

var hello 在模块范围内评估，这可以防止变量泄漏到全局范围。

为了定义一个全局，它应该被显式地赋值：

window.hello = function (x){x+5};

对于 jQuery，它特定于模块的工作方式。它是 UMD 模块，当 jquery.min.js 作为模块导入时，它不会暴露为全局。

它应该被明确地分配为一个全局或者：

import jQuery from '../../public/js/jquery.min.js';

window.$ = window.jQuery = jQuery;

或者这可以通过 Vue CLI 内部使用的 Webpack 来完成，例如 the answer in related question suggests。

【讨论】：

好的，我已经学会了如何定义全局窗口变量，但老实说，我试图导入旧版本的 JQuery。所以从那时起，JQuery 似乎没有定义一个全局变量。我想要做的只是像我们在 index.html 文件中那样将脚本背靠背包含在内，所以我希望能够在全球范围内使用它。如何使用 JQuery 在 .vue 文件中实现这一点？
我想要做的只是像我们在 index.html 中所做的那样，背靠背地包含脚本 - 这可能意味着模块被滥用。我不确定您的示例与 jQuery 有什么关系，它没有在那里使用。你能澄清一下吗？可能是这条评论所暗示的stackoverflow.com/questions/57136714/…
我已经更新了问题。基本上我只是想从我的静态文件中导入 JQuery 而不使用 npm。
这是一种不同的情况，它是特定于 jQuery 的。我更新了帖子。由于您希望它是全局的，因此使用

【解决方案2】：

我尝试了上述所有方法，但不知何故无法正常工作。 eslint 给出了$() 的函数未定义错误，或者引导程序无法看到包含的 jQuery。我不知道是否可以在全局范围内包含 jQuery，但我通过将 jQuery 包含到带有 <script> 标签的 index.html 文件中找到了解决方案。然后在我的 jquery-functions.js 文件中我禁用了 eslint 然后一切都在运行时运行良好。

***jquery-functions.js***
 /* eslint-disable */     

export function bar(){ $(".foo"){...} }

我这样做是为了将 jQuery 方法与 Vue JS 方法分开。最好使用 npm 来避免全局包含 jQuery，这样您就可以只将它包含在您需要的组件中。对我来说，我担心我从 Internet 下载的模板中包含的所有其他（其中 6 个）jQuery 依赖库的兼容性。

【讨论】：