How I Organize My NPM Scripts

Typical script names in package.json and how I run them

In web applications that I come across or write myself, there are usually several scripts to create and run the application. This article describes the scripts and how I run them every day.





  • Script names





  • Launch and testing





  • CI script 





  • Quick start





    • Stop dot





Script names #

, . , - 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.








All Articles