Кажется, что каждый год является рекордным для JavaScript, и 2021 год ничем не отличается. В частности, новое поколение сборщиков пакетов и инструментов сборки бросает вызов инерции «достаточно хороших» инструментов. Повышенная скорость, лучший опыт разработки и более качественная производственная сборка – все это основные направления нового поколения.

Читайте обзор новой стабильной версии инструментов JavaScript. ESM, esbuild, Parcel, pnpm, Rollup, Snowpack и Vite – новые звезды, упрощающие разработку JS.

Модули ECMAScript (ESM)

Модули ECMAScript, также известные как модули ES или ESM, являются официальным синтаксисом модуля JavaScript. Таким образом, технически это не инструмент, но он имеет большое значение для разработки JS и инструментов. Некоторое время мы наблюдали изрядное количество хаоса и неопределенности в использовании модуля JavaScript (поскольку Node.js опирается на синтаксис CommonJS). Но с недавним одобрением ESM и его общей реализацией в браузерах открываются новые возможности.

Общая форма синтаксиса ESM представлена ​​в листинге 1. Первая строка – это синтаксис для импорта экспорта по умолчанию. Второй использует деструктуризацию для определения членов внутри модуля.

Листинг 1. Синтаксис ESM.

import aModule from 'module-name';
import { moduleMember, anotherMember } from 'module-name';

Даже Microsoft Edge теперь поддерживает ESM, поэтому все основные браузеры теперь поддерживают его.

Браузер может использовать модули двумя способами: либо в сценариях JavaScript, которые он включает, либо непосредственно в специальных "module" тег скрипта, показанный в листинге 2.

Листинг 2. Импорт через модуль сценария.

<script type="module" src="https://unpkg.com/browse/react@17.0.1/"></script>
<script type="module">
  import React from 'react';
</script>
<script type="module" src="https://www.infoworld.com/article/3619560/my-module.js"></script>

В листинге 2 первые два тега скрипта показывают, как настроить таргетинг на абсолютный URL. Обратите внимание, что в первую очередь вы используете src атрибут, а во втором вы выполняете импорт JavaScript. Третий тег скрипта показывает относительный импорт, обслуживаемый из того же домена. Обратите внимание: когда вы загружаете скрипт из другого домена, CORS ограничения применяются.

В течение многих лет для объединения скриптов в пакеты для обхода ограничений браузера с модулями использовались различные сборщики (в наши дни чаще всего это Webpack). Широкая поддержка ESM браузерами меняет эту ситуацию, и для использования этой поддержки были разработаны новые инструменты.

Однако вы увидите, что связывание по-прежнему играет важную роль, потому что разрешение браузеру наивно запрашивать все модули для приложения приведет к снижению производительности при выполнении множества запросов. Объединение, минификация, умный код / ​​разделение CSS и т. Д. По-прежнему важны для хорошей производительности.

Вы можете увидеть поддержку ESM браузером здесь.

строить

строить – относительно новая запись в поле сборщика. Как и другие, он претендует на известность в скорости. Он написан на Go, а не на JavaScript, и использует встроенный в Go параллелизм. Он также полагается на интеллектуальное использование общей памяти во время синтаксического анализа и генерации кода.

Вы можете оценить скорость esbuild, проверив контрольные показатели проекта. Тесты показывают увеличение производительности в 100 раз и более по сравнению с другими сборщиками.

По умолчанию пакеты esbuild для браузера, но он также может сборка для Node.js. Он работает аналогично другим инструментам сборки, привязываясь к NPM через package.json и node_modules. Он также предлагает JavaScript API, который вы можете использовать для объединения команд сборки, если ваши потребности становятся слишком сложными и громоздкими для использования в командной строке. В листинге 3 показан пример использования этого API.

esbuild ориентирован на сборку и не включает сервер режима разработки. Некоторые функции, например код / ​​CSS расщепление, все еще в стадии разработки. Другие инструменты могут использовать esbuild для своих производственных возможностей объединения – см. Vite ниже.

По состоянию на май 2021 года esbuild имеет ~ 25K звезд на GitHub и ~ 570K еженедельных загрузок NPM. Это делает esbuild самым маленьким из описанных здесь проектов, но быстро растет его использование, а обещания производительности делают его заманчивым вариантом.

Листинг 3. Использование esbuild JavaScript API

require('esbuild').build({
  entryPoints: ['app.jsx'],
  bundle: true,
  outfile: 'out.js',
}).catch(() => process.exit(1))

esbuild выводит полностью автономный пакет, который включает в себя код вашего приложения и все зависимости. Многие плагины доступны для различных вариантов использования, начиная с Svelte в PostCSS в YAML. По умолчанию esbuild поддерживает такие распространенные типы, как TypeScript, JSX и JSON.

Пакет

