execute package.json script - npm

package.json:
"scripts": {
"start": "nodemon index.js",
"watch-sass": "sass --watch scss/styles.scss css/styles.css",
"test": "echo \"Error: no test specified\" && exit 1"
},
There is no problem when I execute npm-start but not npm watch-sass. I don't know what is wrong but the command is not recognized, I type sass --watch scss/styles.scss css/styles.css directly on the console and it works.

use
npm run watch-sass
The reason npm start works is because
npm test, npm start, npm restart, and npm stop are all aliases for npm run xxx. Because watch-sass does not fall in the defaults, it requires an explicit run in the statement
For more details visit: https://docs.npmjs.com/cli/run-script

Related

npm run: Executes another (incorrect) script

This is scripts section of my package.json:
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"compile-prebuild": "tsc -p prebuild-tsconfig.json --pretty",
"prebuild": "ts-node --project PreBuild/tsconfig.json PreBuild/prebuild.ts",
"testJs": "node test.js",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"extract-i18n": "ng xi18n Paradise --i18n-format=xlf2 --output-path=i18n --i18n-locale=en && ng run Paradise:xliffmerge"
},
The wonderful thing is when I try npm run build or npm run build -- --prod another script (prebuild) is executed:
> npm run build -- --prod
> project#0.1.1 prebuild ...
> ts-node --project PreBuild/tsconfig.json PreBuild/prebuild.ts
Now, if I rename prebuild script to pre-build (in package.json), everything is going to be alright:
> npm run build -- --prod
> project#0.1.1 build ...
> ng build "--prod"
...
Now, if I reverted to back, the problem appears again!
> npm -v
6.7.0
This is "correct", as it is the documented behaviour of npm - see here.
Additionally, arbitrary scripts can be executed by running npm run-script <stage>. Pre and post commands with matching names will be run for those as well (e.g. premyscript, myscript, postmyscript).
Generally, scripts can be prefixed with pre or post to do things before or after a script.
It is best to consider the prefixes pre and post as reserved when choosing npm script names (unless you intend them to always be run before or after the main task, of course).
The pre and post hooks run automatically by npm. If you have prebuild defined in your package.json, npm will run it automatically when you ask it to run build. Same goes for post hook as well.
You can check out the documentation here. https://docs.npmjs.com/misc/scripts

A customized npm script to compile, watch and server

I'm trying to set up a project which makes use of express and react. And I'm trying to make the best use of React-Slingshot project to benefit from it as much as possible. But the thing is that my project needs to be served (on the server side) by a script which I wrote. That script will use express and possibly socket.io to server the client side.
I think this is a problem if I use projects like React-Slingshot since they come with their own server scripts which support hot reloading and stuff. I'm willing to give up the fancy functionality like hot reloading. But I need to keep the --watch functionality so each time some file is changed, the code is compiled without me restarting the whole server.
Right now, the script section of package.json looks like this:
"scripts": {
"preinstall": "node tools/nodeVersionCheck.js",
"setup": "node tools/setup/setupMessage.js && npm install && node tools/setup/setup.js",
"remove-demo": "babel-node tools/removeDemo.js",
"start-message": "babel-node tools/startMessage.js",
"prestart": "npm run start-message",
"start": "concurrently -k -r -s first \"npm run test:watch\" \"npm run open:src\" \"npm run lint:watch\"",
"open:src": "babel-node tools/srcServer.js",
"open:dist": "babel-node tools/distServer.js",
"lint": "esw webpack.config.* src tools --color",
"lint:watch": "npm run lint -- --watch",
"clean-dist": "npm run remove-dist && mkdir dist",
"remove-dist": "rimraf ./dist",
"prebuild": "npm run clean-dist && npm run lint && npm run test",
"build": "babel-node tools/build.js && babel server -d dist --presets es2015,stage-2",
"test": "jest",
"test:CI": "babel-node tools/testCi.js",
"test:cover": "npm run test -- --coverage ",
"test:cover:CI": "npm run test:CI -- --coverage && cat ./coverage/lcov.info | node_modules/coveralls/bin/coveralls.js",
"test:watch": "jest --watch",
"open:cover": "npm run test:cover && opn ./coverage/lcov-report/index.html",
"analyze-bundle": "babel-node ./tools/analyzeBundle.js"
},
This is a modified version of what you can find in React-Slingshot. I've made a change so when I run npm run build, it builds the server code as well and terminates. It used to be like this:
"build": "babel-node tools/build.js && npm run open:dist",
Now, I'm trying to find a way to run my own server (i.e. node temp/server.js) while the rest of the code is compiled based on --watch as for my dev environment.
I believe you need a package like watch also check this video

