Sé que es una pregunta realmente simple, pero no he visto ninguna pregunta/respuesta directa como esta. Estoy tratando de decidir si vale la pena mantener jQuery en mi aplicación de reacción, y lo estoy usando casi por completo para ajax. ¿Es el paquete web lo suficientemente inteligente como para incluir solo las partes ajax de jQuery en el paquete?
No, el paquete web no solo incluirá las partes ajax de jquery en su paquete, incluso si está usando Webpack 2 (el paquete web 1 y anteriores no implementan la sacudida de árboles; es decir, el módulo completo se incluirá en su paquete, no solo los que importa) esto se debe a cómo se vende jquery en NPM: como un solo módulo jquery.js grande.
Si tiene la intención de usar jquery, hay formas de compilar jquery usando solo el módulo ajax, pero esto requerirá un poco de esfuerzo manual (por ejemplo, no puede simplemente import {ajax} from 'jquery' ). Hay un complemento de babel para lodash, que vende cada método en su propio módulo para que no tenga que incluir todo lodash en la compilación de su paquete web. Es un complemento de babel porque se basa en la import { some_method } from 'library' .
Si está buscando una biblioteca ajax fácil, le recomiendo usar isomorphic-fetch (que, en los navegadores, solo usa 'whatwg-fetch'). Mantiene tu código muy ordenado.
Puede crear su propia versión siguiendo la documentación en el repositorio oficial de jQuery aquí: https://github.com/jquery/jquery#how-to-build-your-own-jquery , pero debo decir que no lo he hecho. No pude adaptar esos pasos a mi configuración y también implicó usar Grunt, que no es parte de nuestro cinturón de herramientas.
Sin embargo, encontré un Github Gist muy bueno que explica cómo hacerlo solo con Webpack: https://gist.github.com/rhaglennydd/abb2d27144e1a595e7c850b0a7611a21 .
Creo que una respuesta de solo enlace rompe algunas de las reglas en SO, por lo que estoy dando una breve descripción.
npm install jquery Copie el código de node_modules/jquery/src/jquery.js a un archivo en su proyecto (ej. code/resources/js/jquery )
Los archivos importados deben ser los archivos originales en la carpeta node_modules . Por ejemplo './core', puede convertirse en '../../../node_modules/jquery/src/core' .
Elimina o comenta algunos módulos: asegúrate de probar que tu código sigue funcionando sin generar errores.
Esto le indicará a Webpack que use su versión siempre que se necesite jquery en su código o en una de sus dependencias. Por ejemplo:
module.exports = { resolve: { alias: { jquery: `${environment.paths.source}/js/jquery-custom/jquery-custom.js`, } } };He visto que si elimino muchos módulos el tamaño se reduce, pero si no lo haces puede incluso aumentar ligeramente: así que esta es una buena estrategia si necesitas eliminar código progresivamente o si ya usas muy pocos módulos , de lo contrario, será mejor que se ciña al original o busque una biblioteca alternativa.