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 для своих нужд. А как быть тем, кто и правда новичок?