Как установить npx

Представляем npx: утилиту для запуска npm-пакетов

Те из вас, кто обновил npm до последней версии, npm@5.2.0 , могли заметить, что вместе с привычным бинарным файлом npm появился новый: npx .

npx — инструмент, предназначенный для того, чтобы помочь стандартизировать опыт использования npm-пакетов: так же, как и npm упрощает установку и управление зависимостями, размещенными в реестре, npx упрощает использование CLI-утилит и других исполняемых файлов. Это значительно упрощает ряд вещей, которые мы раньше делали с помощью обычного npm.

Использование локально установленных утилит без npm run-script

В последние годы экосистема npm все больше и больше продвигалась к установке инструментов в качестве локальных devDependencies проекта, вместо того, чтобы требовать от пользователей устанавливать их глобально. Это означает, что инструменты, такие как mocha , grunt и bower , которые когда-то были впервые установлены на глобальном уровне в системе, теперь могут использовать свою версию на основе каждого проекта. Это также означает, что все, что вам нужно сделать, чтобы запустить проект на основе npm: убедиться, что у вас есть node и npm в вашей системе, склонировать git-репозиторий и вызвать npm it для запуска install и test . Поскольку npm run-script добавляет локальные бинарные файлы в path , это работает отлично!

Недостатком является то, что это не дает вам быстрого и удобного способа интерактивного вызова локальных бинарных файлов. Есть несколько способов сделать это, и все они вызывают раздражение: вы можете добавить эти инструменты в scripts , но тогда вам необходимо помнить, что передавать аргументы нужно с помощью — , вы можете делать трюки с shell , такие как alias npmx=PATH=$(npm bin):$PATH , или вы можете просто запустить бинарные файлы вручную с помощью ./node_modules/.bin/mocha . Все эти способы работают, но ни один из них не является идеальным.

npx дает вам то, что я считаю лучшим решением: $ npx mocha — это все, что вам нужно сделать, чтобы использовать локально установленную mocha . Если вы выполните дополнительный шаг и настройте автофоллбек в shell (подробнее об этом ниже), тогда $ mocha внутри каталога проекта выполнится без дополнительных команд!

В качестве бонуса npx не приносит оверхеда при вызове уже установленного бинарного файла — он достаточно умен, чтобы загрузить код для инструмента непосредственно в текущий процесс node ! Это работает быстро настолько, насколько вобще можно, и делает npx очень удобным инструментом для запуска скриптов.

Исполнение команд, вызываемых однократно

Вы когда-нибудь сталкивались с ситуацией, когда вы хотите попробовать какой-то CLI-инструмент, но не хочется устанавливать в глобал то, что нужно один раз? npx отлично подходит для этого. Вызов npx , когда еще не находится в вашем $PATH , автоматически установит пакет с этим именем из npm и вызовет его. Когда это будет сделано, установленный пакет никак не затронет глобал, поэтому вам не придется беспокоиться о загрязнении глобала в долгосрочной перспективе.

Эта функция идеально подходит для таких вещей, как генераторы. Инструменты, подобные yoman или create-react-app , вызываются раз в году. К тому времени, когда вы запустите их снова, они уже будут очень устаревшими, поэтому вам придется запускать инсталляцию каждый раз, когда вы захотите их использовать.

Как мейнтернеру утилит, мне очень нравится эта функция, потому что это означает, что я могу написать $ npx my-tool в README.md, вместо того, чтобы заставлять людей делать лишние шаги для её фактической установки. Честно говоря, инструкция «о, просто скопипасть эту команду, больше ничего не требуется» более приемлема для пользователей, которые не уверены в том, использовать ли инструмент или нет.

Вот некоторые интересные пакеты, которые вы можете попробовать использовать с npx: happy-birthday, benny-hill, workin-hard, cowsay, yo, create-react-app, npm-check. Вперёд! Команда для получения полноценного локального REST-сервера, достаточно мала, чтобы вписаться в твит.

Запуск команд с различными версиями Node.js

