Когда-то давно мы могли просто поместить HTML-код и файл сценария на FTP-сервер, быстро создать рабочий веб-сайт и положить этому конец.

Сегодня нам приходится преодолевать множество препятствий, чтобы получить нужные вещи в нужных местах. Предположим, Алиса хочет провести выходные, создавая простое приложение с делами или любую другую маленькую идею, которая ей нравится. Во-первых, ей нужно установить большую кучу файлов пакетов npm размером 10 тыс. Затем она тратит несколько часов на поиски того, как заставить сборщик js на этой неделе работать с последними машинописными текстами и новейшей трендовой инфраструктурой пользовательского интерфейса. И очень неприятно, когда что-то не работает или эти статьи просто устарели. Как только она действительно начала создавать первую функцию для своего маленького забавного приложения, выходные в основном прошли!

Но все меняется ...

1. Немного предыстории: CommonJS и модуль ES

Работая с NodeJS, мы все знакомы с CommonJS, стандартным (читай: устаревшим) способом для NodeJS загрузки кода зависимости. После установки модуля, например, lodash, мы можем загрузить его в наш код, используя require('lodash'). Вот как NodeJS обрабатывает код зависимостей с самого начала:

ECMAScript 2015 (ES6) представил ES Module - официальную стандартизированную модульную систему для JavaScript. Чтобы добраться сюда, потребовалось время. В настоящее время все основные браузеры и NodeJS (начиная с v13.2.0) по умолчанию поддерживают модуль ES. Модуль ES имеет преимущества статического анализа, встряхивания дерева и асинхронности.

В NodeJS для включения модуля ES у нас есть два варианта: использовать расширение .mjs или установить "type": "module" в package.json. И хотя большинство инструментов разработки понимают модуль ES, все еще остается много несовместимых. Например, TypeScript до сих пор не поддерживает вывод в файлы .mjs. Или Vercel не работает с ES Module. Так что некоторые транспилеры и обходные пути все еще требуются. Надеюсь, ситуация скоро изменится ™.

Многие пакеты в NodeJS уже поставляются с файлами модуля ES. Но многие пакеты - нет. На момент написания этой статьи из 10 лучших пакетов, зависящих от npm, только tslib поддерживает файл модуля ES, включая "exports" в package.json. Многие другие популярные пакеты до сих пор не поставляют модуль ES: lodash, moment, response, request, axios, chalk, commander, express ... На самом деле это не проблема для NodeJS, потому что NodeJS позволяет использовать import для работы с обоими модулями ES. и формат CommonJS .

Но у браузеров нет такой привилегии. Что делать, если вы хотите импортировать свой любимый модуль узла в браузер? Что ж, тебе должно повезти. На момент написания этой статьи рекомендуемый способ для React начать работу в браузере - это включить версию UMD в тег <script> и использовать глобальную переменную window.ReactDOM:

Нет модуля ES для Алисы.

2. Skypack

Skypack - замечательный сервис CDN, который перекомпилирует пакеты узлов для правильной работы в браузере. Его поддерживает команда Snowpack. Просто поместите пакет name @ version после cdn.skypack.dev, и все готово:

Просто работает! Вы, конечно, можете спросить, есть лодаши, которые мы можем импортировать. Но у многих пакетов нет своих двойников. Или они не часто обновляются. Здесь на помощь приходит skypack.dev.

Однако у него все еще есть некоторые проблемы. По непонятным причинам некоторые версии не работали. При посещении cdn.skypack.dev/react@16 вместо него используется React версии 17. Но будущее светлое. Теперь Алиса может начать работать прямо над своим приложением, не тратя большую часть выходных на настройку сборщика js на этой неделе ...

Дополнительное примечание: Я также разместил свою собственную версию по адресу espkg.vercel.app/react@16. Вы можете использовать espkg.vercel.app в качестве альтернативы, пока Skypack не устранит проблему. Другие пакеты также работают, например, espkg.vercel.app/lodash@4 (дайте ему немного времени на сборку, тогда ответ будет кэширован Vercel).

3. Снежный покров

Ладно, я немного соврал. TypeScript не будет работать непосредственно в браузере. Тебе все еще нужно поработать. Вот и настоящая сила Snowpack: минимальный конфиг и удаленные пакеты. Вам даже не нужно устанавливать node_modules, чтобы начать работать со своим маленьким забавным приложением. Просто запустите 2 команды настройки:

yarn global add snowpack
snowpack init

Это даст вам пустой скелет snowpack.config.js. Затем добавьте однострочную конфигурацию source: 'remote' в packageOptions:

Это все! Теперь запустите snowpack dev и начните добавлять свои index.html и myscript.ts (да, это TypeScript):

Просто работает! 🎉 Послушайте, нет node_modules! Нет package.json! У нас даже есть TypeScript и hot-reload бесплатно . Ура!

Резюме

Пример кода можно скачать здесь: gist.github.com/olvrng. На snowpack.config.js есть и другие конфигурации, которые могут вам понадобиться. Приберем это на другой день. Теперь начните возиться со своим приложением и потратьте свое драгоценное время на самую ценную функцию! 🚀🚀

P.S.

О, но Алиса хочет использовать меньше. Не волнуйтесь, всего лишь однострочный конфиг… Клянусь! Она могла добавить файл mystyle.less и еще одну строку для snowpack.config.js. Все будет хорошо. Что ж, на этот раз она должна не забыть бежать yarn add snowpack-plugin-less! Только на этот раз ...

Спасибо за чтение! И не забывайте мою маленькую страничку espkg.vercel.app.