Современный JavaScript: взгляд со стороны

Сегодня я попытался помочь другу использовать JS-модуль, который он нашёл на Github. Мой друг отличный учёный, но не специалист по JS, Поскольку в течение последних шести я занимаюсь исследованиями юзабилити и преподаю в Массачусетском технологическом институте, то у меня пошёл мороз по коже от того, насколько всё запутано. Куча ненужных исключительных ситуаций, загадочных ошибок и отсутствие должной обратной связи. И мне кажется, что я не слишком помог ему пережить то разочарование, которое он испытал за этот час мучений или около того, пока он не сдался.

Всё было примерно так…

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

Джон: Эй, хочу попробовать этот алгоритм, который я нашёл на Github. Он говорит, что нужно использовать import functionName из packageName, а затем вызвать functionName(аргументы). Кажется, всё довольно просто! Мне на самом деле не нужен пользовательский интерфейс, поэтому я буду использовать Node!

Я (Леа): Конечно, Node кажется подходящим фреймворком!

Джон запускает npm install packageName --save в соответствии с рекомендациями README. Затем node index.js.

Node:

Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension. SyntaxError: Cannot use import statement outside a module

Джон: Но у меня нет никакого package.json…

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

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

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

Node:

SyntaxError: Cannot use import statement outside a module

Как ни странно, на этот раз ошибку выбросил внутренний модуль проекта. WAT?!

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

Джон делает простую страницу index.html со строчкой <script type="module" src="index.js"> и загружает её в браузере.

В консоли ничего. Тада.

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

Джон смотрит свои файлы, но там нет каталога node_modules.

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

Джон опять запускает npm install packageName --save

Джон: О, теперь появился каталог node_modules!

Джон отчаянно ищет в node_modules точку входа. Затем редактирует соответствующим образом свой index.js и перезагружает его.

Firefox:

Incorrect MIME type: text/html

Леа: Конечно, у тебя же открывается file://! Дружище, как ты живёшь в наше время без локалхоста? Сейчас использование Javascript для file:// строго ограничено.

Джон: Но почему я… Ладно, запущу локалхост.

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

Firefox:

Incorrect MIME type: text/html

Джон (вздыхает):. Нужно настроить localhost для выдачи JS-файлов с типом text/javascript?

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

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

Вообще-то я думаю, что это действительно хорошее улучшение юзабилити от имени VS Code, оно повышает эффективность, но они должны были сделать более заметным происходящее.

Firefox:

SyntaxError: missing ) after formal parameters

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

Джон щёлкает по строке, которая вызывает ошибку

Леа: О господи. Это не Javascript, это Typescript!!! С расширением .js!!!

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

Джон сдаётся. Он делает вывод, что лучше никогда не трогать модули Node, npm или ES6.

Конец.

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