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

любая идея, как с этим бороться? Я имею в виду, что jquery-ui, похоже, не является amd, и я не знаю, как это сделать, любая идея?

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

  1. Папка node_modules
  2. Папка 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"); 

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

npm i -S jquery-ui-bundle

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

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

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.

Принятый ответ не работает для меня, поскольку пакет 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 скриптов при загрузке модhive и объявить jQuery как переменную, используя ProvidePlugin в вашем webpack.config.js:

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

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. window.jQuery = $; window.$ = $; // lazy fix if you want to use jQuery in your inline scripts. 
  • Как я могу использовать ES6 в webpack.config.js?
  • Как сообщить серверу webpack dev для обслуживания index.html для любого маршрута
  • Динамически импортировать изображения из каталога с помощью webpack
  • Uncaught TypeError: fs.readFileSync не является функцией
  • Угловой 2 CLI огромный пакет поставщиков: как улучшить размер для prod?
  • Webpack ProvidePlugin vs externals?
  • Перемещение Webpack 4 CommonsChunkPlugin
  • Как создать несколько путей вывода в конфигурации Webpack
  • Давайте будем гением компьютера.