Лучшие инструменты JavaScript в 2022 году: основное руководство по лучшей разработке

• Разбивка наиболее важных инструментов разработки JS в 2022 году, включая их наиболее важные компромиссы, и некоторые самоуверенные советы, разбросанные сверху. *

В мире разработки программного обеспечения важно иметь четкое представление об имеющихся в вашем распоряжении инструментах.

Но ландшафт инструментов JS всегда меняется такими быстрыми темпами.

И 2022 год ничем не отличается.

Поэтому я решил разобрать самые важные инструменты разработки, о которых вы должны знать в 2022 году.

Мы начнем с инструментов самого низкого уровня и будем двигаться оттуда к инструментам более высокого уровня. Приступаем 💪

Компиляторы

Компиляторы отвечают за преобразование вашего входного кода в некоторый целевой выходной формат. Для наших целей мы сосредоточимся на компиляторах, которые поддерживают преобразование современного JavaScript и TypeScript в определенные версии ECMAscript, совместимые с браузерами и последними версиями Node.js.

Самое важное, что нужно понять об этом пространстве, это то, что оно находится в процессе массового перехода от таких компиляторов, как tsc и babel , которые написаны на интерпретируемых языках более высокого уровня, в такие компиляторы, как swc и esbuild, которые написаны на гораздо более быстрых компилируемых языках.

Этот сдвиг приводит к 10-100-кратному ускорению компиляции, как показано в этой демонстрации esbuild.

Если вы обновляете свой стек devtools или начинаете новый проект в 2022 году, вам следует рассмотреть возможность использования одного из этих компиляторов нового поколения. Они могут быть не такими зрелыми, как официальный компилятор typescript или babel, но нельзя недооценивать преимущества наличия в 100 раз более быстрых сборок.

Обратите внимание, что ни swc, ни esbuild не выполняют проверку типов. Они просто транспилируют код в желаемый выходной формат как можно быстрее и эффективнее. В настоящее время, если вы работаете с TypeScript, вам почти всегда нужно иметь официальный компилятор TypeScript как часть вашей цепочки инструментов, чтобы гарантировать, что вы получаете максимальную отдачу от статической проверки типов TypeScript. Также стоит упомянуть, что автор swc kdy1dev работает над портированием tsc на Go, чтобы во многих случаях устранить необходимость в tsc, так как он является узким местом в большинстве цепочек инструментов.

SWC против esbuild

swc и esbuild — превосходные, молниеносно быстрые компиляторы JS/TS с открытым исходным кодом. Они имеют сравнимую производительность, и оба регулярно используются в производстве некоторыми из крупнейших в мире компании.

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

Известные проекты с использованием swc:

