[Программирование] Как я организую свои скрипты NPM (перевод)
Автор
Сообщение
news_bot ®
Стаж: 6 лет 9 месяцев
Сообщений: 27286
Типичные имена скриптов в package.json и то, как я их запускаюВ веб-приложениях, с которыми я сталкиваюсь или пишу сам, обычно есть несколько скриптов для создания и запуска приложения. В этой статье описываются скрипты и то, как я запускаю их каждый день.
- Названия скриптов
- Запуск и тестирование
- CI-скрипт
- Быстрый запуск
- Стоп точка (Stop dot)
Имена скриптов #Обычно приложение нужно собрать, обслужить или запустить. Например, в веб-приложении bahmutov/cypress-example-forms у нас есть эти три скрипта на старте:
{
"scripts": {
"format": "prettier --write 'cypress/**/*.js'",
"start": "parcel serve index.html",
"build": "parcel build index.html"
}
}
Если вы находитесь в папке проекта, то сможете увидеть все доступные скрипты, выполнив команду npm run
$ npm run
Lifecycle scripts included in cypress-example-forms:
start
parcel serve index.html
available via `npm run-script`:
format
prettier --write 'cypress/**/*.js'
build
parcel build index.html
Если мы хотим отформатировать наш код, можно использовать
$ npm run-script format
У run-script есть псевдоним run, поэтому мы можем выполнять скрипты, просто запустив npm run <script name>:
$ npm run format
## the start command is special, you can skip the "run" word
$ npm start
При использовании Yarn мы обычно можем пропустить даже команду "run":
$ yarn run build
## is the same as
$ yarn build
Позже мы добавим сквозные тесты Cypress, и поэтому нам потребуется еще два скрипта для запуска Cypress в интерактивном режиме и на CI.
{
"scripts": {
"format": "prettier --write 'cypress/**/*.js'",
"start": "parcel serve index.html",
"build": "parcel build index.html",
"cy:open": "cypress open",
"cy:run": "cypress run"
}
}
Совет: для своих личных проектов я предпочитаю короткие имена сценариев "cy:open" и "cy:run". При совместном использовании проектов с другими людьми я предпочитаю очевидные имена сценариев "cypress:open" и "cypress:run".Посмотрите видео об организации скриптов ниже:Извините, данный ресурс не поддреживается. :( Запуск и тестирование #Сейчас для работы над тестами Cypress нам нужно запустить приложение, а затем с помощью второго терминала выполнить команду npm run cy:open. Когда мы закончим тестирование, мы закроем Cypress Test Runner, переключимся обратно на первый терминал и остановим приложение.Мы можем сделать все это с помощью одной команды, используя утилиту start-server-and-test. Установите ее как dev-зависимость с помощью npm i -D start-server-and-test или yarn add -D start-server-and-test, а затем добавьте новый скрипт. Например, я хочу разработать приложение, что означает запустить его и запустить Cypress. Таким образом, я добавлю скрипт dev:
{
"scripts": {
"format": "prettier --write 'cypress/**/*.js'",
"start": "parcel serve index.html",
"build": "parcel build index.html",
"cy:open": "cypress open",
"cy:run": "cypress run",
"dev": "start-test-and-test start 1234 cy:open"
}
}
Поэтому я могу просто использовать npm run dev для локальной разработки. Сам скрипт ссылается на другие скрипты NPM: он запускает npm start в фоновом режиме для запуска приложения. 1234 в скрипте означает номер порта - утилита start-server-and-test ожидает ответа от этого локального порта. Как только localhost:1234 отвечает, она запускает npm run cy:open. Когда я закрываю Cypress, утилита автоматически останавливает мое приложение.Утилита регистрирует в папке node_modules/.bin: два псевдонима start-test-and-test и start-test. Таким образом, я могу использовать более короткие имена команд:
"dev": "start-test start 1234 cy:open"
Поскольку команда npm start является очень распространенной, start-test понимает, что она может применяться по умолчанию, поэтому мы можем ее пропустить:
"dev": "start-test 1234 cy:open"
Совет: по поводу всех опций обратитесь к README start-server-and-test.Если имя скрипта dev недоступно, я использую что-то вроде e2e. Например, Next.js обычно устанавливает скрипт dev для запуска команды next , поэтому мои скрипты в bahmutov/next-and-cypress-example используют e2e:
{
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start",
"e2e": "start-test dev 3000 cy:open",
"cy:open": "cypress open",
"pree2e": "rm -rf .nyc_output coverage .next || true",
"check-coverage-limits": "check-total --min 100"
}
}
Скрипт CI #Иногда мы хотим просто запустить все тесты, не открывая Cypress. Поэтому обычно у меня второй скрипт используется для выполнения cy:run через npm test или npm t:
{
"scripts": {
"format": "prettier --write 'cypress/**/*.js'",
"start": "parcel serve index.html",
"build": "parcel build index.html",
"cy:open": "cypress open",
"cy:run": "cypress run",
"dev": "start-test 1234 cy:open",
"test": "start-test 1234 cy:run"
}
}
Всякий раз, когда мы клонируем проект, то можем инсталлировать и протестировать его:
npm it
## equivalent to
npm install
npm test
Мы можем использовать файл package-lock.json при инсталляции
npm cit
## equivalent to
npm ci
npm test
Посмотрите "запуск сервера и тестирование" в действии на этом видео.Извините, данный ресурс не поддреживается. :( Быстрый запуск #Для больших проектов количество скриптов растет, а средняя длина имени скрипта приближается к названию исландского вулкана. Иногда мы получаем вариации скрипта cypress run: один для записи результатов тестирования, другой для запуска в браузере Chrome и т.д.
{
"scripts": {
"format": "prettier --write 'cypress/**/*.js'",
"start": "parcel serve index.html",
"build": "parcel build index.html",
"cy:open": "cypress open",
"cy:run": "cypress run",
"cy:run:record": "cypress run --record",
"cy:run:chrome": "cypress run --browser chrome",
"cy:run:record:chrome": "cypress run --record --browser chrome",
"dev": "start-test 1234 cy:open",
"test": "start-test 1234 cy:run"
}
}
Для быстрого запуска нужного скрипта я предлагаю использовать мою утилиту npm-quick-run. Инсталлируйте ее глобально с помощью npm i -g npm-quick-run, а затем используйте nr alias для быстрого запуска скрипта по его префиксу:
nr d
## same as
npm run dev
Если существует несколько скриптов, начинающихся с заданного префикса, npm-quick-run покажет их списком и завершит работу.
$ nr cy
running command with prefix "cy"
Several scripts start with "cy"
cy:open, cy:run, cy:run:record, cy:run:chrome, cy:run:record:chrome
Обратите внимание, что в наших скриптах используется несколько слов, разделенных символом : (знак - тоже подходит). Можно задать префикс для нескольких слов, чтобы найти нужный скрипт. Используйте : или - при вызове nr. Я лично предпочитаю использовать -, так как могу набрать его без нажатия клавиши Shift.Для примера, давайте откроем Cypress
$ nr c-o
## finds the script "cy:open" and runs it
Давайте запустим тесты в Chrome
$ nr c-r-c
## finds the script "cy:run:chrome" and runs it
Утилита npm-quick-run также передает аргументы найденному скрипту. Например, мы можем сохранить наш оригинальный скрипт cypress run и просто передавать CLI-аргументы, когда это необходимо:
{
"scripts": {
"format": "prettier --write 'cypress/**/*.js'",
"start": "parcel serve index.html",
"build": "parcel build index.html",
"cy:open": "cypress open",
"cy:run": "cypress run",
"dev": "start-test 1234 cy:open",
"test": "start-test 1234 cy:run"
}
}
## record tests
nr c-r --record
## record tests in Chrome
nr c-r --record --browser chrome
Посмотрите быстрый запуск NPM в действии на видео нижеИзвините, данный ресурс не поддреживается. :( Стоп точка (Stop dot)В npm-quick-run есть небольшая утилита для работы с определенным количеством слов. Если вы поместите символ точки . в конце префикса, то он будет соответствовать только этому количеству слов. Рассмотрим следующий файл package.json:
{
"scripts": {
"cypress": "cypress -help",
"cypress:open": "cypress open",
"cypress:run": "cypress run",
"cypress:run:record": "cypress run --record"
}
}
Для запуска скрипта "cypress" используйте префикс с "." в конце:
# same as "npm run cypress"
$ nr c. # finds the script with a single word starting with "c"
# same as "npm run cypress:open"
$ nr c-o.
# same as "npm run cypress:run"
$ nr c-r.
# these commands are equivalent
$ npm run cypress:run:record
$ yarn cypress:run:record
$ nr c-r-r
$ nr c-r-r.
Почему я обычно использую символы - и . для разделения слов и прерывания их совпадения? Потому что я могу набирать их без нажатия клавиши Shift.
Перевод статьи подготовлен в рамках курса "Node.js Developer". Всех желающих приглашаем на открытый демо-урок «TypeScript в Node.js для server-side приложений». На занятии рассмотрим:
- как использовать TypeScript в Node.js;
- как работает ts-node и другие технологии;
- движок deno — новый Node.js с TypeScript.
===========
Источник:
habr.com
===========
===========
Автор оригинала: Gleb Bahmutov
===========Похожие новости:
- [Программирование, Искусственный интеллект, IT-компании] Microsoft разработала ИИ-систему, преобразующую простые текстовые запросы в код
- [Google Chrome, API, Программирование микроконтроллеров] WebUSB. Прошейся из браузера
- [Информационная безопасность, Python, Программирование, Алгоритмы] Реализация алгоритмов хеширования семейства SHA-2
- [Системное администрирование, Oracle, Программирование, *nix] Актуальность инициативы #BAAG — BattleAgainstAnyGuess
- [Ruby, Python, Программирование, Будущее здесь] Почему за интерпретируемыми языками будущее
- [C++, Программирование микроконтроллеров] Stm32 + USB на шаблонах C++. Продолжение. Делаем CDC
- [JavaScript, Программирование, Алгоритмы, Функциональное программирование] Решаем вопрос сортировки в JavaScript раз и навсегда
- [Программирование, Карьера в IT-индустрии, История IT] Последние четверть века развития в программировании нет
- [Habr, Программирование, Разработка игр, C#, Unity] Как обновить все сцены Unity-проекта в один клик
- [Разработка веб-сайтов, TypeScript, Лайфхаки для гиков] Карманная книга по TypeScript. Часть 2. Типы на каждый день (перевод)
Теги для поиска: #_programmirovanie (Программирование), #_nodejs, #_npm_scripts, #_json, #_serverside, #_typescript, #_blog_kompanii_otus (
Блог компании OTUS
), #_programmirovanie (
Программирование
)
Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Текущее время: 22-Ноя 12:53
Часовой пояс: UTC + 5
| Автор | Сообщение |
|---|---|
|
news_bot ®
Стаж: 6 лет 9 месяцев |
|
 Типичные имена скриптов в package.json и то, как я их запускаюВ веб-приложениях, с которыми я сталкиваюсь или пишу сам, обычно есть несколько скриптов для создания и запуска приложения. В этой статье описываются скрипты и то, как я запускаю их каждый день.
{
"scripts": { "format": "prettier --write 'cypress/**/*.js'", "start": "parcel serve index.html", "build": "parcel build index.html" } } $ npm run
Lifecycle scripts included in cypress-example-forms: start parcel serve index.html available via `npm run-script`: format prettier --write 'cypress/**/*.js' build parcel build index.html $ npm run-script format
$ npm run format
## the start command is special, you can skip the "run" word $ npm start $ yarn run build
## is the same as $ yarn build {
"scripts": { "format": "prettier --write 'cypress/**/*.js'", "start": "parcel serve index.html", "build": "parcel build index.html", "cy:open": "cypress open", "cy:run": "cypress run" } } {
"scripts": { "format": "prettier --write 'cypress/**/*.js'", "start": "parcel serve index.html", "build": "parcel build index.html", "cy:open": "cypress open", "cy:run": "cypress run", "dev": "start-test-and-test start 1234 cy:open" } } "dev": "start-test start 1234 cy:open"
"dev": "start-test 1234 cy:open"
{
"scripts": { "dev": "next", "build": "next build", "start": "next start", "e2e": "start-test dev 3000 cy:open", "cy:open": "cypress open", "pree2e": "rm -rf .nyc_output coverage .next || true", "check-coverage-limits": "check-total --min 100" } } {
"scripts": { "format": "prettier --write 'cypress/**/*.js'", "start": "parcel serve index.html", "build": "parcel build index.html", "cy:open": "cypress open", "cy:run": "cypress run", "dev": "start-test 1234 cy:open", "test": "start-test 1234 cy:run" } } npm it
## equivalent to npm install npm test npm cit
## equivalent to npm ci npm test {
"scripts": { "format": "prettier --write 'cypress/**/*.js'", "start": "parcel serve index.html", "build": "parcel build index.html", "cy:open": "cypress open", "cy:run": "cypress run", "cy:run:record": "cypress run --record", "cy:run:chrome": "cypress run --browser chrome", "cy:run:record:chrome": "cypress run --record --browser chrome", "dev": "start-test 1234 cy:open", "test": "start-test 1234 cy:run" } } nr d
## same as npm run dev $ nr cy
running command with prefix "cy" Several scripts start with "cy" cy:open, cy:run, cy:run:record, cy:run:chrome, cy:run:record:chrome $ nr c-o
## finds the script "cy:open" and runs it $ nr c-r-c
## finds the script "cy:run:chrome" and runs it {
"scripts": { "format": "prettier --write 'cypress/**/*.js'", "start": "parcel serve index.html", "build": "parcel build index.html", "cy:open": "cypress open", "cy:run": "cypress run", "dev": "start-test 1234 cy:open", "test": "start-test 1234 cy:run" } } ## record tests
nr c-r --record ## record tests in Chrome nr c-r --record --browser chrome {
"scripts": { "cypress": "cypress -help", "cypress:open": "cypress open", "cypress:run": "cypress run", "cypress:run:record": "cypress run --record" } } # same as "npm run cypress"
$ nr c. # finds the script with a single word starting with "c" # same as "npm run cypress:open" $ nr c-o. # same as "npm run cypress:run" $ nr c-r. # these commands are equivalent $ npm run cypress:run:record $ yarn cypress:run:record $ nr c-r-r $ nr c-r-r. Перевод статьи подготовлен в рамках курса "Node.js Developer". Всех желающих приглашаем на открытый демо-урок «TypeScript в Node.js для server-side приложений». На занятии рассмотрим:
- как использовать TypeScript в Node.js; - как работает ts-node и другие технологии; - движок deno — новый Node.js с TypeScript. =========== Источник: habr.com =========== =========== Автор оригинала: Gleb Bahmutov ===========Похожие новости:
Блог компании OTUS ), #_programmirovanie ( Программирование ) |
|
Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Текущее время: 22-Ноя 12:53
Часовой пояс: UTC + 5