Configurar un plugin genérico de jQuery con Browserify-shim?

Para todos los que buscan un ejemplo concreto: {[17]]}

El siguiente es un ejemplo de los archivos package.json y app.js para un complemento de jQuery que se adjunta a la jQuery/$ objeto, por ejemplo: $('div').expose(). No quiero que jQuery sea una variable global (window.jQuery) cuando lo requiera, por eso jQuery se establece en 'exports': null. Sin embargo, debido a que el plugin está esperando un objeto global jQuery al que puede adjuntarse, debe especificarlo en la dependencia después del nombre de archivo: ./jquery-2.1.3.js:jQuery. Además tú necesidad de exportar realmente el jQuery global cuando se utiliza el plugin, incluso si usted no quiere, porque el plugin no funcionará de otra manera (al menos este en particular).

Paquete.json

{
  "name": "test",
  "version": "0.1.0",
  "description": "test",
  "browserify-shim": {
    "./jquery-2.1.3.js": { "exports": null },
    "./jquery.expose.js": { "exports": "jQuery", "depends": [ "./jquery-2.1.3.js:jQuery" ] }
  },
  "browserify": {
    "transform": [
      "browserify-shim"
    ]
  }
}

App.js

// copy and delete any previously defined jQuery objects
if (window.jQuery) {
  window.original_jQuery = window.jQuery;
  delete window.jQuery;

  if (typeof window.$.fn.jquery === 'string') {
    window.original_$ = window.$;
    delete window.$;
  }
}

// exposes the jQuery global
require('./jquery.expose.js');
// copy it to another variable of my choosing and delete the global one
var my_jQuery = jQuery;
delete window.jQuery;

// re-setting the original jQuery object (if any)
if (window.original_jQuery) { window.jQuery = window.original_jQuery; delete window.original_jQuery; }
if (window.original_$) { window.$ = window.original_$; delete window.original_$; }

my_jQuery(document).ready(function() {
  my_jQuery('button').click(function(){
    my_jQuery(this).expose();
  });
});

En el ejemplo anterior no quería que mi código estableciera ningún global, pero tuve que hacerlo temporalmente, para hacer que el plugin funcionara. Si solo necesita jQuery, puede hacer esto y no necesita ninguna solución: var my_jQuery = require('./jquery-2.1.3.js'). Si usted está bien con su jQuery está expuesto como global, entonces puede modificar el ejemplo anterior package.json de la siguiente manera:

  "browserify-shim": {
    "./jquery-2.1.3.js": { "exports": "$" },
    "./jquery.expose.js": { "exports": null, "depends": [ "./jquery-2.1.3.js" ] }

Espero que eso ayude a algunas personas, que estaban buscando ejemplos concretos (como yo, cuando encontré esta pregunta).

Solo para completar, aquí hay un método que explota la conciencia CommonJS de jQuery para evitar tener que preocuparse por contaminar el objeto window sin necesidad de calzar.

Características

1. jQuery incluido en el paquete
2. plugin incluido en el paquete
3. no hay contaminación del objeto window

Config

{
  "main": "app.cb.js",
  "scripts": {
    "build": "browserify ./app.cb.js > ./app.cb.bundle.js"
  },
  "browser": {
    "jquery": "./node_modules/jquery/dist/jquery.js",
    "expose": "./js/jquery.expose.js",
    "app": "./app.cb.js"
  },
  "author": "cool.blue",
  "license": "MIT",
  "dependencies": {
    "jquery": "^3.1.0"
  },
  "devDependencies": {
    "browserify": "^13.0.1",
    "browserify-shim": "^3.8.12"
  }
}

Método

• Debido a que jQuery es consciente de CommonJS en estos días, detectará la presencia del objeto module proporcionado por browserify y devolverá una instancia, sin agregarla al objeto window.
• En la aplicación, require jquery y agregarlo al objeto module.exports (junto con cualquier otro contexto que necesita ser compartida).
• Agregue una sola línea al inicio del plugin para requerir que la aplicación acceda a la instancia de jQuery que creó.
• En la aplicación, copie la instancia de jQuery en $ y use jQuery con el complemento.
• Navegue por la aplicación, con las opciones predeterminadas, y coloque el paquete resultante en una etiqueta de script en su HTML.

Código

App.cb.js

var $ = module.exports.jQuery = require("jquery");
require('expose');

$(document).ready(function() {

    $('body').append(
        $('<button name="button" >Click me</button>')
            .css({"position": "relative",
                  "top": "100px", "left": "100px"})
            .click(function() {
                $(this).expose();
            })
    );
});

En la parte superior del plugin

var jQuery = require("app").jQuery;

En el HTML

<script type="text/javascript" src="app.cb.bundle.js"></script>

Antecedentes

El patrón utilizado por jQuery es llamar a su fábrica con una bandera noGlobal si detecta un entorno CommonJS. No añadirá una instancia al objeto window y devolverá una instancia como siempre.

El contexto CommonJS es creado por browserify por defecto. A continuación se muestra un extracto simplificado del paquete que muestra la estructura del módulo jQuery. He eliminado el código que trata con el manejo isomórfico del objeto window por el bien de claridad.

3: [function(require, module, exports) {

    ( function( global, factory ) {

        "use strict";

        if ( typeof module === "object" && typeof module.exports === "object" ) {
            module.exports = factory( global, true );
        } else {
            factory( global );
        }

    // Pass this if window is not defined yet
    } )( window, function( window, noGlobal ) {

    // ...

    if ( !noGlobal ) {
        window.jQuery = window.$ = jQuery;
    }

    return jQuery;
    }) );
}, {}]

El mejor método que encontré es hacer que las cosas funcionen en el sistema de módulos de nodo y luego funcionará cada vez después de browserify-ing.
Simplemente use jsdom para calzar el objeto window de modo que el código sea isomorfo. Luego, solo concéntrate en hacer que funcione en node. Luego, recorta cualquier tráfico entre el módulo y el espacio global y finalmente browserify y solo funcionará en el navegador.

Estaba usando wordpress. Por lo tanto, me vi obligado a usar el jQuery del núcleo de wordpress, disponible en el objeto window.

Estaba generando slick() error no definido, cuando traté de usar slick() plugin de npm. Agregar browserify-shim no ayudó mucho.

Investigué un poco y descubrí que require('jquery') no siempre era consistente.

En mi archivo javascript de tema, estaba llamando al jquery del núcleo de wordpress.

Pero, en slick plugin jquery estaba llamando a la última jquery desde módulos de nodo.

Finalmente, pude resolverlo. Entonces, compartiendo la configuración package.json y gulpfile.

Paquete.json:

"browserify": { "transform": [ "browserify-shim" ] }, "browserify-shim": { "jquery": "global:jQuery" },

Gulpfile.babel.js:

browserify({entries: 'main.js', extensions: ['js'], debug: true}) .transform(babelify.configure({ presets: ["es2015"] })) .transform('browserify-shim', {global: true})

Hacer transform 'browserify-shim' fue una parte crucial, me faltaba antes. Sin ella browserify-shim no era consistente.