Как оказалось, в npm есть классный пакет под названием node-bin. Это означает, что вы можете очень легко попробовать команды node с использованием разных версий, не имея необходимости использовать диспетчер версий, такой как nvm, nave или n. Все, что вам нужно — это установленный npm@5.2.0 !

Опция -p для npx позволяет вам указывать пакеты для установки и добавления в запущенный $PATH , поэтому это означает, что вы можете делать такие забавные вещи, как: $ npx -p node-bin@6 npm it , чтобы установить и протестировать npm пакет, как если бы вы запускали node@6 глобально. Я использую это постоянно — и даже недавно пришлось очень много использовать этот трюк с одним проектом из-за того, что одна из моих тестовых библиотек ломалась под node@8 . Это была реальная экономия времени, и я нашла этот способ гораздо проще в использовании для такого рода прецедентов, чем менеджеры версий, так как я всегда нахожу способ их сломать или неправильно сконфигурировать.

Примечание: node-bin работает только на *nix платформах . Это отличная работа Арьи Стюарт. В будущем этот пакет будет доступен как просто node , так что вы сможете напрямую вызывать $ npx node@6 . даже на Windows.

Разработка интерактивных npm-скриптов

Многие пользователи npm в наши дни используют действительно классную функцию запуска npm-скриптов . Мало того, что они организуют ваш $PATH так, чтобы локальные бинарные файлы были доступны, но они также добавляют целый набор переменных окружения, доступ к которым вы можете получить в этих сценариях! Вы можете исследовать эти переменные с $ npm run env | Grep npm_ .

Это может затруднить разработку и тестирование таких скриптов — и это означает, что даже с помощью трюков, таких как $(npm bin)/some-bin , вы всё равно не будете иметь доступ к этим волшебным переменным окружения при работе в интерактивном режиме.

Но постойте! npx имеет еще один трюк: когда вы используете параметр -c , скрипт, написанный внутри строкового аргумента, будет иметь полный доступ к тем же переменным env , что и обычный npm-скрипт! Вы даже можете использовать пайпинг и вызывать несколько команд с одним вызовом npx !

Поделитесь своими скриптами с друзьями и близкими!

Стало привычным использовать gist.github.com для обмена всеми видами служебных скриптов, вместо того, чтобы настраивать репозитории git, выпускать новые инструменты и так далее.

С npx вы можете пойти дальше: поскольку npx принимает любой спецификатор, принимающий сам npm, вы можете создать gist, который люди могут вызывать напрямую, с помощью одной команды!

Примечание: Помните о безопасности! Всегда читайте gists перед их исполнением, так, как если бы вы запускали .sh скрипты!

Бонус: автофоллбек для shell

Эта потрясающая функция, добавленная Félix Saparelli, означает, что во многих случаях вам даже не нужно напрямую обращаться к npx! Основное различие между регулярным использованием npx и фоллбеком заключается в том, что фоллбек не устанавливает новые пакеты, если вы не используете синтаксис pkg@version : защита от потенциально опасного тайпсквоттинга.

Настройка автофоллбека очень проста: просмотрите в документации npx команду, используемую для вашего текущего шелла, добавьте ее в .bashrc / .zshrc / .fishrc , затем перезапустите свой шелл (или используйте source или какой-либо другой механизм для обновления шелла).

Теперь вы можете делать такие вещи, как $ standard@8 -version , чтобы опробовать разные версии утилит, а если вы находитесь в npm-проекте, $ mocha автоматически обратится к локально установленной версии mocha , если она не установлена глобально.

Сделайте это!

Вы можете получить npx уже сейчас, установив npm@5.2.0 или новее, или, если вы не хотите использовать npm, вы можете установить автономную версию npx! Он полностью совместим с другими менеджерами пакетов, поскольку любое использование npm выполняется только для внутренних операций. О, и он доступен на 10 разных языках благодаря вкладу группы ранних пользователей со всего мира. —help и все системные сообщения переведенны и автоматически доступны на основе выбранного языка системы! Также есть репозиторий awesome-npx с примерами вещей, отлично работающими с npx!

