javascript - jquery selector

¿Cómo agregar correctamente los complementos de jquery al objeto jquery en el paquete web?

Question

TL; DR ¿Cuál es la forma correcta de extender el objeto jQuery con complementos, exponerlo globalmente y usar librerías AMD externas con módulos ES6 en el paquete web? ¿Es el paquete web la herramienta adecuada para la tarea o los sistemas de JS se adaptarían mejor a la situación de refactorizar una aplicación heredada a los módulos ES6?

Estoy tratando de envolver mi cabeza trabajando con el paquete web y los módulos ES6. Tengo una aplicación heredada en su mayoría jquery que actualmente estoy convirtiendo. Me enfrento a los siguientes retos:

1. encontrar las mejores prácticas en el flujo de trabajo webpack / babel-loader
2. averiguar qué cargador / plugin usar para qué propósito
3. obteniendo recursos de AMD como jquery y jquery plugins para jugar bien con el resto de los módulos.
4. Exponiendo jquery globals, extendido con todos los plugins y jquery-ui

Me he basado en los siguientes recursos: Esta gran respuesta explica mucho, aunque no menciona el cargador de exportaciones, en el que confío principalmente: https://stackoverflow.com/a/28989476/2613786

http://webpack.github.io/docs/shimming-modules.html : la documentación enumera muchas posibilidades, pero me falta la experiencia para decidir cuál es la correcta. Parece que es preferible usar ProvPlugin en lugar de expose-loader. Lamentablemente no conseguí que funcionara con un objeto jQuery extendido. Tampoco funcionó para el uso de funciones de módulo invocadas en etiquetas <script> .

Todavía me cuesta encontrar soluciones programáticas y decidir qué plugin webpack es el adecuado para el trabajo. Algunos consejos o ejemplos de un usuario de webpack experimentado son muy apreciados.

En mi webpack.config.js tengo los siguientes cargadores para exponer jquery y transpile con babel:

module: {
    loaders: [
        { 
            test: //.js$/, 
            exclude: /node_modules/,
            loader: ''babel-loader'',
            query: {modules: ''common''}
        },
        {
            test: /jquery/.js$/,
            exclude: /node_modules/,
            loader: ''expose?jQuery'',
        },
        {
            test: /jquery/.js$/,
            exclude: /node_modules/,
            loader: ''expose?$'',
        },
        {
            test: /[////]vendor[////]jquery.sparkline/.js$/,
            loader: "imports?define=>false"
        }
    ]
},
amd: { jQuery: true },
// plugins: [
//     new webpack.ProvidePlugin({
//        $: ''jquery'',
//        jQuery: ''jquery'',
//        ''window.jQuery'': ''jquery'',
//        ''root.jQuery'': ''jquery''
//    })
// ], ...

En mi archivo entry.js incluyo jquery de la siguiente manera:

import ''expose?jQuery!expose?$!./vendor/jquery'';
import ''./jquery/jquery-ui'';
import ''./vendor/jquery.sparkline'';

Tuve que comentar ProvPugin, cuando lo uso, jQuery ya no se amplía con complementos personalizados, ¿alguna idea de por qué ese es el caso? ¿Tiene que ver con los complementos que utilizan la sintaxis del módulo ES6?

Tuve que agregar el loader: "imports?define=>false" para jquery.sparkline.js para que se reconozca. ¿Es esto realmente necesario, o hay una mejor manera de hacerlo?

Respecto a jquery-ui tuve que encontrar una versión antigua que no usó la definición de AMD para que se agregue al objeto jquery. ¿Cuál sería la forma correcta de hacerlo?

Cualquier ayuda y consejo es muy apreciado, una razón para cambiar a SystemJs y Jspm también podría ser una solución.

Answer 1

He tenido problemas con esto y parece que se debió a que algunos complementos suponen $ y otros suponen jQuery , pero los siguientes finalmente funcionaron para mí, incluso si es bastante feo:

Edite , tenga en cuenta que estoy probando los complementos que se llaman jquery.xyz.js , tendría que ajustar la expresión regular de forma adecuada. Además, no estoy seguro de si los dos cargadores de exposición diferentes para jQuery están causando problemas, pero hasta ahora esto funciona.

// webpack.config.js
...
"module": {
    "loaders": [
        {
            test: require.resolve("jquery"),
            loader: "expose?$!expose?jQuery"
        },
        {
            test:   /jquery/..*/.js/,
            loader: "imports?$=jquery,jQuery=jquery,this=>window"
        }
...