jquery-ui y webpack, ¿cómo administrarlo en el módulo?

alguna idea de cómo lidiar con eso? Quiero decir que jquery-ui parece no ser amd y no sé cómo manejar eso, ¿alguna idea?

estás de suerte. Lo hice ayer, es bastante fácil.

npm install --save jquery jquery-ui 

Asegúrese de tener un alias de jquery para resolver con el complemento en el webpack.config.js

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

Luego incluye dos alias en el webpack.config.js

  1. La carpeta node_modules
  2. La carpeta 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"), 

Asegúrese de que jquery se cargue primero en el archivo de inicio de la aplicación.

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

Si necesita usar un tema, configure el cargador css y el cargador de archivos. No te olvides de instalar npm esos cargadores.

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

Y utilícelo en el archivo de inicio de su aplicación.

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

Por alguna razón, jquery-ui no jugó bien con la webpack. Tuve que requerir jquery-ui-bundle lugar.

npm i -S jquery-ui-bundle

y luego lo requieren después de jquery, por ejemplo

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

jquery-ui-dist y jquery-ui-bundle no parecen ser mantenidos por el equipo de jquery-ui. Después de jquery-ui v1.12 Es posible usar el paquete oficial jquery-ui de npm con paquete web.

Actualice jquery-ui a 1.12 actualizando la instalación de package.json y npm install .

Entonces puede require cada widget como este.

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

Si ha utilizado require("jquery-ui") antes de necesitar reemplazarlo por importaciones separadas para cada widget. Creo que la nueva forma es mejor porque solo incluirá el código para el widget que necesitamos usar.

Consulte la documentación sobre el uso del paquete oficial de 1.12 npm.

La respuesta aceptada no me funciona porque el paquete jQuery-ui en NPM no está jquery-ui.js y, por lo tanto, no contiene jquery-ui.js ; el paquete necesitará ser construido antes del uso o todos los widgets incluidos / usados ​​individualmente.

La manera más rápida en la que conseguí que todo el paquete funcionara fue descargando primero la versión distribuible:

 npm install jquery-ui-dist --save 

Necesitaba agregar un alias para jquery-ui-dist para evitar un error de ‘No se puede encontrar el módulo’ (con solo require('jquery-ui-dist') no funcionará, porque el nombre de archivo .js es diferente), al agregar esto a webpack.config.js :

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

Finalmente, puede usar esto en el archivo .js donde se cargan los módulos:

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

Alternativamente, puede evitar tener que require los scripts al cargar los módulos, y tener que declarar jQuery como una variable, usando ProvidePlugin en su webpack.config.js:

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

webpack-jquery-ui

webpack-jquery-ui : usa este complemento, por ejemplo, si usas Rails 5, ejecuta

  yarn add webpack-jquery-ui 

Cuando el complemento jQuery UI se inicia, verifica si se proporcionó jquery, por lo que

Agregue este código a su archivo de configuración de webpacker (shared.js – si lo usa con Rails 5)

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

Agregue estas líneas al código de su aplicación.

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

arreglar ActionController::InvalidAuthenticityToken en jquery.ajax

Debe pasar un parámetro authenticity_token con todas sus POST PUT , POST y DELETE .

Para hacer eso, generalmente puedes buscarlo desde el encabezado con $('[name="csrf-token"]')[0].content

Por lo tanto, su solicitud sería algo así como:

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

Incluyo jQuery en mi aplicación de otra manera

En lugar de usar:

 plugins: [ new webpack.ProvidePlugin({... 

Debería agregar ‘jquery’: ‘jquery / src / jquery’ a los alias en el archivo de configuración de la carpeta web:

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

Proporcionará el nombre del módulo ‘jquery’. jQuery UI comprueba este nombre en init.

Luego en tu archivo app.js escribes:

 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.