У вас есть любимая функция? Вы уже использовали её? Если у вас есть что-то классное, о чём можно рассказать, и что я не перечислила здесь, поделитесь этим в комментариях! Мне бы хотелось услышать, что думают другие люди!

NPX — JS: Настройка окружения

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

Одной из таких программ является prettier. Это очень популярный инструмент, автоматически форматирующий код по общепринятым правилам. С его помощью команды придерживаются единого стиля написания без необходимости запоминать эти правила. Посмотреть как работает prettier можно в его песочнице в браузере .

Пример кода до обработки:

const fn = (a, b) =>  const c = a + b; return c; > 

Этот же код после автоматического форматирования:

const fn = (a, b) =>  const c = a + b; return c; >; 

Так как prettier это инструмент для написания кода, то он должен устанавливаться как dev зависимость:

install --save-dev prettier 

Следующим шагом его нужно запустить как обычную консольную утилиту. По документации prettier видно что имя утилиты (имя исполняемого файла) совпадает с именем пакета. Попробуем выполнить запуск:

# Флаг --write означает что мы разрешаем утилите перезаписать файлы проекта prettier --write . 

Если вы до этого не устанавливали prettier глобально, то запуск кода выше приведет к ошибке: command not found: prettier. Почему так происходит?

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

Программы устанавливающиеся локально, хранят свои исполняемые файлы в директории node_modules/.bin. Поэтому запуск нужно выполнять там:

--write . 

У такого запуска есть два неудобства:

1. Слишком долго набирать
2. Идет завязка на конкретную структуру директорий, которая может поменяться

Для упрощения запуска Node.js поставляется вместе с еще одной утилитой – npx. Она помогает запускать программы установленные локально без необходимости указывать полный путь до исполняемого файла:

--write . 

npx анализирует директорию node_modules/.bin и если находит там нужный файл, то подставляет его. Если файла с нужным именем нет, то npx пытается найти пакет с таким именем и установить.

Как вы увидите дальше, в реальных проектах на JavaScript пакетов-утилит достаточно много. Вот лишь некоторые популярные: Babel, Webpack, Eslint, Gulp. Все это часть экосистемы, с которой сталкиваются все веб разработчики на JavaScript. И для запуска всех этих утилит нужен npx.

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно

• 130 курсов, 2000+ часов теории
• 1000 практических заданий в браузере
• 360 000 студентов

Наши выпускники работают в компаниях:

Node.js. Утилиты npm и npx

Утилита npm — это менеджер пакетов, который входит в состав Node.js. Пакетом называется один или несколько js-файлов, представляющих собой какую-то библиотеку или инструмент. Менеджер пакетов предназначен для скачивания пакетов из облачного сервера, либо для загрузки (публикации) пакетов на этот сервер.

1. Инициализация проекта

Для создания нового проекта нужно создать директорию проекта, перейти в нее и выполнить команду

> npm init # в директории проекта

В процессе инициализации, npm задаст несколько вопросов на тему того как должен называться проект, какая у него должна быть версия, описание и тому подобное. В конце npm спросит все ли правильно и покажет содержимое файла package.json , который и станет основой нового проекта.

2. Файл package-lock.json

Сразу после установки хотя бы одного пакета, рядом с package.json будет создан файл package-lock.json , который будет обновляться каждый раз при добавлении новой зависимости. В этом файле содержится описание состояния текущей иерархии используемых в приложении модулей: их точные версии и точные версии используемых ими пакетов и так до конца. При развертывании приложения в новой среде наличие файла package-lock.json гарантирует, что будут установлены версии тех пакетов, которые использовались в разработке в последний раз.

Команда npm ci игнорирует файл package.json и устанавливает модули, руководствуясь только файлом package-lock.json .

3. Установленные пакеты

Получить список всех установленных в директории проекта npm-пакетов можно с помощью команды

