javascript - color - Paquete web y librerías externas: ¿Proveer entrada de entrada vs entrada vs importación global?

title tag html5

Question

1. ProvidePlugin()

Parece un enfoque de uso común. Hay una idea general al respecto, que muestra cómo incluir el polyfill whatwg-fetch en una compilación de Webpack. Muchas respuestas en StackOverflow lo utilizan here y here .

new webpack.ProvidePlugin({
  ''$'': ''jquery'',
  ''jQuery'': ''jquery'',
  ''fetch'': ''imports?this=>global!exports?global.fetch!whatwg-fetch''
})

👍 Pros

• Funciona. (Por favor, actualice esta lista si me falta algo)

👎 Contras

• Necesidad de realizar un seguimiento de las bibliotecas globales en la configuración de Webpack.

2. entry: [...]

Me sorprendió un poco este enfoque cuando lo descubrí en esta esencia, pero funciona igual de bien.

entry: [
    ''babel-polyfill'',
    ''whatwg-fetch'',
    ''jquery'',
    ''webpack-hot-middleware/client'',
    path.join(process.cwd(), ''app/app.js'')
],

👍 Pros

• Funciona.
• Puedo dejar a ProvidePlugin() completo.

👎 Contras

• Necesidad de realizar un seguimiento de las bibliotecas globales en la configuración de Webpack.

3. import alto nivel

Este es muy sencillo, vea este ejemplo de app.js Este archivo es un punto de entrada a una aplicación React.

/**
 * app.js
 */

import ''whatwg-fetch'';
import ''babel-polyfill'';
import ''jquery'';

👍 Pros

• Funciona igual de bien.
• Fácil agregar / quitar. No es necesario tocar la configuración del paquete web.

👎 Contras

• No parece que este enfoque solo funcione con los complementos de jQuery, por ejemplo, bootstrap.js .

Observación : Entre los tres enfoques, no he notado ningún cambio en el tamaño del paquete.

¿Hay una forma recomendada de manejar bibliotecas globales con Webpack (y React)? ¿Alguna de estas soluciones causaría un problema en el futuro con la representación del lado del servidor?

¡Gracias!

Answer 1

No recomendaría exponer bibliotecas como globales a menos que realmente las necesite, es decir, el objetivo de un sistema de módulos es declarar explícitamente las dependencias, por ejemplo

// app.js
import $ from ''jquery'';
$.ajax(...);

Si realmente necesita jQuery en el global porque un script de terceros lo requiere en su página o tal vez para la depuración en la consola, aquí hay información sobre los enfoques que ha enumerado:

ProveerPlugin

ProvePlugin no expondrá jQuery en el mundo y está realmente diseñado para reparar módulos de terceros que se basan incorrectamente en la presencia de un módulo global, por lo que no lo recomendaría, por ejemplo

// app.js
$.ajax(...);

Es efectivamente transpilado en:

// app.js
require(''jquery'').ajax(...);

Entrada y importación de nivel superior

Estos enfoques no funcionarán para un módulo UMD normal, como jQuery, ya que jQuery es lo suficientemente inteligente como para no exponerse en el entorno global cuando se carga mediante un cargador compatible con commonjs / amd / es6.

Sin embargo, estos dos enfoques son ideales para módulos con efectos secundarios como babel-polyfill / whatwg-fetch porque no exportan nada, sino que mutan inherentemente al entorno global.

Por lo tanto, mi recomendación para jQuery es usar el expose-loader que está diseñado para exponer una exportación de módulos a nivel mundial, por ejemplo

// webpack.config.js
{
    module: {
        loaders: [
            test: require.resolve(''jquery''),
            loader: ''expose-loader?jQuery!expose-loader?$''
        ]
    }
}

A continuación, deberá seguir importándolo en el código de su aplicación:

// app.js
import $ from ''jquery'';
$.ajax(...)

Pero está disponible en el mundo para otros scripts en la página para acceder si es absolutamente necesario:

// console
window.$
window.jQuery

NOTA: Técnicamente, solo puede import ''jquery'' una vez en su punto de entrada al usar el cargador de exposición y luego confiar en el global en otros módulos.

Como dije sin embargo, no es realmente recomendable exponer un módulo si no lo necesita, incluso si actualmente lo usa en todos los demás módulos.