es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • ¿Cómo empaquetar paquetes npm para el desarrollo de frontend en JavaScript puro y compilaciones de producción en servidores CDN?

¿Cómo empaquetar paquetes npm para el desarrollo de frontend en JavaScript puro y compilaciones de producción en servidores CDN?

28 Jul, 2023 Programación

Tengo un sitio de HTML/CSS/JavaScript estándar (repositorio) que utiliza módulos ES6. Puede implementarse correctamente en las páginas de GitHub y en Netlify.

En mi HTML, importo main.js de la siguiente manera:

<script src="js/main.js" type="module" defer=""></script>

En mi archivo main.js, importo otros módulos que he creado de la siguiente manera:

import * as data from './data.js';
import displayUserCard from './displayUserCard.js';

Ahora quiero instalar e importar también módulos npm para usar en mi sitio, al igual que uso mi propio código en mi sitio.

Instalo lodash de esta manera:

npm i lodash

Luego, en mi archivo main.js, importo lodash de la siguiente manera, tal como lo hago en mis aplicaciones de Node:

import _ from 'lodash';

Esto, por supuesto, no funciona y me da el siguiente error, ya que ahora estamos en el navegador y no en una aplicación de Node:

^TypeError no capturado: No se pudo resolver el especificador de módulo “lodash”. Las referencias relativas deben comenzar con “/”,”./” o “../”.^

Investigando esto, entiendo que este entorno de desarrollo necesita un empaquetador web, pero encuentro desde herramientas obsoletas como Browserify y RequireJS, hasta herramientas demasiado complejas como WebPack, y empaquetadores más nuevos como Parcel, Vite y Snowpack, que no parecen abordar este problema de empaquetar fácilmente paquetes npm tanto para desarrollo como para implementaciones de producción.

¿Cuál es la forma más sencilla en 2021/2022 de utilizar módulos de Node, como lodash, en aplicaciones frontend de HTML/CSS/JavaScript estándar para que puedan empaquetarse, construirse e implementarse en CDNs como GitHub pages, Netlify y Vercel?

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Una de las formas más directas de utilizar los módulos Node, como lodash, en aplicaciones frontend vanilla HTML/CSS/JavaScript es mediante el uso de una herramienta de construcción, como Rollup o esbuild. Estas herramientas pueden empaquetar los módulos npm y otro código en un único archivo JavaScript que puede importarse en el archivo HTML, como el archivo main.js en el ejemplo original.

    Aquí tienes un ejemplo utilizando Rollup:

    1. Primero, instala Rollup y los complementos necesarios: 
      npm install rollup rollup-plugin-node-resolve rollup-plugin-commonjs rollup-plugin-babel @babel/preset-env
    2. Crea un nuevo archivo de configuración, rollup.config.js, con el siguiente contenido: 
      import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import babel from 'rollup-plugin-babel';

export default {
 input: 'js/main.js',
 output: {
   file: 'dist/bundle.js',
   format: 'esm'
 },
 plugins: [
   resolve(),
   commonjs(),
   babel({
     presets: ['@babel/preset-env'],
     babelHelpers: 'bundled'
   })
 ]
};
    3. Modifica el archivo main.js para importar lodash y utilizarlo: 
      import _ from 'lodash';

console.log(_.chunk(['a', 'b', 'c', 'd'], 2));
    4. Ejecuta Rollup para empaquetar el código: 
      rollup -c

      Esto creará un nuevo archivo dist/bundle.js que contiene el código empaquetado, incluyendo lodash.

    5. Actualiza el archivo HTML para importar el archivo JavaScript empaquetado:

      <script src="dist/bundle.js" type="module" defer=""></script>

      Despliega el código actualizado en GitHub pages o Netlify, y la página ahora debería poder utilizar lodash y cualquier otro módulo npm que esté instalado e importado en los archivos JavaScript.

Comments are closed.