> npm list # в директории проекта

Дополнительная опция —all команды list выводит все пакеты в виде дерева

> npm list --all # в директории проекта

Получить список всех установленных глобально npm-пакетов (см.ниже) можно с помощью команды

> npm --global list > npm -g list

4. Подробная информация о пакете

Посмотреть подробную информацию о пакете, доступного через npm-репозиторий

> npm view package-name

> npm view cowsay cowsay@1.5.0 | MIT | deps: 4 | versions: 20 cowsay is a configurable talking cow https://github.com/piuccio/cowsay keywords: cow, cowsay, cowthink, figlet, talking, ASCII .

Получить информацию из npm-репозитория о последней доступной версии пакета

> npm view package-name version

$ npm view cowsay version 1.5.0

5. Локальная установка пакетов

Установить все пакеты из секций dependencies и devDependencies файла package.json :

> npm install

Установить все пакеты из секции dependencies файла package.json (для production сервера)

> npm install --production

Установить пакет package-name , но не добавлять его в файл package.json :

> npm install package-name --no-save

Установить пакет package-name и добавить в секцию devDependencies файла package.json :

> npm install package-name --save-dev > npm install -D package-name

Установить пакет package-name и добавить в секцию dependencies файла package.json :

> npm install package-name --save-prod > npm install -P package-name > npm install package-name

6. Локальное удаление пакетов

Удалить пакет package-name , но не удалять его из файла package.json :

> npm uninstall package-name

Удалить пакет package-name и удалить его из секции devDependencies файла package.json :

> npm uninstall package-name --save-dev > npm uninstall -D package-name

Удалить пакет package-name и удалить его из секции dependencies файла package.json :

> npm uninstall package-name --save > npm uninstall -S package-name

7. Глобальная установка пакета

По умолчанию npm будет устанавливать все пакеты в локальной директории, в которым мы сейчас работаем (директория проекта). Если нужно, чтобы пакет был доступен всем приложениям, его нужно установить глобально. Но это не лучшее решение — разные проекты могут требовать разные версии одного пакета. Глобально установленный пакет будет нормально работать в одном проекте и вызывать ошибку в другом.

> npm install --global package-name > npm install -g package-name

Куда именно будет установлен пакет, можно узнать с помощью команды npm config get prefix .

8. Глобальное удаление пакета

Так что если из-за глобально установки пакета возникли трудности — можно удалить его с помощью команды

> npm uninstall --global package-name > npm uninstall -g package-name

9. Локальное обновление пакетов

Обновить один пакет или все пакеты проекта (нужно выполнять из директории проекта):

> npm update package-name # обновить пакет в директории проекта > npm update # обновить все пакеты проекта

Чтобы узнать, вышли ли новые версии используемых в проекте пакетов

> npm outdated

10. Как безопасно обновляться

Некоторые из доступных обновлений пакетов представляют собой мажорные релизы, обновления до которых не произойдёт при выполнении npm update . Обновление до мажорных релизов не производится, так как они могут содержать серьёзные изменения, не обладающие обратной совместимостью.

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

> npm install --global npm-check-updates

Теперь можно посмотреть, какие пакеты можно обновить (без внесения каких-либо изменений):

> ncu Checking package.json [====================] 4/4 100% .

• Red = major upgrade
• Cyan = minor upgrade
• Green = patch upgrade

Убедившись, что обновление достаточно безопасно, можно выполнять следующую команду:

> ncu -u Upgrading package.json [====================] 4/4 100% .

Эта команда обновит файл package.json , внеся изменения в указания о подходящих версиях пакетов в разделы dependencies и devDependencies . Это позволит npm обновить пакеты, используемые в проекте, до новых мажорных версий при запуске команды npm update .

Если нужно установить самые свежие версии пакетов для только что только что загруженного проекта, в котором пока нет директории node_modules , то, вместо npm update , выполняем команду npm install .

11. Глобальное обновление пакетов