Было бы упущением, если бы я не упомянул Пакет, который по духу похож на Webpack и Rollup (см. ниже). Помимо снижения накладных расходов на конфигурацию, Parcel утверждает, что улучшает производительность, хотя не может сравниться с утверждениями esbuild в этом отношении.

Parcel включает в себя разделение кода без конфигурации и горячую замену модуля (HMR) из коробки. По умолчанию он также включает в себя многие типы файлов (например, изображения) и может обрабатывать их без дополнительной настройки.

Parcel имеет около ~ 38K звезд на GitHub и ~ 64K еженедельных загрузок NPM (еженедельные загрузки, похоже, выравниваются). Эта статистика делает его жизнеспособным вариантом среднего размера.

промилле

промилле не является сборщиком или инструментом сборки. Вместо этого это прямая замена инструмента зависимостей NPM. Это делает его похожим на Пряжа намеренно, но pnpm использует другой подход: он использует жесткие ссылки для сглаживания дерева node_modules, тем самым упрощая управление зависимостями и избегая дублирования зависимостей. Вы можете узнать больше об этой хитрой инженерной мысли. здесь.

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

pnpm также включает pnpx, инструмент, похожий на npx, для выполнения пакетов.

pnpm имеет ~ 11K звезд на GitHub и ~ 191K еженедельных загрузок NPM. Это менеджер пакетов по умолчанию для SvelteKit, и его использование постоянно растет. pnpm выглядит ведущим претендентом на следующий де-факто стандартный менеджер зависимостей.

Свернуть

Свернуть – это сборщик, который позволяет вам везде использовать синтаксис ESM. Он сглаживает различные синтаксисы, встречающиеся в природе (CJS, AMD, UMD, EMS и т. Д.), И объединяет ваш код в синтаксис, который просто работает. Кроме того, Rollup обеспечивает «встряхивание дерева», то есть способность анализировать вашу кодовую базу и устранять неиспользуемый импорт. У этого есть очевидные преимущества.

Подобно esbuild и другим сборщикам, Rollup связывается с package.json и node_modules через NPM.

При использовании Rollup вы можете забыть о синтаксисе модуля и просто использовать ESM. В общем, Rollup нацелен на то, чтобы дать вам опыт будущей разработки JS, где все объединено в ESM уже сейчас.

Rollup очень похож на Webpack по работе, но, в отличие от Webpack, он поддерживает вывод Node.js. Кроме того, некоторые разработчики сообщают более простой и плавный опыт с Rollup.

Накопительный пакет не поддерживает «горячую» замену модуля из коробки.

У Rollup есть активное сообщество и плагин экосистема. По состоянию на май 2021 года у него ~ 20 тыс. Звезд на GitHub и ~ 4,8 млн загрузок NPM еженедельно.

Vite

Vite изначально был инструментом сборки специально для Vue, но теперь он поддерживает общее использование. Он стал официальным решением для сборки SvelteKit поэтому наблюдается все более широкое использование.

Vite ориентирован на выполнение двух требований для разработки JS: запуск режима разработки и сборка для производства. Vite не является сборщиком пакетов, а вместо этого передает задачи сборки пакетов в Rollup.

Задуманный быть быстрым (vite означает «быстро» по-французски), Vite рекламирует свой сервер разработки с быстрым запуском и замену горячих модулей. Опыт подтверждает утверждения Vite – эти функции работают довольно быстро по сравнению с чем-то вроде Webpack.

Повышение скорости Vite основано на использовании ESM и использовании esbuild для предварительного объединения. Использование ESM означает, что Vite может переложить задачу связывания с браузером во время разработки и достичь большей детализации при определении, какие файлы обслуживаются во время изменений.

В настоящее время Vite использует Rollup для производственных сборок (чтобы получить такие функции, как разделение CSS), но в будущем может переключиться на esbuild.

Опыт Vite в разработке – это его самый сильный аргумент: горячая замена модуля выполняется очень быстро. В настоящее время у него ~ 27K звезд на GitHub и ~ 124K еженедельных загрузок NPM, при этом за последние пару месяцев наблюдается значительный рост загрузок.

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

Снежный покров – еще один сборщик и сервер разработки, ориентированный на скорость. Он может похвастаться быстрым запуском сервера, поддержкой ESM с интеллектуальным кэшированием, быстрой заменой горячих модулей и поддержкой различных типов файлов с минимальными настройками. Snowpack по духу похож на Rollup и Parcel.

Snowpack поддерживает целевую замену горячих модулей для модулей JavaScript, CSS и CSS из коробки. Он также может похвастаться сильное сообщество плагинов.

Snowpack имеет ~ 18K звезд на GitHub и ~ 55K еженедельных загрузок NPM.

Будущее JS-инструментов

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

JavaScript остается захватывающим и быстро развивающимся миром для разработки. Жизнь разработчиков JavaScript становится все лучше и лучше.

Авторские права © 2021 IDG Communications, Inc.


#инструментов #преобразующих #разработку #на #JavaScript

Source link