• [Vercel и Next.js] (https://nextjs.org/docs/advanced-features/compiler)

• Линтер, форматтер и документы Deno

• Посылка

• [nx] (https://github.com/nrwl/nx)

Известные проекты с использованием esbuild:

• [Vite] (https://vitejs.dev/)

• [Nuxt.js] (https://nuxtjs.org/)

• [Ремикс] (https://github.com/remix-run/remix)

• [SvelteKit] (https://kit.svelte.dev/)

• tsup

В разработке программного обеспечения такие удобные утверждения, как «технология А лучше, чем технология Б», редко имеют большую ценность. Скорее, вы должны стараться всегда помнить о контексте. В этом случае есть много сценариев, в которых лучше использовать tsc или babel.

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

Сборщики

Сборщики несут ответственность за сбор всех ваших входных исходных файлов и объединение их вместе в удобный для использования выходной формат. Два наиболее распространенных варианта использования сборщиков — это объединение библиотек и объединение ресурсов для веб-приложений.

Сборщики, такие как webpack и rollup, являются швейцарскими армейскими ножами современных наборов инструментов JS. Они оба чрезвычайно расширяемы, с хорошо поддерживаемыми плагинами, охватывающими основные варианты использования. Например, относительно просто использовать любой из популярных компиляторов, перечисленных выше, для транспиляции кода TS либо с помощью webpack, либо с помощью rollup.

Parcel, с другой стороны, обеспечивает практически нулевой подход к объединению. Он ориентирован на простоту, а не на расширяемость, и использует swc в качестве компилятора под капотом.

Обратите внимание, что swc и esbuild также предоставляют базовые возможности объединения, хотя по сравнению с этими альтернативами они недостаточно полнофункциональны, чтобы быть включенными в этот список.

Более подробное сравнение этих сборщиков можно найти в tooling.report.

Менеджеры пакетов

Менеджеры пакетов отвечают за управление зависимостями в форме NPM пакеты.

Здесь [много истории] (https://blog.logrocket.com/javascript-package-managers-compared/), но TL;DR таков:

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

• pnpm, похоже, очень быстро набирает обороты. 💪

• То, как была развернута пряжа berry, и последующее прекращение поддержки пряжи v1 отвратили многих людей от использования пряжи, хотя пряжа берри прошла долгий путь за последние несколько лет.

• yarn plug’n’play — интересный подход, но на практике он применялся только в случаях с очень большими монорепозиториями.

• Я не могу сказать вам, сколько раз я хотел проверить или добавить операторы console.log в мои node_modules, и неспособность сделать это является реальным недостатком.

Принятие популярными проектами

Разработка библиотеки

Эти инструменты предназначены для того, чтобы помочь авторам библиотек объединять и публиковать современные пакеты NPM.

Если вы разрабатываете новую библиотеку в 2022 году, вы, вероятно, захотите использовать один из этих высокоуровневых инструментов для упрощения рабочего процесса.

• Если у вас есть пакет TS и вы хотите воспользоваться чрезвычайно быстрой сборкой благодаря esbuild, тогда tsup отличный вариант.

• Если у вас есть пакет TS и вам нужны дополнительные функции, то tsdx — отличный вариант.

• Если у вас есть пакет TS или JS, отличным вариантом также будет microbundle.

• Vite — это в основном инструмент для создания интерфейсных веб-приложений, но он также включает поддержку [библиотек вывода] (https://vitejs.dev/guide/build.html#library -mode) и является очень надежным универсальным вариантом.

• Для монорепозиториев nx выглядит многообещающе.

Моим личным предпочтением будет использование tsup для пакетов TS, в основном потому, что после того, как вы испытаете в 100 раз более быстрые сборки, действительно трудно подумать о переключении на что-то еще.

Больше информации

Большинство этих инструментов в настоящее время не обеспечивают достаточной поддержки монорепозиториев TS, в которых используются [ссылки на составные проекты] (https://www.typescriptlang.org/docs/handbook/project-references.html). В настоящее время я рекомендую использовать tsc для проверки типов и генерации типов .d.ts (с emitDeclarationOnly: true) и tsup для компиляции кода в каждом из подпакетов. . Пример такого подхода см. в монорепозитории react-notion-x (один из моих проектов OSS).

Публикация современных пакетов NPM — сложная тема, которая выходит далеко за рамки этой статьи. Для получения дополнительной информации о ESM, commonjs, публикации с двумя пакетами, экспорте и многом другом см.:

• Что нужно для поддержки Node.js ESM?

• Заметки Sindresorhus о [публикации] (https://github.com/sindresorhus/meta/discussions/15) и [потреблении] (https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c) пакетов ESM

Разработка веб-приложений

Эти высокоуровневые инструменты и платформы предназначены для того, чтобы помочь разработчикам создавать современные веб-приложения, не беспокоясь обо всех деталях.

Если вы разрабатываете новое веб-приложение в 2022 году с использованием React , то я настоятельно рекомендую использовать Next.js. У него лучшая поддержка, самое активное сообщество и тесная интеграция с [Vercel] (https://vercel.com/), ведущей в мире платформой для развертывания современных веб-приложений.

Remix представляет собой действительно привлекательную альтернативу Next.js. Это от создателей [react-router] (https://github.com/remix-run/react-router), и хотя это относительно новый фреймворк, за ним определенно стоит следить.

Если вы разрабатываете новое веб-приложение с помощью Vue, то Nuxt.js и Vite — отличные варианты.

И последнее, но не менее важное: если вы хотите что-то более легкое, попробуйте Parcel. 🤗

По-видимому, существует примерно равное количество проектов, построенных поверх swc и esbuild. То же самое относится и к webpack и rollup.

Вывод

Современная веб-разработка значительно изменилась за последние 10 лет. Сегодня разработчикам повезло, что у них есть выбор из такого широкого спектра замечательных, хорошо поддерживаемых инструментов.

Однако это ни в коем случае не исчерпывающий список инструментов разработки. Если чего-то не хватает, но вы хотели бы добавить, сообщите мне об этом в twitter.

Надеемся, что эта разбивка помогла вам проанализировать наиболее важные аспекты текущего ландшафта инструментов разработки JS/TS и, надеюсь, поможет вам принимать более обоснованные решения в будущем.

Если вы нашли эту статью полезной, подпишитесь на меня в Twitter, чтобы узнать больше @transitive_bs