Обновить один пакет или все пакеты, установленные глобально (можно выполнять из любого места):

> npm update --global package-name # обновить глобальный пакет > npm update --global # обновить все глобальные пакеты

12. Установка конкретной версии

Установка старой версии npm-пакета может понадобиться для решения проблем совместимости:

> npm install package@version # локально, из директории проекта > npm install --global package@version # глобально, из любого места

Узнать, какие версии некоего пакета имеются в npm-репозитории

> npm view package-name versions

> npm view cowsay versions [ '1.0.0', '1.0.1', '1.0.2', '1.0.3', '1.1.0', '1.1.1', '1.1.2', '1.1.3', '1.1.4', '1.1.5', '1.1.6', '1.1.7', '1.1.8', '1.1.9', '1.2.0', '1.2.1', '1.3.0', '1.3.1', '1.4.0', '1.5.0' ] > npm install cowsay@1.4.0

13. Запуск скриптов

Файл package.json часто содержит секцию scripts , которая содержит скрипты для автоматизации рутиных задач. Можно запустить или остановить веб-сервер, собрать приложение, прогнать тесты и так далее.

 .......... "scripts":  "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" >, .......... >

Запускать эти команды можно с помощью команды

> npm run-script command > npm run command

К переменной окружения PATH будет добавлен путь node_modules/.bin , так что в первую очередь будут выполнены локальные скрипты проекта.

Некоторые скрипты можно запускать без указания run , например npm start , npm stop или npm test .

14. Справка по менеджеру пакетов

У менеджера пакетов есть подробная справка по все командам

> npm npm Usage: npm install install all the dependencies in your project npm install add the dependency to your project npm test run this project's tests npm run run the script named npm -h quick help on npm -l display usage info for all commands npm help search for help on (in a browser) npm help npm more involved overview (in a browser) All commands: access, adduser, audit, bin, bugs, cache, ci, completion, config, dedupe, deprecate, diff, dist-tag, docs, doctor, edit, exec, explain, explore, find-dupes, fund, get, help, hook, init, install, install-ci-test, install-test, link, ll, login, logout, ls, org, outdated, owner, pack, ping, prefix, profile, prune, publish, rebuild, repo, restart, root, run-script, search, set, set-script, shrinkwrap, star, stars, start, stop, team, test, token, uninstall, unpublish, unstar, update, version, view, whoami Specify configs in the ini-formatted file: C:\Users\Evgeniy\.npmrc or on the command line via: npm --key=value More configuration info: npm help config Configuration fields: npm help 7 config npm@7.8.0 C:\Users\Evgeniy\AppData\Roaming\npm\node_modules\npm

Для примера, посмотрим справку по команде install (в браузере)

> npm help install

Утилита npx

Существует множество утилит в виде пакетов (например, create-react-app ), которые изначально предполагалось устанавливать глобально. Запускать их из командной строки было очень просто — достаточно ввести имя утилиты в консоли. Однако мы уже знаем, что глобальная установка пакетов создает множество проблем.

Конечно, мы можем что-нибудь придумать, чтобы избежать проблем с глобальной установкой таких утилит. Например, установить пакет create-react-app глобально, запустить один раз из директории проекта, чтобы создать React-приложение — и сразу после этого удалить.

Еще один способ — установить create-react-app локально в какую-то временную директорию. И добавить команду в секцию scripts файла package.json . После этого можно запускать утилиту из этой директории с помощью npm run , указывая путь к директории проекта, который надо создать.

> cd /path/to/temp/dir/ > npm install create-react-app # установка create-react-app в какой-то временной директории

 .......... "scripts":  .......... "create-app": "create-react-app", .......... >, .......... "dependencies":  "create-react-app": "^4.0.3" > >

> npm run-script create-app /path/to/project/dir/hello-world # запуск утилиты, создание проекта hello-world

