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