Cómo utilizar módulos externos con Webpack
Este artículo analiza una opción externa que se usa a menudo cuando Webpack empaqueta bibliotecas. Se usa para evitar empaquetar algunos módulos muy comunes en su biblioteca publicada y, en su lugar, elige declararlos como módulos externos, después de su. La biblioteca es utilizada por la capa superior, Webpack la empaquetará en este módulo de dependencia externa en la etapa final.
La opción externa generalmente se usa para empaquetar bibliotecas, si no es una biblioteca, sino un archivo JS de lanzamiento para la aplicación final, entonces la opción externa no tiene mucho sentido. En un artículo anterior, hablé sobre cómo analizar el empaquetado de bibliotecas de Webpack y qué hacen algunas de las opciones.
Opciones externas
Seguiremos usando el ejemplo del artículo anterior y definiremos una biblioteca util.js:
Usaremos Webpack para empaquetar y publicar The biblioteca:
Archivo de salida
salida: {
ruta: './dist',
nombre de archivo: '[nombre] .dist.js'
Biblioteca: 'util',
bibliotecaTarget: commonjs2,
targetExport: 'default'
} A El archivo util.dist.js empaquetado de esta manera inyectará completamente el código jquery porque su código fuente lo usa. Pero este a menudo no es el resultado que queremos, porque jquery es un módulo muy general en una aplicación, es probable que otras bibliotecas también lo usen, y la aplicación de archivos de entrada de nivel superior también puede usarlo. Las versiones de jquery lanzadas por el módulo se empaquetan en sus propios paquetes y finalmente se juntan. Luego, habrá una gran cantidad de copias de jquery en el código de lanzamiento de la aplicación final. Por supuesto, es posible que esto no afecte su funcionalidad normal, pero ocupará el lugar. mucho código.
Entonces, en términos generales, cuando tienes una biblioteca que depende de un módulo JS común (como jquery o bootstrap), puedes declararla como un módulo externo en la configuración de Webpack, en lugar de empaquetarlo como Un paquete:
Esto le indicará a Webpack: "No inyecte este módulo:" No inyecte este módulo en archivos JS compilados, para cualquier importación/que este módulo aparezca en mi código fuente requiere declaración, por favor guárdalo.
Podemos echar un vistazo a la estructura del archivo del paquete compilado:
Puedes ver que el módulo jquery no está empaquetado en el archivo del paquete y, para util, en el archivo generado. código Las declaraciones de importación relacionadas con jquery en la función generate_util se conservan en:
Por supuesto, no se modifica por completo. Por ejemplo, dado que aquí utilizamos el empaquetado de estilo CommonJS, la importación se ha vuelto a cambiar. la palabra clave require tradicional. Pero todo esto es menor, lo importante es que conserva la palabra clave require y no usa webpack_require para introducir jquery. Esto significa que el archivo JS actual no tiene jquery en su sistema de administración de módulos, es un módulo externo, jquery solo se puede introducir cuando otros hacen referencia al archivo JS y se compila en un nivel superior, momento en el cual la palabra clave require se ser utilizado por webpack_require reemplazo.
Para dependencias externas, normalmente puedes hacer esto: por ejemplo, si usas npm para publicar tu biblioteca, puedes agregar jquery en las dependencias del archivo package.json, de modo que cuando otros lo instalen en npm Cuando publica una biblioteca, jquery también se descargará automáticamente en node_modules para que otros lo empaqueten y lo utilicen.
Empaquetado en formato umd
Si empaquetamos en formato umd, podemos ver cómo funciona el módulo externo en diferentes entornos:
La utilidad generada_ también agrega un parámetro __webpack_external_module_jquery__ en consecuencia:
Escrito de esta manera, la estructura parece ser diferente de la versión compilada de CommonJS anterior, pero la esencia es en realidad la misma. Dado que umd ahora necesita manejar un entorno de ejecución diferente, requiere ('jquery') con anticipación y lo pasa como parámetro de fábrica. Para cada entorno de ejecución, cada uno hace lo suyo:
CommonJS: conserva las declaraciones require('jquery').
AMD: Defina jquery como módulo dependiente en define.
Var: Elimina las variables jquery de los campos globales, lo que requiere que jquery esté cargado antes de cargar este módulo.
Luego, en cualquier caso, pasan el módulo jquery cargado como parámetro a la función de fábrica para que el módulo util se cargue correctamente.
La parte anterior que involucra el código generado por Webpack puede ser un poco tortuosa y requiere que comprenda mejor el mecanismo y los principios de los módulos de empaquetado de Webpack, que discutiré en detalle en esta publicación de blog.
Resumen