Второй пример с пакетом create-react-app получился не слишком удачным. Потому что утилита предназначена для развертывания React-приложения в пустой директории проекта. Поэтому мы не можем установить create-react-app локально, как dev-зависимость проекта — и вынуждены устанавливать во временной директории. Но в случае других пакетов такого рода можно установить пакет локально как dev-зависимость проекта — и запускать через run-script .

В общем, получается сложно и хлопотно — тут на помощь приходит утилита npx , которая позволяет:

• во-первых, легко запустить локально установленный пакет без run-script
• во-вторых, легко запустить пакет, который не установлен ни локально, ни глобально
• в-третьих, запускать разные версии одной утилиты с помощью package@version

Посмотрим на то, как использовать команду npx на примере простой утилиты cowsay . Это абсолютно бессмысленная утилита, которая выводит на экран «говорящую» корову — но подходит в качестве примера. Если пакет cowsay установлен глобально, выполнение в командной строке команды cowsay hello приведёт к выводу в консоль «говорящей» коровы.

> cowsay hello _______ < hello >------- \ ^__^ \ (oo)\_______ (__)\ )\/\ ||----w | || ||

Если пакет cowsay не установлен глобально, подобная команда выдаст ошибку:

> cowsay hello "cowsay" не является внутренней или внешней командой, исполняемой программой или пакетным файлом.

Используем команду npx , когда пакет cowsay не установлен глобально:

> npx cowsay hello _______ < hello >------- \ ^__^ \ (oo)\_______ (__)\ )\/\ ||----w | || ||

Утилита npx скачает пакет cowsay из npm-репозитория, установит во временную директорию и выполнит утилиту. Что важно — не загрязняя глобальное пространство. Так что при использовании npx необходимости в глобальной установке пакетов больше нет.

Если запускать npx из директории проекта, то сначала будет выполнен поиск в node_modules/.bin . Если пакет уже установлен локально — он будет выполнен. А если не установлен — npx найдет его в npm-репозитории, скачает, установит во временную директорию и выполнит.

Несколько раз встречал команду npm it и никак не мог понять, что она означает. Оказывается, это синоним команды npm install-test , которая выполняет последовательно две команды:

> npm install > npm test

• Vue.js. Начало работы
• Browser-sync. Живая перезагрузка
• Расширение «ESLint» для VS Code, часть 2 из 2
• Расширение «ESLint» для VS Code, часть 1 из 2
• Расширение «Prettier — Code formatter» для VS Code
• Webpack. Начало работы, часть 2 из 2
• Webpack. Начало работы, часть 1 из 2

Каталог оборудования

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Производители

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Функциональные группы

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Категории блога
Облако тегов

• 1С:Предприятие (31)
• API (29)
• Bash (43)
• CLI (118)
• CMS (139)
• CSS (50)
• Frontend (75)
• HTML (66)
• JavaScript (150)
• Laravel (72)
• Linux (165)
• MySQL (76)
• PHP (125)
• React.js (66)
• SSH (27)
• Ubuntu (68)
• Web-разработка (509)
• WordPress (73)
• Yii2 (69)
• БазаДанных (95)
• Битрикс (66)
• Блог (29)
• Верстка (43)
• ИнтернетМагаз… (84)
• КаталогТоваров (87)
• Класс (30)
• Клиент (28)
• Ключ (28)
• Команда (84)
• Компонент (60)
• Конфигурация (63)
• Корзина (32)
• ЛокальнаяСеть (28)
• Модуль (34)
• Навигация (31)
• Настройка (140)
• ПанельУправле… (29)
• Плагин (33)
• Пользователь (26)
• Практика (101)
• Сервер (75)
• Событие (27)
• Теория (106)
• Установка (66)
• Файл (51)
• Форма (58)
• Фреймворк (192)
• Функция (36)
• ШаблонСайта (68)

Создаём новое React-приложение

These docs are old and won’t be updated. Go to react.dev for the new React docs.

See Start a New React Project for the recommended ways to create an app.

Используйте встроенный набор инструментов для лучшего взаимодействия пользователя и разработчика.

На этой странице описано несколько популярных наборов инструментов React, которые помогают в таких задачах как:

