JavaScript moderno: una vista lateral

Hoy intenté ayudar a un amigo a usar el módulo JS que encontró en Github. Mi amigo es un excelente científico, pero no un especialista en JS. Desde que he estado investigando y enseñando usabilidad en el Instituto de Tecnología de Massachusetts durante los últimos seis años, mi piel se ha vuelto helada por lo confundido que está todo. Un montón de excepciones innecesarias, errores misteriosos y falta de comentarios adecuados. Y me parece que no lo ayudé demasiado para sobrevivir a la decepción que experimentó durante esta hora de tormento, hasta que se dio por vencido.

Fue algo como esto ...

Nota: los nombres de paquetes y personas se han cambiado para proteger su identidad. También omití varios problemas que eran demasiado específicos para este paquete. Algunos errores se recuperan de la memoria, así que avíseme si entendí mal algo.

John : Hola, quiero probar este algoritmo que encontré en Github. Él dice lo que necesita ser usado import functionName packageName, y luego llamado functionName(). ¡Todo parece bastante simple! Realmente no necesito la interfaz de usuario, ¡así que usaré Node!

Yo (Leah): ¡ Por supuesto, Node parece un buen marco!

John se lanza npm install packageName --savesegún lo recomendado por README. Entonces node index.js.

Nodo:

Advertencia: para cargar un módulo ES, establezca "type": "module" en package.json o use la extensión .mjs.
SyntaxError: no se puede usar la declaración de importación fuera de un módulo

John: Pero no tengo ningún paquete. Json ...

Leah: ¡ Ejecútalo npm init, lo generará!

John comienza npm init, revisa el asistente de instalación, lo agrega manualmente type: "module"al paquete generado.json.

John se lanza node index.js.

Nodo:

SyntaxError: no se puede usar la declaración de importación fuera de un módulo

Por extraño que parezca, esta vez el módulo interno del proyecto arrojó un error. WAT?

Leah: Bueno, al diablo, solo ejecútalo en un navegador, este es el módulo ES6, solo hay un algoritmo JS limpio que no usa la API Node, debería funcionar.

John crea una página index.html simple con una línea <script type="module" src="index.js">y la carga en un navegador.

Nada en la consola. TA-dah.

Lea: Bueno, sí, necesitas configurar la ruta del módulo para importar packageName. Node hace cosas especiales para resolver node_modules, por lo que en el navegador debe especificar la ruta explícita usted mismo.

John está mirando sus archivos, pero no hay un directorio node_modules allí.

Lea: Bueno, sí, lo empezaste npm installantes de aparecer package.json, ¡probablemente este sea el punto! ¡Inténtalo de nuevo!

John vuelve a iniciar a John npm install packageName --save

: ¡Oh, ahora ha aparecido el directorio node_modules!

John está buscando desesperadamente un punto de entrada en node_modules. Luego edita su index.js en consecuencia y lo recarga.

Firefox

Tipo MIME incorrecto: texto / html

Lea: ¡ Por supuesto, se abre para ti file://! Mi amigo, ¿cómo vives en nuestro tiempo sin un localhost? Actualmente, el uso de Javascript para es file://estrictamente limitado.

John: Pero ¿por qué estoy ...? Ok, voy a ejecutar un servidor local.

John ejecuta localhost, abre su index.html en localhost : 80.

Firefox

Tipo MIME incorrecto: texto / html

John (suspira) . ¿Necesita configurar localhost para emitir archivos JS con texto / tipo javascript?

Lea: ¿qué? ¡No! Él lo sabe. Hmm ... Mira la pestaña Redes. Sospecho que no puede encontrar su módulo, por lo que devuelve una página HTML 404 y luego se queja de que esta página no lo es text/javascript.

Mira nuevamente node_modules, corrige la ruta. Resulta que VS Code colapsa los directorios con un solo subdirectorio, por lo que no nos dimos cuenta de esto.

En realidad, creo que esta es una mejora de usabilidad realmente buena en nombre de VS Code, mejora la eficiencia, pero deberían haber hecho las cosas más visibles.

Firefox

SyntaxError: missing) después de los parámetros formales

Lea: ¿qué? Esto es del paquete fuente, no es tu culpa. No entiendo ... ¿Puedo mirar esta línea?

John hace clic en la línea que causa

el error de Lea: Dios mío. ¡Esto no es Javascript, es mecanografiado! Con la extensión .js !!!

John: Sí, solo quería ejecutar una línea de código para probar este algoritmo ...

John se rinde. Concluye que es mejor no tocar nunca los módulos Node, npm o ES6.

El fin.

Tenga en cuenta que John es un científico de la computación que sabe bastante sobre la web: tenía Node & npm instalado, sabía cuáles eran los tipos MIME, podía iniciar localhost cuando fuera necesario. ¿Qué pueden esperar los novatos?

All Articles