使用Webpack在不同文件中的JQuery函数答案

【问题标题】：JQuery function in different file using Webpack使用Webpack在不同文件中的JQuery函数
【发布时间】：2020-04-20 16:36:13
【问题描述】：

我在 index.js 文件中有以下 JS：

import * as $ from 'jquery';
window.jQuery = $;

$(function () {
  $.fn.mapit = function () { 
    // Do something
  }
}

我试图将函数 mapit 移动到另一个文件：

index.js

import * as $ from 'jquery';
window.jQuery = $;
import 'mapit.js'

mapit.js

$(function () {
  $.fn.mapit = function () { 
    // Do something
  }
}

但我在 mapit 文件中收到一条错误消息 $ is undefined。

我正在使用 webpack 构建，入口点是 index.js

我该如何解决这个问题？

【问题讨论】：

【解决方案1】：

您需要反转您的导入。 mapit.js 没有导入 jquery，也没有定义它。 index.js 可以。

也许您最好的做法是将 jquery 移动到它自己的文件 (jquery.js)，将 jquery.js 导入 mapit.js，然后将 mapit.js 导入 index.js

【讨论】：

我在 index.js 中也有 JQuery 我只是没有发布该信息，因为我认为它不相关。
问题不是在 index.js 上缺少 jQuery，而是在 mapit.js 中缺少它。所以你要么直接在mapit.js中导入jQuery，要么导入一个导出jQuery的模块

【解决方案2】：

在mapit.js 中也做一个import * as $ from 'jquery';。

这就是模块在 JS 中的工作方式，您需要在要使用它们的文件中导入必要的模块。它不像传统的<script> 标签

【讨论】：