• Масштабирование до большого количества файлов и компонентов.
• Использование сторонних библиотек из npm.
• Раннее обнаружение распространённых ошибок.
• Отражение изменений CSS и JS на лету в процессе разработки.
• Оптимизация кода для продакшена.

Рекомендованные на этой странице инструменты не требуют дополнительной настройки для начала работы.

Возможно, вам не нужен дополнительный набор инструментов

Если у вас нет проблем, описанных выше, или пока не чувствуете себя уверенно, используя инструменты JavaScript, рассмотрите возможность добавления React в виде простого тега на HTML-странице, при необходимости с JSX.

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

Рекомендуемый набор инструментов

Команда React в первую очередь рекомендует следующие решения:

• Если вы изучаете React или создаёте новое одностраничное приложение, используйте Create React App.
• Если вы создаёте серверный сайт с Node.js, попробуйте Next.js.
• Если вы создаёте статический контент-ориентированный сайт, попробуйте Gatsby.
• Если вы создаёте библиотеку компонентов или интегрируетесь с существующей кодовой базой, попробуйте более гибкие наборы инструментов.

Create React App

Create React App — удобная среда для изучения React и лучший способ начать создание нового одностраничного приложения на React.

Инструмент настраивает среду для использования новейших возможностей JavaScript, оптимизирует приложение для продакшена и обеспечивает комфорт во время разработки. Вам понадобятся Node.js не ниже версии 14.0.0 и npm не ниже версии 5.6 на вашем компьютере. Для создания проекта выполните команды:

npx create-react-app my-app cd my-app npm start

Create React App не обрабатывает бэкенд логику или базы данных, он только предоставляет команды для сборки фронтенда, поэтому вы можете использовать его с любым бэкэндом. «Под капотом» используются Babel и webpack, но вам не нужно ничего знать о них.

Когда ваше приложение готово к развёртыванию в продакшене, запуск команды npm run build создаст оптимизированную сборку вашего приложения в папке build . Вы можете узнать больше о Create React App из его README и его пользовательского руководства.

Next.js — это популярный легковесный фреймворк для статических и серверных приложений, использующих React. Он включает в себя готовые решения для стилизации и маршрутизации и предполагает, что вы используете Node.js в качестве серверной среды.

Gatsby — лучший способ для создания статических сайтов с помощью React. Он позволяет использовать React-компоненты, но выводит предварительно отрендеренный HTML и CSS, чтобы гарантировать минимальное время загрузки.

Более гибкие наборы инструментов

Следующие наборы инструментов предлагают больше гибкости и выбора. Мы рекомендуем их более опытным разработчикам:

• Neutrino сочетает в себе возможности webpack и простоту пресетов. Инструмент включает в себя пресеты для React-приложений и React-компонентов.
• Nx — набор инструментов для ведения фулстэк разработки в монорепозиториях, который обладает встроенной поддержкой React, Next.js, Express и так далее.
• Parcel — быстрый упаковщик веб-приложений с нулевой конфигурацией, который работает с React.
• Razzle — это фреймворк для серверного рендеринга, более гибкий чем Next.js, но не требующий обязательной настройки.

Создание набора инструментов с нуля

В набор инструментов для сборки JavaScript обычно входят:

• Менеджер пакетов, такой как Yarn или npm. Он позволяет вам использовать обширную экосистему сторонних пакетов и легко устанавливать или обновлять их.
• Сборщик, такой как webpack или Parcel. Он позволяет писать модульный код и объединять его в небольшие пакеты, чтобы оптимизировать время загрузки.
• Компилятор, такой как Babel. Он позволяет писать современный код JavaScript, который будет работать даже в старых браузерах.

Если вы предпочтёте создать свой собственный набор JavaScript-инструментов с нуля, ознакомьтесь с этим руководством, в котором воссоздаются некоторые функции Create React App.

Не забудьте убедиться, что ваш набор инструментов правильно настроен для продакшена.