webpack-jquery-ui

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

Question

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

Answer 1

webpack-jquery-ui

webpack-jquery-ui : use este complemento, por ejemplo, si usa Rails 5, ejecute

 yarn add webpack-jquery-ui

Cuando se inicia el complemento jQuery UI, comprueba si se proporciona 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 en el 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 hacerlo, generalmente puede $(''[name="csrf-token"]'')[0].content del encabezado con $(''[name="csrf-token"]'')[0].content

Entonces su solicitud se vería así:

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

Debe agregar ''jquery'': ''jquery / src / jquery'' a los alias en el archivo de configuración del paquete web:

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

Proporcionará el nombre del módulo ''jquery''. jQuery UI verifica este nombre en init.

Luego, en su archivo app.js, escriba:

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.

Answer 2

Estás de suerte. Hice esto ayer, es bastante fácil.

npm install --save jquery jquery-ui

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

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

Luego incluya dos alias en 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 su aplicación.

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

Si necesita usar un tema, configure el css-loader y el file-loader. No olvide 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");

Answer 3

La respuesta aceptada no funciona para mí, ya que el paquete jQuery-ui en NPM no está preconstruido y, por lo tanto, no contiene jquery-ui.js ; el paquete deberá construirse antes de su uso o todos los widgets incluidos / utilizados individualmente.

La forma más rápida de hacer funcionar todo el paquete 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 ''No se puede encontrar el módulo'' (usando solo require(''jquery-ui-dist'') no funcionará, porque el nombre de archivo .js es diferente), agregando 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, utilizando ProvidePlugin en su webpack.config.js:

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

Answer 4

Los pasos que funcionaron para mí (en un proyecto Rails 5.1.6) no son idénticos a ninguno de los anteriores:

Instale jquery y jquery-ui: yarn add jquery y yarn add jquery-ui

Agregue lo siguiente a la configuración del paquete web (es decir, en /config/webpack/environment.js ) para establecer globalmente $ y jquery y jQuery:

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

Solicite los paquetes jquery-ui individuales que desee, en la parte superior de su paquete (por ejemplo, en la parte superior de /javascript/packs/application.js :

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

Luego puede llamar, por ejemplo, $(''.selector'').sortable() en cualquier parte de su paquete.

Answer 5

Por alguna razón, jquery-ui no jugó bien con 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'');

Answer 6

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 webpack.

Actualice jquery-ui a 1.12 actualizando 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 reemplazarlo con importaciones separadas para cada widget. Creo que la nueva forma es mejor porque incluirá solo el código para el widget que necesitamos usar.

Consulte la documentation sobre el uso del paquete npm oficial 1.12.