Jquery ui jquery ui和网页包，如何将其管理到模块中？

你知道怎么处理吗？我的意思是，jquery ui似乎不是amd，我不知道如何管理它，有什么想法吗？

你很幸运，我昨天就做了这个，很简单

npm install --save jquery jquery-ui

确保在webpack.config.js中使用插件解析jquery别名

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

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

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

node_modules文件夹

jqueryui文件夹

``````

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");

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

如果需要使用主题，请配置css加载程序和文件加载程序。别忘了npm安装那些装载机

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

并在应用程序启动文件中使用

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

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

---

由于某种原因，

jqueryui

不能很好地使用webpack。我不得不要求使用

jqueryui捆绑包

npmi-S jquery ui捆绑包

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

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

---

接受的答案不适用于我，因为NPM上的jQuery ui包不是预构建的，因此不包含

jQuery ui.js

；该软件包需要在使用前构建，或者单独包含/使用所有小部件

我让整个软件包运行的最快方法是首先下载可分发版本：

npm install jquery-ui-dist --save

我需要为

jqueryui-dist

添加一个别名，以避免“找不到模块”错误（仅使用

require（'jquery-ui-dist'）

不起作用，因为.js文件名不同），方法是将其添加到

webpack.config.js

：

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

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

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

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

或者，通过在webpack.config.js中使用ProvidePlugin，您可以避免在加载模块时需要脚本，以及将jQuery声明为变量：

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

---

jqueryuidist

和

jqueryuibundle

似乎不由jqueryui团队维护。在jQueryUIV1.12之后，可以使用npm的官方

jQueryUI

包和webpack

通过更新

package.json

和

npm install

将jqueryui更新到1.12

然后您可以

要求
像这样的每个小部件

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

如果您使用了
require（“jqueryui”）
，然后需要为每个小部件使用单独的导入来替换它。我认为新方法更好，因为它将只捆绑我们需要使用的小部件的代码

请参阅关于使用1.12官方npm包的说明。
webpack jquery ui

-使用此插件，例如，如果您使用Rails 5，请运行

 yarn add webpack-jquery-ui

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

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

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

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

修复
jquery.ajax
中的
ActionController:：InvalidAuthenticityToken

您必须在所有的
PUT
、
POST
和
DELETE
请求中传递
authenticity\u令牌
参数

为此，您通常可以使用
$（'[name=“csrf token”]][0]从标题中获取它

因此，您的请求将类似于：

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({...

您应该将“jquery”：“jquery/src/jquery”添加到网页配置文件中的别名中：

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

它将提供模块名“jquery”。jqueryui在init上检查这个名称

然后在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.

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

安装jquery和jquery ui:
纱线添加jquery
和
纱线添加jquery ui

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

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

在包的顶部（例如
/javascript/packs/application.js
的顶部），需要您想要的任何一个jquery ui包：

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

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

然后，您可以调用包中的任意位置，例如，
$（'.selector'）.sortable（）
。
使用

npm install --save jquery jquery-ui

并在webpack.config.js中添加外部内容，如：


它对我有用
什么是应用程序启动文件？如果你在那里初始化$，你如何使它对你所有的文件都是全局的？你使用的是npm吗？jquery-ui.js没有附带它。启动文件是当你使用节点app.js时的文件，你的应用程序的入口文件。当你使用提供插件时，这就是你如何使它对网页处理的任何文件都是全局的ck.对于所有其他文件，您只需要它。是的，我使用的是npm，在这个解决方案工作之前，您需要jquery和jquery ui以及所有其他文件，如webpack和您使用的加载程序。下面的答案仅适用于使用捆绑包的情况，而不适用于npm安装jquery的情况，因为这样您就不会得到捆绑包，而是包！@WendellMuntslag我刚刚添加了新的网页包。ProvidePlugin（{“$”：“jquery”，“jquery:“jquery”，“window.jquery:“jquery”}），到我的webpack.config.js。确实需要别名。它起作用了。谢谢。谢谢。省去了我这么多的麻烦。似乎jquery ui包不包含现成的jquery-ui.js文件：/这对我的电子应用程序部署也起作用。谢谢！你能用jquery和
jqueryui
？
jqueryui
现在可以很好地使用webpack。请看我的答案。我花了几个小时试图找出为什么jqueryui在创建React应用程序的过程中会抛出错误……这个答案让我很开心！！我无法让它工作。使用webpack.ProvidePlugin可以正确地显示“jquery”和“$”变量添加到窗口，但没有“jquery ui”插件。如果我使用console.log（$.ui），它会给出未定义的。@chrBrd知道吗？你使用的是哪个版本的网页？它应该是1.x版本？？？-无论我在写答案时是什么版本。如果是，它能工作吗