npm scripts not running in series

I want to run eslint as a prestart script so if it fails it won't run the build script, but even when the eslint returns "clean" result it still stops the following scripts from running.
So as you can see in the example below, the testing is not running.
I've even tried to replace the order and run the test first, but then the lint script doesn't run.
Any ideas?
"scripts": {
"prestart": "npm run lint:watch && npm run test:watch",
"start": "open:src",
"open:src": "nodemon --watch server --exec babel-node --debug=5858 --inspect server/srcServer.js --delay 2",
"lint": "node_modules/.bin/esw webpack.config.* --cache --max-warnings 0 src server",
"lint:watch": "npm run lint -- --watch",
"test": "mocha --reporter progress server/testSetup.js 'src/**/*.test.js'",
"test:watch": "npm run test -- --watch"
},
Now I know how it feels to be dumb :)
The "watch" in the test and lint caused it to stop since it doesn't exit.
Thank me very much for solving my issue.

how to dynamically select package manager in package.json

I am currently using yarn as my package manager, but some people on my team may still use npm. I wrote a few scripts in package.json
"scripts": {
"clear": "rm -Rf app/javascripts/* & rm index.html",
"watch": "yarn clear | NODE_ENV=development webpack -w --env.dev",
"build": "yarn clear && yarn dev && yarn start",
"dev": "yarn clear | NODE_ENV=development webpack --env.dev",
"prod": "yarn clear | NODE_ENV=production webpack --progress --env.prod"
}
If I want to call clear inside of other scripts, I have to either use npm clear or yarn clear. As the script is currently written, someone who doesn't have yarn installed will run into an error.
Is there a way for me to write this package.json so that it will work regardless if someone runs npm build or yarn build, and it will use the package manager of their choosing?
You can use the variable npm_execpath, it will point to the package manager used to run the script.
For example, this will output the version of yarn or npm:
"scripts": {
"version": "$npm_execpath -v",
}
$ npm run version
> 3.10.10
$ yarn run version
> 0.21.3

integrate flow checking into react-slingshot

I have a project based on https://github.com/coryhouse/react-slingshot
I want to integrate flow into the npm start script so that upon running the start script it starts the flow server, by running flow command, and then runs the flow command on every *.js file change.
These are the scripts from package.json:
"prestart": "npm run remove-dist",
"start": "parallelshell \"npm run test:watch\" \"npm run open:src\"",
"open:src": "node tools/srcServer.js",
"open:dist": "node tools/distServer.js",
"lint": "eslint src",
"lint:watch": "watch 'npm run lint' src",
"clean-dist": "npm run remove-dist && mkdir dist",
"remove-dist": "node_modules/.bin/rimraf ./dist",
"build:html": "node tools/buildHtml.js",
"prebuild": "npm run clean-dist && npm run build:html",
"build": "npm run test && node tools/build.js && npm run open:dist",
"test": "cross-env NODE_ENV=test mocha --reporter progress --compilers js:babel/register --recursive \"./src/**/*.spec.js\"",
"test:watch": "npm run test -- --watch"
I have flow working independently. I can't figure out how to have the flow command run by the file watcher.
How can I do this?
watch 'flow check' src
Usage: watch <command> [...directory] [OPTIONS]
Read the docs here