如何将jQuery和jQuery-ui与Parcel(捆绑销售商)结合使用? [英] How do I use jQuery and jQuery-ui with Parcel (bundler)?

问题描述

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

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)

推荐答案

我今天在angularjs应用&打包机. 似乎包裹不能很好地处理(暂时吗?)外部模块中引入的全局变量.除了其他问题.

I encountered similar issues today with an angularjs app & parcel-bundler. It seems that parcel doesn't handle well (for now?) global variables introduced in external modules. Amongst other issues.

一种解决方法；您可以使用普通的require而不是像这样的导入:

One way to go about it; you can use plain requires instead of imports like so:

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，其内容如下:

If you insist on using imports, you should create a separate file, call it for example import-jquery.js with the following content:

import jquery from "jquery";

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

并将其导入您的主文件:

and import it in your main file:

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

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

我希望我们会在不久的将来对此提供更好的支持.

I do hope we'll have better support of this in the near future.

这篇关于如何将jQuery和jQuery-ui与Parcel(捆绑销售商)结合使用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！