jquery-ui 和 webpack，如何将其管理到模块中？

Posted 2023-02-24

【中文标题】jquery-ui 和 webpack，如何将其管理到模块中？

【英文标题】：jquery-ui and webpack, how to manage it into module?

【发布时间】：2016-03-04 01:39:04

【问题描述】：

知道如何处理吗？我的意思是 jquery-ui 似乎不是 amd 并且我不知道如何管理它，知道吗？

【参考方案1】：

jquery-ui-dist 和 jquery-ui-bundle 似乎没有由 jquery-ui 团队维护。在 jquery-ui v1.12 之后可以使用来自 npm 的官方 jquery-ui 包与 webpack。

通过更新 package.json 和 npm install 将 jquery-ui 更新到 1.12。

然后你可以像这样require每个小部件。

require("jquery-ui/ui/widgets/autocomplete");
require("jquery-ui/ui/widgets/draggable");

如果您之前使用过require("jquery-ui")，则需要将其替换为每个小部件的单独导入。我认为新方法更好，因为它只会捆绑我们需要使用的小部件的代码。

请参阅documentation 了解如何使用 1.12 官方 npm 包。

【讨论】：

这个答案对我帮助最大，但在我动态加载它之前我的仍然没有工作。在编译期间不需要它，因为可拖动小部件一直在寻找 jQuery 对象。 （不是 global.jQuery 或 window.jQuery）。所以我在页面加载后需要它

@NnennaUde 在require("jquery-ui/ui/widgets/draggable"); 之前添加require('jquery'); 有效吗？

