npm run start что это
Npm run start что это
Когда речь заходит о создании простого фронт-энд проекта, то как начать? Какие инструменты вам нужны? Я подозреваю, что у каждого будет свой ответ. Вы начинаете с каркаса (JS или CSS), или готового шаблона? Возможно, вы используете таск-менеджер для выполнения задач (например, Gulp) для организации потребностей вашего проекта. Или вы начинаете с простого HTML и CSS-файла?
Разнообразие инструментов может быть запутанным, а иногда и подавляющим. В этой серии статей я хочу помочь разработчикам разобраться в некоторых инструментах и методологиях, которые стали привычными для создания веб-проектов. В течение следующих трех статей мы построим вместе простой стартовый проект. Вот что вы изучите:
Не стесняйтесь пропускать те части, с которыми вы уже знакомы.
Зачем нужен репозиторий для стартового проекта?
В любом проекте вы, скорее всего, захотите иметь такие инструменты:
В более крупных проектах существует гораздо больше вариантов инструментов, которые мы могли бы добавить в набор, чтобы помочь нам создать эффективные и доступные веб-сайты. Возможно, нам понадобится упаковщик модулей, разделение кода и преобразование js кода (например из typescript в javascript). Что касается CSS, возможно, мы хотели бы подключить наши критически важные CSS или очистить неиспользуемые селекторы.
Все эти инструменты требует времени на установку и настройку, и делать это с нуля каждый раз, когда мы начинаем новый проект, было бы не лучшим решением. Вот почему полезно иметь стартовый репозиторий, который мы можем клонировать или скачать, со всеми необходимым и настроенными инструментами, чтобы сразу же начать кодирование.
Выбор инструментов
Я не тот человек, который любит проводить время, устанавливая и настривая сложные инструменты. Я хочу, чтобы установка инструментов требовала от меня как можно меньше времени, чтобы я мог сконцентрироваться на том, что я люблю делать! Хотя я использовал Gulp в прошлом, сейчас это кажется не такой необходимой частью инструментария: практически все зависимости можно установить через NPM и настроить их с помощью скриптов NPM не сложнее, чем настроить их с помощью Gulp. Поэтому использвание таск-менеджера кажется немного избыточным и только добавляет дополнительную зависимость к проекту.
Инструменты, которые я выбрал здесь, являются личными предпочтениями и подходят для тех проектов, которые я люблю создавать. Они не обязательно являются каким-то стандартом, и существует множество различных способов и других инструментов, для разработки фронтенда. Но я надеюсь, что это руководство поможет вам лучше познакомиться с некоторыми инструментами, которые стали популярными среди разработчиков, чтобы вы могли сделать свой собственный выбор.
Учитывая это, давайте начнем строить наш стартовый проект и узнаем об инструментах, которые мы будем использовать на этом пути. Не стесняйтесь пропускать любые темы, с которыми вы уже знакомы.
Установка Node.js
Самое первое, что нам нужно сделать, чтобы настроить наш проект на работу со скриптами в NPM, это убедиться, что у нас установлен Node.js глобально. Звучит достаточно просто, но уже сейчас все становится немного сложнее, когда мы понимаем, что существует ряд различных способов как это сделать:
При установке Node также устанавливается NPM (менеджер пакетов Node Package Manager). Это, по сути, огромная библиотека инструментов (или пакетов) разработки Javascript с открытым исходным кодом, которые может опубликовать любой желающий. Мы имеем прямой доступ к этой библиотеке инструментов и можем установить любой из них в нашем проекте.
NPM или Yarn?
Инициализация проекта
Этот файл содержит всю информацию о нашем проекте, и здесь мы можем редактировать детали, которые мы только что пропустили.
Структура проекта
Начнем со структуры папок, которая выглядит следующим образом:
Создание структуры папок из командной строки
Вы можете создать вышеуказанную структуру директорий вручную, либо в IDE, либо в файловой системе компьютера. Но если вы хотите сэкономить время, вы можете сделать это из терминала. В корне проекта вы можете запустить:
Построчно, этот код:
Теперь давайте добавим в наш файл index.html следующий код, чтобы мы могли видеть наш сайт в браузере:
Установка зависимостей
Теперь, когда у нас есть основная структура директорий, мы можем начать установку некоторых пакетов и написать скрипты NPM, которые позволят нам создавать и просматривать наш сайт. Скрипты, которые мы собираемся написать, будут:
После выполнения этой команды вы должны увидеть пару новых вещей:
Виды зависимостей
Кроме того мы установим Browsersync в качестве dev зависимости. Browsersync запустит локальный сервер и будет перезагружать браузер при изменении файлов.
Пишем сценарии NPM
Sass в CSS
Добавьте несколько стилей во вновь созданный файл, затем вернитесь в терминал и запустите выполните:
Автоматическая перезагрузка страниц
Сначала давайте напишем скрипт, запускающий сервер, который мы будем называть serve :
Отслеживание изменений
В настоящее время нам все еще нужно запустить наш scss скрипт, когда мы хотим скомпилировать наши Sass стили. Нам нужны наши скрипты, чтобы сделать это:
Мы можем написать скрипт NPM, который запускает другие сценарии. Давайте добавим скрипт, который следит за изменениями и запускает наш скрипт scss :
Комбинирование скриптов
Теперь нам нужно запустить две команды параллельно: Команду serve для запуска нашего сервера и команду watch:css для компиляции нашего Sass в CSS, которая вызовет перезагрузку страницы. Используя скрипты NPM, мы можем легко выполнять команды последовательно, используя оператор && :
Чтобы мы могли запускать команды параллельно, нам нужно установить другой пакет. NPM имеет несколько вариантов на выбор. Тот, который выбрал я npm-run-all :
Теперь мы можем установить некоторые пакеты и написать сценарии для автоматизации некоторых других задач, таких как оптимизация изображений, создание спрайтов SVG и минификации JS.
Это стартовый проект может отлично подойти для небольших проектов, но чем больше задач мы хотим выполнить, тем больше скриптов нам понадобится написать, и тем сложнее будет ими управлять. Итак, в следующей статье мы рассмотрим, как Parcel, упаковщик модулей, поможет автоматизировать многие из этих задач с минимальной конфигурацией, и предоставить инструменты, необходимые для построения больших проектов.
13 приёмов работы с npm, которые помогают экономить время
Каждый день миллионы разработчиков, создавая свои JavaScript-приложения, обращаются к npm (или к Yarn). Выполнение команд наподобие npm init или npx create-react-app стало привычным способом начала работы над практически любым JavaScript-проектом. Это может быть сервер, клиент, или даже настольное приложение.
Многие программисты пользуются npm ежедневно. Это значит, что в долгосрочной перспективе изменить что-то в лучшую сторону может даже небольшая экономия времени. Этот материал рассчитан, преимущественно, на начинающих разработчиков и на разработчиков среднего уровня. Однако даже если вы — профессионал, автор материала надеется, что вы сможете найти здесь пару интересных вещей, с которыми вы раньше не сталкивались.
Если вы совершенно не знакомы с npm — знайте, что интересующая нас программа устанавливается вместе с Node.js. Если вы работаете в Windows, то, чтобы воспроизвести кое-что из того, о чём здесь пойдёт речь, рекомендуется установить Git Bash.
1. Краткие варианты записи основных команд
Начнём с основ. Потратив немного времени на изучение сокращённых вариантов самых распространённых команд npm, вы сэкономите себе немало времени в будущем.
▍Краткие варианты записи менее распространённых команд
Вот ещё несколько полезных сокращений, которые, однако, используются не так широко как те, что мы только что рассмотрели.
▍Сокращение для корневой директории
2. Установка значений по умолчанию для npm init
Постоянно запуская команду npm init для создания нового проекта, вы скорее всего обнаружите, что снова и снова вводите в ответ на вопросы системы одни и те же данные. Например — вполне вероятно то, что именно вы являетесь автором большинства создаваемых вами проектов. Для того чтобы сэкономить время на вводе одних и тех же данных, вы можете установить собственные значения по умолчанию для соответствующих полей:
Для того чтобы вернуться к настройкам по умолчанию — можете воспользоваться следующим скриптом. Его первая строка удаляет из файла конфигурационные данные, а вторая заполняет его значениями по умолчанию.
Вышеприведённый скрипт сбрасывает значения по умолчанию для пользователя. Следующий скрипт сбрасывает к исходному состоянию глобальные значения по умолчанию:
3. Кросс-платформенные скрипты
Любой код, выполняемый в командной строке, может столкнуться с проблемами совместимости. Особенно это касается несовместимости между системами, основанными на Windows и на Unix (сюда входят Mac и Linux). Это — не проблема, если над неким проектом работаете вы и только вы. Но во многих случаях кросс-платформенная совместимость скриптов весьма важна. Например, работа независимо от операционной системы — это огромный плюс для любого опенсорсного, учебного или демонстрационного проекта.
Я обнаружил, что пакет cross-env — это самый удобный инструмент для достижения кросс-платформенной совместимости скриптов. Но вам полезно будет взглянуть ещё и на следующие два популярных инструмента, которые могут помочь в решении этой задачи:
4. Параллельный запуск скриптов
5. Запуск скриптов, находящихся в различных директориях
Для начала, можно воспользоваться командой cd для организации автоматического перехода в нужную директорию. Выглядеть это может примерно так:
6. Откладывание запуска скрипта до тех пор, пока не будет доступен некий ресурс
При разработке фулстек-приложений часто возникает нужда в том, чтобы запускать и клиентскую, и серверную часть приложения. Пакет wait-on позволяет обеспечить синхронизацию выполнения неких процессов. В нашем случае нужно, чтобы перед запуском клиентской части приложения был бы доступным определённый порт.
7. Вывод списка доступных скриптов и работа с ними
Но есть и ещё более удобный способ вывода списка скриптов. При его использовании нужный скрипт можно сразу же выбрать из списка и запустить. Для того чтобы воспользоваться этим способом работы со скриптами, нам понадобится глобально установить модуль ntl (Npm Task List):
Использование команды ntl
Эта возможность может оказаться очень кстати в том случае, если вы не знаете точно о том, какие скрипты есть в проекте. Хороша она и в тех случаях, когда программист хочет заменить ввод длинной команды для запуска скрипта на ввод короткой команды и быстрое нажатие ещё нескольких клавиш на клавиатуре.
8. Запуск pre-скриптов и post-скриптов
Это не только позволяет сделать код чище, но и способствует запуску pre- и post-скриптов в изоляции.
9. Управление версией приложения
В зависимости от того, как часто вы обновляете своё приложение, вы можете сэкономить время, задав автоматическое увеличение номера версии каждый раз, когда развёртываете новую версию приложения. Например — так:
10. Редактирование package.json из командной строки
11. Автоматизация настройки и открытия репозитория
12. Создание собственного скрипта, управляющего работой команды npm init
Каждый вопрос строится по следующему шаблону:
13. Отправка первого коммита в GitHub-репозиторий с помощью npm init
Кроме того, создадим вспомогательную функцию, которая выводит результаты работы нашей функции в консоль:
И, наконец, давайте создадим соответствующий prompt-блок для обработки URL GitHub-репозитория. Если URL имеется в распоряжении скрипта — мы создадим файл README.md и отправим в репозиторий первый коммит.
Настраивая процесс инициализации новых проектов, вы можете пойти и дальше. Например — сделать так, чтобы при создании проекта создавался бы и новый репозиторий для него.
Итоги
Уважаемые читатели! Автоматизируете ли вы работу с npm?
NPM. Package.json. Установка модулей. Определение команд¶
Кроме встроенных и кастомных модулей Node.js существует огромный пласт различных библиотек и фреймворков, разнообразных утилит, которые создаются сторонними производителями и которые также можно использовать в проекте, например, express, grunt, gulp и так далее. И они тоже нам доступны в рамках Node.js. Чтобы удобнее было работать со всеми сторонними решениями, они распространяются в виде пакетов. Пакет по сути представляет набор функциональностей.
Для автоматизации установки и обновления пакетов, как правило, применяются систему управления пакетами или менеджеры. Непосредственно в Node.js для этой цели используется пакетный менеджер NPM (Node Package Manager). NPM по умолчанию устанавливается вместе с Node.js, поэтому ничего доустанавливать не требуется. Но можно обновить установленную версию до самой последней. Для этого в командной строке/терминале надо запустить следующую команду:
Для нас менеджер npm важен в том плане, что с его помощью легко управлять пакетами. К примеру, создадим на жестком диске новую папку modulesapp (В моем случае папка будет находиться по пути C:\node\modulesapp ).
Далее определим файл простейшего сервера. Для этого в корневую папку проекта modulesapp добавим новый файл app.js :
Запустим сервер командой node app.js :
И в адресной строке браузера введем адрес http://localhost:3000/ :
Файл package.json¶
Теперь снова добавим express с помощью следующей команды:
Эта команда возьмет определение всех пакетов из секций dependencies и загрузит их в проект.
devDependencies¶
Удаление пакетов¶
Семантическое версионирование¶
Команды npm¶
NPM позволяет определять в файле package.json команды, которые выполняют определенные действия. Например, определим следующий файл app.js :
В данном случае мы получаем переданные при запуске приложению параметры.
И определим следующий файл package.json :
Например, для запуска команды start
Команды с остальными названия, как например, dev в вышеопределенном файле, запускаются так:
Например, последовательно выполним обе команды:
Node.js. Утилиты npm и npx
Утилита npm
Утилита npm — это менеджер пакетов, который входит в состав Node.js. Пакетом называется один или несколько js-файлов, представляющих собой какую-то библиотеку или инструмент. Менеджер пакетов предназначен для скачивания пакетов из облачного сервера, либо для загрузки (публикации) пакетов на этот сервер.
1. Инициализация проекта
Для создания нового проекта нужно создать директорию проекта, перейти в нее и выполнить команду
2. Файл package-lock.json
3. Установленные пакеты
Получить список всех установленных в директории проекта npm-пакетов можно с помощью команды
Получить список всех установленных глобально npm-пакетов (см.ниже) можно с помощью команды
4. Подробная информация о пакете
Посмотреть подробную информацию о пакете, доступного через npm-репозиторий
Получить информацию из npm-репозитория о последней доступной версии пакета
5. Локальная установка пакетов
Установить все пакеты из секций dependencies и devDependencies файла package.json :
Установить все пакеты из секции dependencies файла package.json (для production сервера)
Установить пакет package-name и добавить в секцию devDependencies файла package.json :
Установить пакет package-name и добавить в секцию dependencies файла package.json :
6. Локальное удаление пакетов
Удалить пакет package-name и удалить его из секции devDependencies файла package.json :
Удалить пакет package-name и удалить его из секции dependencies файла package.json :
7. Глобальная установка пакета
По умолчанию npm будет устанавливать все пакеты в локальной директории, в которым мы сейчас работаем (директория проекта). Если нужно, чтобы пакет был доступен всем приложениям, его нужно установить глобально. Но это не лучшее решение — разные проекты могут требовать разные версии одного пакета. Глобально установленный пакет будет нормально работать в одном проекте и вызывать ошибку в другом.
8. Глобальное удаление пакета
Так что если из-за глобально установки пакета возникли трудности — можно удалить его с помощью команды
9. Локальное обновление пакетов
Обновить один пакет или все пакеты проекта (нужно выполнять из директории проекта):
Чтобы узнать, вышли ли новые версии используемых в проекте пакетов
10. Как безопасно обновляться
Для того, чтобы обновиться до новых мажорных версий всех используемых пакетов, нужно глобально установить пакет
Теперь можно посмотреть, какие пакеты можно обновить (без внесения каких-либо изменений):
Убедившись, что обновление достаточно безопасно, можно выполнять следующую команду:
11. Глобальное обновление пакетов
Обновить один пакет или все пакеты, установленные глобально (можно выполнять из любого места):
12. Установка конкретной версии
Установка старой версии npm-пакета может понадобиться для решения проблем совместимости:
Узнать, какие версии некоего пакета имеются в npm-репозитории
13. Запуск скриптов
Запускать эти команды можно с помощью команды
14. Справка по менеджеру пакетов
У менеджера пакетов есть подробная справка по все командам
Для примера, посмотрим справку по команде install (в браузере)
Утилита npx
Существует множество утилит в виде пакетов (например, create-react-app ), которые изначально предполагалось устанавливать глобально. Запускать их из командной строки было очень просто — достаточно ввести имя утилиты в консоли. Однако мы уже знаем, что глобальная установка пакетов создает множество проблем.
Конечно, мы можем что-нибудь придумать, чтобы избежать проблем с глобальной установкой таких утилит. Например, установить пакет create-react-app глобально, запустить один раз из директории проекта, чтобы создать React-приложение — и сразу после этого удалить.
Если пакет cowsay не установлен глобально, подобная команда выдаст ошибку:
Утилита npx скачает пакет cowsay из npm-репозитория, установит во временную директорию и выполнит утилиту. Что важно — не загрязняя глобальное пространство. Так что при использовании npx необходимости в глобальной установке пакетов больше нет.
Difference between npm start and npm run start
But npm run eject worked? I’m confused on why npm eject didn’t work. Can I configure this?
Below is my package.json :
3 Answers 3
For all other scripts you define, you need to use the npm run xxx syntax.
One interesting thing to note is,
If the scripts object does not have a «start» property in package.json file, npm start or npm run start from command line will run node server.js by default.
But if the scripts object in package.json has «start» property, it overrides node server.js and executes the command in «start» property.
Not the answer you’re looking for? Browse other questions tagged npm or ask your own question.
Linked
Related
Hot Network Questions
Subscribe to RSS
To subscribe to this RSS feed, copy and paste this URL into your RSS reader.
site design / logo © 2021 Stack Exchange Inc; user contributions licensed under cc by-sa. rev 2021.12.16.41042
By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.