如何将 jQuery 和 jQuery-ui 与 Parcel（捆绑器）一起使用？

Posted 2023-02-23

【中文标题】如何将 jQuery 和 jQuery-ui 与 Parcel（捆绑器）一起使用？

【英文标题】：How do I use jQuery and jQuery-ui with Parcel (bundler)?

【发布时间】：2018-06-06 16:51:46

【问题描述】：

我通过 npm 安装了 jquery(3.2.1) 和 jquery-ui-dist(1.12.1)。 （它们不作为脚本标签包含在 html 中）

在我使用的客户端脚本中：

window.$ = require('jquery');// plain jQuery stuff works fine
import 'jquery-ui-dist';     // breaks whole jQuery, with Error (missing module 8)

【参考方案1】：

我今天在使用 angularjs 应用程序和 parcel-bundler 时遇到了类似的问题。 似乎 parcel 不能很好地处理（现在？）外部模块中引入的全局变量。除其他问题外。

一种解决方法；您可以像这样使用普通要求而不是导入：

var jquery = require("jquery");
window.$ = window.jQuery = jquery; // notice the definition of global variables here
require("jquery-ui-dist/jquery-ui.js");

$(function() 
  $("#datepicker").datepicker();
);

如果你坚持使用导入，你应该创建一个单独的文件，例如命名为import-jquery.js，内容如下：

import jquery from "jquery";

export default (window.$ = window.jQuery = jquery);

并将其导入您的主文件：

import "./import-jquery";
import "jquery-ui-dist/jquery-ui.js";

$(function() 
  $("#datepicker").datepicker();
);

我希望我们在不久的将来能得到更好的支持。

【讨论】：

我尝试了两种方法，都成功了，非常感谢！顺便说一句，这个多重赋值（window.$ = window.jQuery = jquery）是否有任何通用名称，所以我可以阅读一下它？在我看来，这个答案的副作用很好:)

@okram 寻找«链式分配javascript»。 mdn上有一小段关于这个的。

我可以说，直到今天，Parcel 仍然不完全支持这些由模块引起的全局变量。