![](https://habrastorage.org/getpro/habr/upload_files/f7a/6cf/21d/f7a6cf21d5a57ba0b4c5a7773f02c207.png)
Типичные имена скриптов в 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.