Npm run build что это

Frontender Magazine

Есть несколько модных инструментов для автоматизации сборки в javascript-проектах, которые я никогда не находил привлекательными, потому как знаком с менее известной командой npm run , которой вполне достаточно для всего, что мне необходимо делать, сохраняя при этом достаточно маленький конфигурационный файл.

Вот несколько трюков, которые я использую чтобы получить максимальную отдачу от npm run и полей script в package.json .

Поле «script»

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

npm test и npm start — это, всего лишь, удобные ссылки для npm run test и npm run start . С помощью npm run можно выполнить совершенно любое содержимое любого поля внутри scripts .

Кроме того, npm run великолепен ещё и потому, что npm автоматически добавляет в $PATH директорию node_modules/.bin , так что вы можете напрямую запускать команды из dependencies или devDependencies , без необходимости устанавливать это модули глобально. npm-пакеты, которые вы хотели бы включить в свой воркфлоу, должны иметь всего лишь простой интерфейс командной строки, и вы сможете написать простую автоматизацию самостоятельно.

Сборка javascript

Я пишу клиентский код, используя для его организации принятые в commonjs module.exports и require() и подключая модули, опубликованные в npm. browserify может преобразовать все вызовы require() в статический код, на этапе сборки, создав единый склееный бандл-файл, который можно загрузить, используя тег script . Для использования browserify я просто держу в package.json поле scripts[‘build-js’] , которое выглядит так:

"build-js": "browserify browser/main.js > static/bundle.js" 

Если я хочу собрать javascript для продакшна, я также выполняю минификацию — подключаю uglify-js как devDependency и дописываю его через пайп:

"build-js": "browserify browser/main.js | uglifyjs -mc > static/bundle.js" 

Отслеживание изменений в javascript

Для автоматической перекомпиляции клиентского javascript при любых изменениях файлов, я просто заменяю команду browserify на watchify и добавляю ключи -d и -v для дебага и более подробного вывода.

"watch-js": "watchify browser/main.js -o static/bundle.js -dv" 

Сборка CSS

Я обнаружил, что cat обычно полностью удовлетворяет мои потребности, так что я просто держу для сборки что-то вроде этого:

"build-css": "cat static/pages/*.css tabs/*/*.css > static/bundle.css" 

Отслеживание изменений в css

Так же как и с watchify , я пересобираю css при изменениях с помощью замены cat на catw:

"watch-css": "catw static/pages/*.css tabs/*/*.css -o static/bundle.css -v" 

Последовательности задач

Если у вас есть две задачи, которые вы хотели бы запускать последовательно, то вы можете записать их через npm run и разделив их с помощью && :

"build": "npm run build-js && npm run build-css" 

Параллельные задачи

Если вам нужно запустить несколько задач параллельно, просто разделите их с помощью & :

"watch": "npm run watch-js & npm run watch-css" 

Получившийся package.json

Соединив всё, о чем я говорил, мы получим примерно такой package.json

< "name": "my-silly-app", "version": "1.2.3", "private": true, "dependencies": < "browserify": "~2.35.2", "uglifyjs": "~2.3.6" >, "devDependencies": < "watchify": "~0.1.0", "catw": "~0.0.1", "tap": "~0.4.4" >, "scripts": < "build-js": "browserify browser/main.js | uglifyjs -mc > static/bundle.js", "build-css": "cat static/pages/*.css tabs/*/*.css", "build": "npm run build-js && npm run build-css", "watch-js": "watchify browser/main.js -o static/bundle.js -dv", "watch-css": "catw static/pages/*.css tabs/*/*.css -o static/bundle.css -v", "watch": "npm run watch-js & npm run watch-css", "start": "node server.js", "test": "tap test/*.js" > > 

Если мне нужно выполнить сборку для продакшна, я просто выполняю npm run build . Для локальной разработки я запущу npm run watch .

Вы можете расширять базовое приближение как хотите! Например, вам может понадобиться выполнить build до запуска start , в этом случае вы просто напишете:

"start": "npm run build && node server.js" 

Или, возможно, вы захотите создать команду npm run start-dev , которая также запустит вотчеры:

"start-dev": "npm run watch & npm start" 

Вы можете реорганизовать все части так, как хотите!

Когда становится действительно сложно…

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

Эти скрипты можно написать на bash, на node, на perl, да на чем угодно! Просто добавьте свойство #! в начало файла, выполните chmod +x , получится так:

#!/bin/bash (cd site/main; browserify browser/main.js | uglifyjs -mc > static/bundle.js) (cd site/xyz; browserify browser.js > static/bundle.js) "build-js": "bin/build.sh" 

Если вам совершенно точно нужно собирать ваш проект на windows, просто удостоверьтесь, что у разработчиков, которые пользуются windows, есть копия msysgit, которая поставляется вместе с bash, cygwin или чем-то похожим. Или предложите им перейти на UNIX.

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

Вывод

Я надеюсь, что те примеры использования npm run , которые я описал здесь, помогут тем из вас, кто не был вдохновлен текущим состоянием дел в инструментах для сборки фронтенда, и особенно тем, кто, как и я, не проникся призывами этих инструментов. Я предпочитаю инструменты, пропитанные наследием UNIX, такие, как git, или npm, о котором я говорил здесь. Эти инструменты предоставляют быстрый и минималистичный интерфейс, с которым можно взаимодействовать через bash. Некоторые из этих штук не требуют долгих церемоний, или обсуждений. Можно зайти очень далеко, используя очень простые инструменты, которые делают очень обычные вещи.

