CODEWITHSUNDEEP
javascriptnode.jsnpmnodemonbabeljs
Connorelsea
Connorelsea

Reputation: 2438

How to use nodemon in npm scripts to build and start scripts?

"scripts": {
  "build": "babel src -d lib",
  "start": "node --use_strict ./lib/index.js",
  "watch": "nodemon lib/index.js --exec npm run build"
}

Using the command npm run watch results in the following wrong command being run: [nodemon] starting "npm lib/index.js run build"

How would I write a nodemon command that, on reload, transpiles the code using babel and reloads the code?

Upvotes: 14

Views: 29821

Answers (6)

DJH
DJH

Reputation: 21

A better option would be to not use a global install but instead use the package installed locally. This will also help for automation builds that might be setup the same as your local machine per 12 factor app design.

"scripts": {
"watch": "node ./node_modules/nodemon/bin/nodemon.js"
 }

Upvotes: 1

fishstick
fishstick

Reputation: 2274

  "scripts": {
    "build": "babel src -d lib",
    "start": "node --use_strict ./lib/index.js",
    "watch": "nodemon --exec \"npm run build && node lib/index.js\" -e js --ignore lib/"
  }

Then run npm run watch. After this, nodemon will rebuild the project and then restart the server every time source code(.js files) is modified.

--exec specifies what non-node scripts (also works for node scripts as above node lib/index.js) you want nodemon to execute when there is a file change.

-e specifies what file extensions you want nodemon to watch.

--ignore specifies the files/directories you want nodemon to ignore. This option is essential to solve this problem because if you do not specify to ignore this lib/ folder, nodemon will restart infinitely as the compiled files in lib/ are also .js files.

Upvotes: 14

Konstantin Tarkus
Konstantin Tarkus

Reputation: 38358

There is an option to build files with Babel in "watch" mode, let Nodemon monitor just the "build" folder and restart the app upon changes to the compiled output.

{
  "name": "app",
  "version": "1.0.0",
  "private": true,
  "dependencies": {},
  "devDependencies": {
    "@babel/cli": "^7.6.0",
    "@babel/core": "^7.6.0",
    "@babel/preset-env": "^7.6.0",
    "nodemon": "^1.19.2"
  },
  "scripts": {
    "build": "babel src --out-dir build --source-maps=inline --verbose",
    "start": "yarn build --watch & sleep 1 && nodemon --watch build build/index.js"
  }
}

enter image description here

This example is taken from GraphQL API Examples repository on GitHub.

Upvotes: 2

gianmarco
gianmarco

Reputation: 31

"scripts": {
  "build": "babel src -d lib",
  "start": "nodemon --exec babel-node lib/index.js",
  "serve": "npm run build && node lib/index.js"
}

Serve is for production, with npm start what you do is transpile first and then run nodemon.

Upvotes: 1

David Mold
David Mold

Reputation: 317

You can have two nodemons, one to transpile and the other to run your code. In package.json you can do something like this:

"scripts": {
    "serve": "nodemon --watch dist/ ./dist/index.js",
    "build" : "nodemon --watch src/ --exec babel ./src --out-dir ./dist --source-maps --copy-files"
  },

Upvotes: 3

Роман Парадеев
Роман Парадеев

Reputation: 4266

You could simply run your code with babel-node to avoid explicit transpiling.

$ nodemon lib/index.js --exec babel-node --presets=es2015,stage-2

It seems like this is the recommended way to use nodemon with babel.

Please note, running --exec could have unintended side effects when running your development environment remotely of your localhost

Upvotes: 8

Related Questions