Jquery-ui и webpack, как управлять им в модуль?

Ответ 1

youre повезло, что я сделал это только вчера, это довольно легко.

npm install --save jquery jquery-ui

Убедитесь, что у вас есть jquery aliased для разрешения с помощью плагина в 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-загрузчик и файловый загрузчик. Не забудьте установить npm эти загрузчики.

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

Ответ 2

По какой-то причине jquery-ui не очень понравился с webpack. Я должен был потребовать jquery-ui-bundle.

npm i -S jquery-ui-bundle

а затем потребовать его после jquery, например

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

Ответ 3

jquery-ui-dist и jquery-ui-bundle, похоже, не поддерживаются командой jquery-ui. После jquery-ui v1.12 его можно использовать официальный пакет jquery-ui от npm с webpack.

Обновите jquery-ui до 1.12, обновив package.json и npm install.

Затем вы можете require видеть каждый виджетов таким образом.

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

Если вы использовали require("jquery-ui"), прежде чем вам нужно будет заменить его отдельным импортом для каждого виджета. Я думаю, что новый способ лучше, потому что он свяжет только код для виджета, который нам нужно использовать.

См. документация об использовании официального пакета npm 1.12.

Ответ 4

Принятый ответ не работает для меня, поскольку пакет jQuery-ui на NPM не создан и поэтому не содержит 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'); 

В качестве альтернативы вы можете избежать require сценариев при загрузке модулей и объявить jQuery как переменную, используя ProvidePlugin в вашем webpack.config.js:

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

Ответ 5

WebPack-JQuery-щ

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

Вы должны передать параметр authenticity_token со всеми запросами PUT, POST и DELETE.

Для этого вы обычно можете извлечь его из заголовка с помощью $('[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({...

Вы должны добавить 'jquery': 'jquery/src/jquery' в псевдонимы в файле конфигурации webpack:

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

Он предоставит имя модуля "jquery". Пользовательский интерфейс jQuery проверяет это имя на init.

Затем в вашем файле app.js вы пишете:

import $ from 'jquery'

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