Если вам не нравится стиль npm run , о котором я рассказал здесь, вы можете присмотреться к Мakefile, как к простой и проверенной временем альтернативе.

Инструменты сборки

Узнайте, как использовать встроенные скрипты npm в Bootstrap для создания документации, компиляции исходного кода, запуска тестов и многого другого.

Установка инструментария

Bootstrap использует сценарии npm для своей системы сборки. Наш package.json включает удобные методы для работы с фреймворком, включая компиляцию кода, запуск тестов и т.д.

Чтобы использовать нашу систему сборки и запускать нашу документацию локально, Вам понадобится копия исходных файлов Bootstrap и Node. Выполните следующие шаги, и Вы должны быть готовы к работе:

1. Загрузите и установите Node.js, который мы используем для управления нашими зависимостями.
2. Либо загрузите исходники Bootstrap либо форк репозитория Bootstrap.
3. Перейдите в корневой каталог /bootstrap и запустите npm install , для установки наших локальных зависимостей, перечисленных в package.json.

По завершении Вы сможете запускать различные команды из командной строки.

Использование скриптов NPM

Наш package.json включает следующие команды и задачи:

Задача	Описание
npm run dist	npm run dist создает каталог /dist/ со скомпилированными файлами. Использует Sass, Autoprefixer и terser.
npm test	Запускает тесты локально после запуска npm run dist
npm run docs-serve	Создает и запускает документацию локально.

Запустите npm run , чтобы увидеть все сценарии npm.

Начните работу с Bootstrap через npm с помощью нашего начального проекта! Перейдите в репозиторий шаблонов twbs/bootstrap-npm-starter, чтобы узнать, как создать и настроить Bootstrap в своем собственном проекте npm. Включает компилятор Sass, Autoprefixer, Stylelint, PurgeCSS и иконки Bootstrap.

Sass

Bootstrap v4 использует Node Sass для компиляции наших исходных файлов Sass в файлы CSS (включенные в наш процесс сборки). Чтобы получить тот же сгенерированный CSS при компиляции Sass с использованием Вашего собственного конвейера ресурсов, Вам необходимо использовать компилятор Sass, который поддерживает по крайней мере функции, которые делает Node Sass. Это важно отметить, поскольку с 26 октября 2020 года LibSass и пакеты, созданные на его основе, включая Node Sass, устарели.

Если Вам требуются новые функции Sass или совместимость с новыми стандартами CSS, Dart Sass теперь является основной реализацией Sass и поддерживает API JavaScript, полностью совместимый с Node Sass. (за некоторыми исключениями, перечисленными на странице GitHub Dart Sass).

Мы увеличиваем точность округления Sass до 6 (по умолчанию это 5 в Node Sass), чтобы предотвратить проблемы с округлением в браузере. Если Вы используете Dart Sass, Вам не нужно будет это настраивать, поскольку этот компилятор использует точность округления, равную 10, и по соображениям эффективности не позволяет ее настраивать.

Автопрефиксер

Bootstrap использует Автопрефиксер (включенный в наш процесс сборки) для автоматического добавления префиксов поставщиков к некоторым свойствам CSS во время сборки. Это экономит время и код, позволяя нам писать ключевые части нашего CSS за один раз, устраняя при этом необходимость в миксинах поставщиков, подобных тем, которые есть в v3.

Список браузеров, в которых есть поддержка автопрефиксера, здесь: .browserslistrc.

Локальная документация

Для локального запуска нашей документации требуется использование Hugo, который устанавливается через пакет npm hugo-bin. Hugo — это невероятно быстрый и достаточно расширяемый генератор статических сайтов, который предоставляет нам: базовые включения, файлы на основе Markdown, шаблоны и многое другое. Вот как это сделать:

1. Выполните настройку инструментов выше, чтобы установить все зависимости.
2. Из корневого каталога /bootstrap , запустите npm run docs-serve в командной строке.
3. Откройте http://localhost:9001/ в Вашем браузере и готово.

Узнайте больше об использовании Hugo, прочитав его документацию или перевод официальной документации.

Отслеживание багов

Если возникнут проблемы с установкой зависимостей, удалите все предыдущие версии зависимостей (глобальные и локальные). Тогда попробуйте снова npm install .

npm run build. Как правильно?

Есть проект create-react-build. После сборки webpack добавляет к src всех файлов стилей, js лишний слеш вначале (см. картинка). Когда я убираю этот слеш, приложение отображается корректно. Но не могу понять где может быть ошибка. Не охота вручную всегда их убирать.

Отслеживать
задан 8 ноя 2018 в 21:45
Dmitry Filippov Dmitry Filippov
623 4 4 серебряных знака 23 23 бронзовых знака

Ты посмотришь на это с другой стороны, если вместо того что бы открыть html как файл в браузере, открыть его на реальном веб-сервере

8 ноя 2018 в 23:20

@dev_null, на само деле, сайт тоже не обязан в корне находиться — может быть какой-то раздел сайта. Тут надо понимать, как и где оно будет разворачиваться.

9 ноя 2018 в 14:04
@Qwertiy обычно в этом разделе, и хранятся все ассеты. Прим. yii2
9 ноя 2018 в 14:05
Но вообще согласен, открывать сайт как файл — так себе идея.
9 ноя 2018 в 14:06

@dev_null, ну тут варианты есть. Вполне может быть желание при разворачивании на smth.com/some-app держать его статику внутри /some-app/static , а не мешать статику с десятка приложений в общий /static . Впрочем, тут опять нюанс, а может ли что-то вложенное открываться — относительный путь может и не быть решением.

Создаём новое 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.

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