不，这不是问题所在。无论如何，从那时起，我就可以让它工作了。究竟是什么问题仍然是个谜。但是，我确实在让它在 jsdom 测试环境中工作时遇到了问题。同样的错误再次出现。 $.widget( "ui.draggable", $.ui.mouse, TypeError: Cannot read property 'mouse' of undefined 但是，我能够通过要求其所有依赖项来修复它，如下所示：require('jquery-ui/ui/version'); require('jquery-ui/ui/plugin'); require('jquery-ui/ui/widget'); require('jquery-ui/ui/widgets/mouse');

对于在 JQuery-UI 上找到 NPM 安装说明的文档是多么困难，我感到非常痛苦。我迫不及待地想从我当前的项目中杀死这个图书馆的那一天！

如何包含自动完成的css文件？

【参考方案2】：

由于某种原因，jquery-ui 不能很好地与 webpack 配合使用。我不得不改为要求jquery-ui-bundle。

npm i -S jquery-ui-bundle

然后在 jquery 之后需要它，例如

require('jquery');
require('jquery-ui-bundle');

【讨论】：

谢谢。省了我这么多头痛。似乎 jquery-ui 包不包含准备好的构建 jquery-ui.js 文件：/

这也适用于我的电子应用程序部署。谢谢！

您能否用一个工作示例扩展您的答案，例如 webpack.config.js 与 jquery 和 jquery-ui？

jquery-ui 现在可以很好地与 webpack 配合使用。看我的回答。

我花了几个小时试图弄清楚为什么 jquery-ui 在 vanilla js 迁移到 Create React App 期间会抛出错误...这个答案让我很开心！

【参考方案3】：

你很幸运，我昨天就这样做了，这很容易。

npm install --save jquery jquery-ui

确保您有 jquery 别名以使用 webpack.config.js 中的插件解析

...
plugins: [
    new webpack.ProvidePlugin(
      "$":"jquery",
      "jQuery":"jquery",
      "window.jQuery":"jquery"
    ),
...

然后在 webpack.config.js 中包含两个别名

node_modules 文件夹 jquery-ui 文件夹

``````

resolve : 
    alias: 
      // bind version of jquery-ui
      "jquery-ui": "jquery-ui/jquery-ui.js",      
      // bind to modules;
      modules: path.join(__dirname, "node_modules"),

确保首先在您的应用启动文件中加载 jquery。

var $ = require("jquery"),
        require("jquery-ui");

如果您需要使用主题，请配置 css-loader 和 file-loader。不要忘记 npm install 那些加载器。

module: 
    loaders: [
       test: /\.css$/, loader: "style!css" ,
       test: /\.(jpe?g|png|gif)$/i, loader:"file" ,

并在你的应用启动文件中使用。

require("modules/jquery-ui/themes/black-tie/jquery-ui.css");
require("modules/jquery-ui/themes/black-tie/jquery-ui.theme.css");

【讨论】：

应用启动文件是什么？如果你在那里初始化 $，你怎样才能让它对你的所有文件都是全局的？

你在使用 npm 吗？ jquery-ui.js 没有自带

启动文件是你做node app.js时的文件，你的app的入口文件。当你使用提供插件时，这就是你如何使它对 webpack 处理的任何文件都是全局的。对于所有其他文件，您只需要它。是的，我使用的是 npm，你需要 jquery 和 jquery-ui 以及所有其他的东西，比如 webpack 和你在这个解决方案工作之前使用的加载器。

下面的答案仅适用于使用 bundle 时，不适用于 npm install jQuery，因为这样你得到的不是 bundle，而是包！

@WendellMuntslag 我只需要添加新的 webpack.ProvidePlugin( "$":"jquery", "jQuery":"jquery", "window.jQuery":"jquery" ),我的 webpack.config.js。确实需要别名。有效。谢谢。

【参考方案4】：

webpack-jquery-ui

webpack-jquery-ui - 使用这个插件，例如如果您使用 Rails 5，请运行

 yarn add webpack-jquery-ui

当jQuery UI插件启动时，它会检查jquery是否提供，所以

将此代码添加到您的 webpacker 配置文件（shared.js - 如果您将其与 Rails 5 一起使用）

plugins: [
  new webpack.ProvidePlugin(
      $: "jquery",
      jQuery: "jquery",
      "window.jQuery": "jquery'",
      "window.$": "jquery"
  )
]

将这些行添加到您的应用代码中。

require('webpack-jquery-ui');
require('webpack-jquery-ui/css');

修复ActionController::InvalidAuthenticityToken 中的jquery.ajax

您必须在所有PUT、POST 和DELETE 请求中传递authenticity_token 参数。

为此，您通常可以使用 $('[name="csrf-token"]')[0].content 从标头中获取它

所以你的请求看起来像：

var that = this;
$.ajax(
  url: navigator_item.url,
  data:  authenticity_token: $('[name="csrf-token"]')[0].content,
  method: 'DELETE',
  success: function(res) 
   ...
  
);

我以另一种方式将 jQuery 包含到我的应用程序中

而不是使用：

plugins: [
new webpack.ProvidePlugin(...

你应该在 webpack 配置文件中添加 'jquery': 'jquery/src/jquery' 到别名：

module.exports = 
  resolve: 
    alias: 
        'jquery': 'jquery/src/jquery'
    
  

它将提供模块名称“jquery”。 jQuery UI 在初始化时检查这个名称。

然后在你的 app.js 文件中编写：

import $ from 'jquery'

import 'webpack-jquery-ui/css'
import 'webpack-jquery-ui/sortable' // if you need only sortable widget.

window.jQuery = $;
window.$ = $; // lazy fix if you want to use jQuery in your inline scripts.

【讨论】：

谢谢，斯坦利！您添加别名的第二个解决方案确实对我有用

【参考方案5】：

接受的答案对我不起作用，因为 NPM 上的 jQuery-ui 包不是预先构建的，因此不包含 jquery-ui.js;该软件包要么需要在使用前构建，要么需要单独包含/使用的所有小部件。

让整个包正常工作的最快方法是首先下载可分发版本：

npm install jquery-ui-dist --save

我需要为jquery-ui-dist 添加一个别名以避免“找不到模块”错误（仅使用require('jquery-ui-dist') 将不起作用，因为.js 文件名不同），方法是将其添加到webpack.config.js：

resolve: 
    alias: 
        'jquery-ui': 'jquery-ui-dist/jquery-ui.js'
    
,

最后，您可以在加载模块的 .js 文件中使用它：

var jQuery = require('jquery');
require('jquery-ui'); 

或者，您可以通过在 webpack.config.js 中使用 ProvidePlugin 来避免在加载模块时必须 require 脚本，并且必须将 jQuery 声明为变量：

 plugins: [
    new webpack.ProvidePlugin(
        'jQuery': 'jquery',
        '$': 'jquery',
        'global.jQuery': 'jquery'
    )
],

【讨论】：

我无法让它工作。使用 webpack.ProvidePlugin 它会正确地向窗口公开“jQuery”和“$”变量，但没有“jquery-ui”插件。如果我 console.log($.ui) 它给出未定义的。 @chrBrd 有什么想法吗？你用的是哪个版本的 webpack？

应该是 1.x 版？？ - 我写答案时的最新情况。如果你使用require而不是ProvidePlugin，它是否有效？

您可以使用require('jquery-ui-dist/jquery-ui.js'); 代替别名。

【参考方案6】：

对我有用的步骤（在 Rails 5.1.6 项目中）与上述任何步骤都不相同：

安装 jquery 和 jquery-ui：yarn add jquery 和 yarn add jquery-ui

将以下内容添加到 webpack 配置（即在 /config/webpack/environment.js 中）以全局设置 $ 和 jquery 和 jQuery：

environment.plugins.prepend(
  'Provide',
  new webpack.ProvidePlugin(
    $: 'jquery',
    jQuery: 'jquery',
    jquery: 'jquery'
  )
)

需要你想要的任何单独的 jquery-ui 包，放在包的顶部（例如，在 /javascript/packs/application.js 的顶部：

require("jquery-ui/ui/widgets/sortable")

然后，您可以在包中的任何位置致电$('.selector').sortable()。

【参考方案7】：

在你的 node_modules 中添加 jquery;

npm install --save jquery jquery-ui

并在您的 webpack.config.js 中添加外部组件，例如；

...

  externals: 
// require("jquery") is external and available
//  on the global var jQuery
"jquery": "jQuery",
"jquery-ui": "jquery-ui/jquery-ui.js", 

对我有用

【参考方案8】：

您应该导入所有这些并检查您真正需要哪些。

require('jquery-ui/ui/core.js');
require('jquery-ui/ui/data.js');
require('jquery-ui/ui/form.js');
require('jquery-ui/ui/form-reset-mixin.js');
require('jquery-ui/ui/focusable.js');
require('jquery-ui/ui/disable-selection.js');
require('jquery-ui/ui/plugin.js');
require('jquery-ui/ui/labels.js');
require('jquery-ui/ui/position.js');
require('jquery-ui/ui/scroll-parent.js');
require('jquery-ui/ui/tabbable.js');
require('jquery-ui/ui/unique-id.js');
require('jquery-ui/ui/widget.js');
require('jquery-ui/ui/widgets/accordion.js');
require('jquery-ui/ui/widgets/autocomplete.js');
require('jquery-ui/ui/widgets/button.js');
require('jquery-ui/ui/widgets/checkboxradio.js');
require('jquery-ui/ui/widgets/controlgroup.js');
require('jquery-ui/ui/widgets/datepicker.js');
require('jquery-ui/ui/widgets/dialog.js');
require('jquery-ui/ui/widgets/draggable.js');
require('jquery-ui/ui/widgets/droppable.js');
require('jquery-ui/ui/widgets/menu.js');
require('jquery-ui/ui/widgets/mouse.js');
require('jquery-ui/ui/widgets/progressbar.js');
require('jquery-ui/ui/widgets/resizable.js');
require('jquery-ui/ui/widgets/selectable.js');
require('jquery-ui/ui/widgets/selectmenu.js');
require('jquery-ui/ui/widgets/slider.js');
require('jquery-ui/ui/widgets/sortable.js');
require('jquery-ui/ui/widgets/spinner.js');
require('jquery-ui/ui/widgets/tabs.js');
require('jquery-ui/ui/widgets/tooltip.js');
require('jquery-ui/ui/effect.js');
require('jquery-ui/ui/effects/effect-blind.js');
require('jquery-ui/ui/effects/effect-bounce.js');
require('jquery-ui/ui/effects/effect-clip.js');
require('jquery-ui/ui/effects/effect-drop.js');
require('jquery-ui/ui/effects/effect-explode.js');
require('jquery-ui/ui/effects/effect-fade.js');
require('jquery-ui/ui/effects/effect-fold.js');
require('jquery-ui/ui/effects/effect-highlight.js');
require('jquery-ui/ui/effects/effect-puff.js');
require('jquery-ui/ui/effects/effect-pulsate.js');
require('jquery-ui/ui/effects/effect-scale.js');
require('jquery-ui/ui/effects/effect-shake.js');
require('jquery-ui/ui/effects/effect-size.js');
require('jquery-ui/ui/effects/effect-slide.js');
require('jquery-ui/ui/effects/effect-transfer.js');
require('jquery-ui/ui/vendor/jquery-color/jquery.color.js');