No puedo encontrar una respuesta precisa a esto en ninguna parte. Entiendo que el navegador no reconoce la sintaxis commonJS, por lo tanto, si se carga require () en el navegador, se produce un error de referencia como este
let isEven = require('is-even') // ReferenceError: Can't find variable: require console.log(isEven(6)); // this doesn't runEntonces trato de usar módulos ES6 como este:
import isEven from "is-even"; console.log(isEven(6));Luego me sale este error en la consola:
TypeError: Module specifier, 'is-even' does not start with "/", "./", or "../".Mi solución en este momento es ejecutar un paquete de módulos como Webpack que me permite usar ambas sintaxis de manera efectiva y no tengo problemas. Sin embargo, preferiría encontrar una alternativa porque me resulta más difícil corregir errores cuando uso un paquete de módulos, ya que puede ser bastante difícil localizar el código que causa el error. ¿Existe otra alternativa que no sea usar un paquete de módulos para transformar a módulos Javascript más antiguos antes de servirlos en el navegador?
import en un navegador no permite importar desde un nombre de archivo sin formato. Al menos debe construir algún tipo de ruta que comience con "/" , "./" o "../" o incluso una URL completa, ya que la import en el navegador no tiene un lugar "predeterminado" para cargar un nombre de archivo sin formato. . Debes ser explícito sobre cuál es el camino.
Y tenga en cuenta que la import desde un navegador hará una solicitud a su servidor y su servidor debe estar configurado para proporcionar ese archivo al navegador cuando lo solicite.
Entonces, dependiendo de cómo haya configurado su servidor, es posible que desee algo como esto:
import isEven from "/is-even.js"; console.log(isEven(6));O, si su servidor maneja los scripts por separado, incluso podría tener esto:
import isEven from "/scripts/is-even.js"; console.log(isEven(6));Y, luego, es responsabilidad del servidor web saber cómo recibir una de estas solicitudes, saber dónde se encuentra ese archivo de script real en el sistema de archivos del servidor, obtenerlo y enviarlo de regreso al navegador.
Tenga en cuenta que la razón principal por la que el código del lado del cliente usa paquetes es que no es eficiente tener una página web que cargue toneladas de módulos de script, cada uno cargado por separado porque cada carga de script es una solicitud de ida y vuelta de http a su servidor. La carga puede beneficiarse un poco del almacenamiento en caché del lado del cliente, pero aún no desea que la página de inicio de su sitio web tenga que cargar 50 módulos separados la primera vez que un usuario accede a su página de inicio solo para cargar todos sus scripts en el navegador.
Por lo tanto, generalmente no sería eficiente en el código del lado del cliente importar un script solo para una función como isEven() . Esta es la razón por la que existen paquetes para que pueda escribir el código en módulos agradables, modulares y comprobables por separado y luego hacer que el paquete tome todo el código que se necesita para una operación particular del lado del cliente y lo recopile en un archivo de script común que puede luego cargarse de manera más eficiente en el entorno del lado del cliente.
prueba esto
export { isEven }; // module exports a function: módulo importa la función de is-even.mjs
import { isEven } from './is-even.mjs'; console.log(is-even(6));