[Перевод] Современный 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, когда это было необходимо. На что надеяться настоящим новичкам?
