Estoy aprendiendo módulos ES6 en este momento. Me tomó tanto tiempo finalmente comprender y ser competente en los cierres, IIFE y alcance usando un script que casi me molestó descubrir que los módulos ES6 brindan una forma diferente y más manejable de organizar el código modular en varios scripts diferentes y luego por un bundler como Webpack para agrupar todo en uno (o solo unos pocos) scripts.
Obtengo el error de origen cruzado normal cuando pongo el tipo de script = 'módulo' e intento ejecutar módulos en mi sistema de archivos local, que es diferente a cuando ejecuto un script normal simplemente especificando un src.
¡Dondequiera que mire, la solución es usar un host local para sortear esto, lo que he hecho! Pero, ¿en qué momento trabaja Webpack su empaquetado? ¿Es cuando lo ejecuto en la línea de comandos o cuando se carga en el navegador?
Si instalo Webpack a través de npm en mi proyecto y establezco la configuración, ¿significa esto que no tendría que usar un host local porque mi código de distribución durante el tiempo de ejecución ahora está en un archivo de script, por lo que no tiene que importar scripts? no en la misma URL?
Sé que solo está en mi sistema de archivos local, pero no puedo solicitar scripts en la misma carpeta cuando uso módulos ES6 debido a la política de origen cruzado, como podría hacerlo si solo especificara un script src sin usar módulos.
Cada vez que ejecuto Webpack desde la línea de comandos, agrupa el código más reciente tomado del punto de entrada (especificado durante mi configuración).
Esto significa que puedo usar la sintaxis del módulo ES6 en mi archivo de entrada sin tener que usar un servidor en vivo, ya que nunca pretendo cargar este archivo de entrada de JavaScript en el navegador. Es simplemente ser el controlador de todas las demás exportaciones de scripts importando lo que necesito de ellos.
Luego, esta secuencia de comandos será el objetivo de la agrupación de paquetes web (el punto de entrada), lo que significa que la única secuencia de comandos que se carga en el navegador es la secuencia de comandos empaquetada, que no tiene otras importaciones. ¡Esto evita la necesidad de ejecutar un servidor en vivo al probar módulos ES6!
Si no uso Webpack, tendría que ejecutar un servidor porque mi secuencia de comandos principal estaría importando otras secuencias de comandos y, a menos que tengan la misma URL (todavía no tienen una en mi sistema de archivos), obtendré un error de origen cruzado . Tan pronto como ejecute mi servidor local 127.0.0.1, funcionará. Prefiero probar con Webpack.