Aujourd'hui, j'ai essayé d'aider un ami à utiliser le module JS qu'il a trouvé sur Github. Mon ami est un excellent scientifique, mais pas un spécialiste de JS. Depuis que je fais des recherches sur l'utilisabilité et que j'enseigne au Massachusetts Institute of Technology depuis six ans, ma peau est devenue glaciale à cause de la confusion de tout. Un tas d'exceptions inutiles, des erreurs mystérieuses et un manque de rétroaction appropriée. Et il me semble que je ne l'ai pas trop aidé à survivre à la déception qu'il a vécue pendant cette heure de tourments, jusqu'à ce qu'il abandonne.C'était quelque chose comme ça ...Remarque: les noms des packages et des personnes ont été modifiés pour protéger leur identité. J'ai également omis plusieurs problèmes trop spécifiques pour ce package. Certaines erreurs sont récupérées de la mémoire, alors faites-moi savoir si j'ai mal compris quelque chose.John : Hé, je veux essayer cet algorithme que j'ai trouvé sur Github. Il dit ce qui doit être utilisé import functionName packageName, puis appelé functionName(). Tout semble assez simple! Je n'ai pas vraiment besoin de l'interface utilisateur, je vais donc utiliser Node!Moi (Leah): Bien sûr, Node semble être un bon framework!John lance npm install packageName --savecomme recommandé par README. Alors node index.js.Nœud:Avertissement: Pour charger un module ES, définissez "type": "module" dans le package.json ou utilisez l'extension .mjs.
SyntaxError: impossible d'utiliser l'instruction d'importation en dehors d'un module
John: Mais je n'ai pas de package.json ...Leah: Exécutez- npm initle, il le générera!John démarre npm init, passe par l'assistant d'installation, l'ajoute manuellement type: "module"au package.json généré.John se lance node index.js.Nœud:SyntaxError: impossible d'utiliser l'instruction d'importation en dehors d'un module
Curieusement, cette fois le module interne du projet a jeté une erreur. WAT?!Leah: Bon sang, il suffit de l'exécuter dans un navigateur, c'est le module ES6, il y a juste un algorithme JS propre qui n'utilise pas l'API Node, ça devrait marcher.John crée une simple page index.html avec une ligne <script type="module" src="index.js">et la charge dans un navigateur.Rien dans la console. Et voilà.Lea: Eh bien, oui, vous devez configurer le chemin du module afin d'importer packageName. Node fait des choses spéciales pour la résolution par node_modules, donc dans le navigateur, vous devez spécifier vous-même le chemin explicite.John regarde ses fichiers, mais il n'y a pas de répertoire node_modules là-bas.Lea: Eh bien, oui, tu l'as commencé npm installavant d'apparaître package.json, c'est probablement le point! Réessayer!John redémarre John npm install packageName --save: Oh, maintenant le répertoire node_modules est apparu!John cherche désespérément un point d'entrée dans node_modules. Il modifie ensuite son index.js en conséquence et le recharge.Firefox:Type MIME incorrect: texte / html
Lea: Bien sûr, ça s'ouvre pour toi file://! Mon ami, comment vivez-vous à notre époque sans hôte local? Actuellement, l'utilisation de Javascript pour est file://strictement limitée.John: Mais pourquoi suis-je ... D'accord, je vais gérer un hôte local.John exécute localhost, ouvre son index.html à localhost : 80.Firefox:Type MIME incorrect: texte / html
John (soupire) . Besoin de configurer localhost pour émettre des fichiers JS de type texte / javascript?Lea: Quoi? Non! Il le sait. Hmm ... Regardez l'onglet Réseaux. Je soupçonne qu'il ne peut pas trouver votre module, il renvoie donc une page HTML 404, puis se plaint que cette page ne l'est pas text/javascript.Examine à nouveau node_modules, corrige le chemin. Il s'avère que VS Code réduit les répertoires avec un seul sous-répertoire, nous ne l'avons donc pas remarqué.En fait, je pense que c'est une très bonne amélioration de l'utilisabilité de la part de VS Code, cela améliore l'efficacité, mais ils auraient dû rendre les choses plus visibles.Firefox:SyntaxError: manquant) après les paramètres formels
Lea: Quoi? Cela vient du paquet source, ce n'est pas de votre faute. Je ne comprends pas ... Puis-je regarder cette ligne?John clique sur la ligne qui causel' erreur de Lea: Oh mon dieu. Ce n'est pas Javascript, c'est tapuscrit !!! Avec l'extension .js !!!John: Oui, je voulais juste exécuter une ligne de code pour tester cet algorithme ...John abandonne. Il conclut qu'il est préférable de ne jamais toucher les modules Node, npm ou ES6.La fin.Veuillez noter que John est un informaticien qui en sait beaucoup sur le web: il avait installé Node & npm, il savait quels étaient les types MIME, il pouvait démarrer localhost quand c'était nécessaire. Que peuvent espérer les débutants?