Hoje eu tentei ajudar um amigo a usar o módulo JS que ele encontrou no Github. Meu amigo é um excelente cientista, mas não um especialista em JS.Como trabalho com pesquisas e ensino de usabilidade no Instituto de Tecnologia de Massachusetts nos últimos seis anos, minha pele ficou gelada com a confusão de tudo. Um monte de exceções desnecessárias, erros misteriosos e falta de feedback adequado. E parece-me que não o ajudei muito a sobreviver à decepção que ele experimentou durante essa hora de tormento, até que ele desistiu.Era algo assim ...Nota: os nomes de pacotes e pessoas foram alterados para proteger sua identidade. Também omiti vários problemas que eram específicos demais para este pacote. Alguns erros são recuperados da memória, então, deixe-me saber se eu entendi algo errado.John : Ei, eu quero tentar esse algoritmo que encontrei no Github. Ele diz o que precisa ser usado import functionName packageNamee depois chama functionName(). Tudo parece bem simples! Eu realmente não preciso da interface do usuário, então usarei o Node!Eu (Leah): Claro, Node parece ser uma boa estrutura!John é lançado npm install packageName --saveconforme recomendado pelo README. Então node index.js.Nó:Aviso: Para carregar um módulo ES, defina "type": "module" no package.json ou use a extensão .mjs.
SyntaxError: Não é possível usar a instrução de importação fora de um módulo
John: Mas não tenho nenhum pacote.json ...Leah: Execute npm init, ele irá gerar!John inicia npm init, passa pelo assistente de instalação e o adiciona manualmente type: "module"ao package.json gerado.John lança node index.js.Nó:SyntaxError: Não é possível usar a instrução de importação fora de um módulo
Curiosamente, desta vez, o módulo interno do projeto gerou um erro. WAT ?!Leah: Bem, diabos, basta executá-lo em um navegador, este é o módulo ES6, existe apenas um algoritmo JS limpo que não usa a API do Node, ele deve funcionar.John cria uma página index.html simples com uma linha <script type="module" src="index.js">e a carrega em um navegador.Nada no console. Surpresa.Lea: Bem, sim, você precisa configurar o caminho do módulo para importar packageName. O nó faz coisas especiais para resolver node_modules, portanto, no navegador, você precisa especificar o caminho explícito.John está vendo seus arquivos, mas não há diretório node_modules lá.Lea: Bem, sim, você começou npm installantes de aparecer package.json, provavelmente esse é o ponto! Tente novamente!John inicia John novamente npm install packageName --save: Oh, agora o diretório node_modules apareceu!John está procurando desesperadamente um ponto de entrada no node_modules. Em seguida, edita seu index.js de acordo e o recarrega.Raposa de fogo:Tipo MIME incorreto: text / html
Lea: Claro, abre para você file://! Meu amigo, como você mora em nosso tempo sem um host local? Atualmente, o uso de Javascript para é file://estritamente limitado.John: Mas por que eu estou ... Ok, vou executar um host local.John executa localhost, abre seu index.html em localhost : 80.Raposa de fogo:Tipo MIME incorreto: text / html
John (suspira) . Precisa configurar o host local para emitir arquivos JS com o tipo de texto / javascript?Lea: O que? Não! Ele sabe disso. Hmm ... Veja a guia Redes. Eu suspeito que ele não consegue encontrar o seu módulo, então ele retorna uma página 404 HTML e depois reclama que essa página não está text/javascript.Olha node_modules novamente, corrige o caminho. Acontece que o VS Code recolhe diretórios com apenas um subdiretório, portanto não percebemos isso.Na verdade, acho que essa é uma melhoria de usabilidade muito boa em nome do VS Code, melhora a eficiência, mas eles deveriam ter tornado as coisas mais visíveis.Raposa de fogo:Erro de sintaxe: ausente) após parâmetros formais
Lea: O que? Isso é do pacote de origem, não é sua culpa. Eu não entendo ... Posso olhar para esta linha?John clica na linha que causao erro de Lea: Oh meu Deus. Isso não é Javascript, é um texto datilografado !!! Com a extensão .js !!!John: Sim, eu só queria executar uma linha de código para testar esse algoritmo ...John desiste. Ele conclui que é melhor nunca tocar nos módulos Node, npm ou ES6.O fim.Observe que John é um cientista da computação que conhece bastante a Web: ele tinha o Node & npm instalado, sabia quais eram os tipos MIME, poderia iniciar o host local quando necessário. O que os novatos podem esperar?