jquery - How do I use jQuery and jQuery-ui with Parcel (bundler)?

Question

I installed jquery(3.2.1) and jquery-ui-dist(1.12.1) via npm. (they're not included as script tags in html)

In client script I use:

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

Answer 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();
});

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