LEA VEROU — Взгляд на JavaScript со стороны

Сегодня я пыталась помочь другу, который сам по себе замечательный компьютерный специалист, но не в сфере JavaScript, воспользоваться JavaScript-модулем, который он нашел на GitHub. С учетом того, что последние шесть лет моя работа — исследование юзабилити и преподавание в MIT, меня просто трясет от того, что это было. Куча бесполезных неверных условий, запутанные ошибки и отсутствие правильной обратной связи. И я не чувствую, что хорошо справилась с объяснением той фрустрации, через которую он проходил час, пока не сдался.

Всё происходило приблизительно так…

Замечание: имена пакетов и людей были изменены для защиты их конфиденциальности. Я также опустила несколько проблем, с которыми он столкнулся, так как они слишком специфичны для данного пакета. Некоторые ошибки воссозданы по памяти, так что дайте знать, если я в чём-то ошибаюсь!

Джон:Привет, я хочу проверить один алгоритм, который нашёл на GitHub. Он говорит сделатьimport functionName from packageNameи потом вызватьfunctionName(arguments). Выглядит достаточно просто! Мне не нужен UI, поэтому я собираюсь использовать Node.js!

Лия:Конечно, кажется, Node.js как раз подходит для этого!

Джон запускаетnpm install packageName --save, как написано в README пакета.

Джон запускаетnode index.js.

Node:Внимание: Чтобы загрузить ES модуль, установите "type": "module" в package.json или используйте расширение .mjs. Синтаксическая ошибка: Нельзя использовать выражение import вне модуля.

Джон:Но у меня нет package.json…

Лия:Запустиnpm init, он его создаст!

Джон запускаетnpm init, выполняет инструкции на экране, добавляет руками"type": "module"в сгенерированный package.json.

Джон запускаетnode index.js.

Node:Синтаксическая ошибка: Нельзя использовать выражение import вне модуля.

Странно, на этот раз ошибка была проброшена из внутренного модуля в проекте. ШТА?!

Лия:Ладно, к чёрту, просто запусти скрипт в браузере. Это ES6-модуль, просто обычный JS-алгоритм, который не использует никакие Node.js API. Должно сработать.

Джон создаёт простую index.html с<script type="module" src="index.js">.

Джон запускает index.html в браузере.

В консоли ничего. Тишина. Сверчки. 🦗

Лия:Оу, тебе нужно уточнить путь до модуля, чтобы подключитьpackageName. Node.js делает всякое специальное, чтобы получить пакет из node_modules. Сейчас ты в браузере, поэтому нужно самому указать точный путь.

Джон смотрит в файловую систему, но там нет никакой папки node_modules.

Лия:Оу, ты запускалnpm installдо того, как у тебя появился package.json, это скорее всего оно! Попробуй запустить ещё раз!

Джон запускаетnpm install packageName --saveещё раз.

Джон:Ура, node_modules появилась!

Он отчаянно ищет в node_modules точку входа.

Джон редактирует index.js, перезагружает index.html.

Firefox:Incorrect MIME type: text/html.

Лия:Оу, ты смотришь черезfile://! Чувак, как ты живёшь без localhost? JavaScript сейчас сильно ограничен внутриfile://.

Джон:Но зачем мне… ладно, я запущу localhost.

Джон запускает localhost, открывает index.html по путиhttp://localhost:80.

Firefox:Incorrect MIME type: text/html.

Джон:Уф. Мне нужно настроить localhost, чтобы JS-файлы раздавались с MIME-типомtext/javascript?

Лия:Что? Нет! Он это умеет. Хм… посмотри во вкладку Networks, я подозреваю, он не может найти твой модуль и возвращает HTML страничку для 404, поэтому оно ругается, так как MIME-тип страницы неtext/javascript.

Смотрит в node_modules снова, исправляет путь. Оказывается, VS Code схлопывает папки, в которых только одна подпапка, поэтому мы и не заметили сразу.

Если кому интересно: я правда думаю, что это полезное улучшение VS Code, оно увеличивает эффективность. Но им действительно стоит сделать его более явным, чтобы такого не случалось.

Firefox:SyntaxError: missing ) after formal parameters.

Лия:Что? Это приходит из кода пакета, это не твоя ошибка. Я не понимаю… Можем мы посмотреть на эту строчку?

Джон кликает на строчку, которая бросает ошибку.

Лия:Боже мой. Это не JavaScript, это TypeScript! С расширением .js!!

Джон:Я просто хотел запустить одну строчку кода, чтобы протестировать алгоритм… 😭😭😭

Джон сдаётся. Решает больше никогда не прикасаться к Node.js, npm или ES6-модулям даже длинной палкой.

Конец.

Обратите внимание, что Джон — компьютерный специалист, который знает достаточно много про веб: у него установлены Node.js и npm, он знает, что такое MIME-типы, он может запустить localhost для своих нужд. А как быть тем, кто и правда новичок?