10

In my package.json I have a start-script which I'm using for my dev enviroment. It looks like this:

"scripts": {
    "dev": "NODE_PATH=src nodemon --watch src/ --exec babel-node src/app.js"
}

When I'm hitting npm run dev everything works fine and babel is transpiling everything as it should and nodemon starts watching. I see this:

[nodemon] 1.11.0
[nodemon] to restart at any time, enter `rs`
[nodemon] watching: /Users/Jonathan/Documents/swissnet/src/**/*
[nodemon] starting `babel-node src/app.js`

When I'm saving files within the src/-folder nodemon will restart the server. But here's my issue, It restarts 2-3 times... Everytime I save a file it looks like this:

[nodemon] restarting due to changes...
[nodemon] starting `babel-node src/app.js`
[nodemon] restarting due to changes...
[nodemon] starting `babel-node src/app.js`
[nodemon] restarting due to changes...
[nodemon] starting `babel-node src/app.js`

If I enter "rs" then nodemon restarts, once, as expected.

I have no idea how to solve this, or even where to search for answers. I've tried to google it. I've been visiting the bug section of the package on github... (Maybe I just suck at googling).
Here's the only link I've found for the same issue, but it doesn't seem to have an answer: Nodemon runs multiple times on save when using babel.
I tried his script anyway NODE_PATH=src nodemon src --exec babel -w src/ --out-dir build/ --source-maps but the same thing happened, restarting twice or thrice.

Like @Connorelsea said in the comment section of the answer provided in the link above, if I add --delay 2.5 it restart only once.

I'm thinking maybe when I hit save in a watched file, nodemon restarts instantly and babel start transpiling. When babel is done it saves a bunch om transpiled files and nodemon restarts once again since changes to the src/-folder was made. But I have no idea how to debug this.

Hope you guys can help me!

**** EDIT ****

Just found this https://github.com/remy/nodemon/issues/508 but the only solutions they have is to "upgrade nodemon". I do have the latest which is 1.11.0 at this time.

Community
  • 1
  • 1
Jonathan Nielsen
  • 1,442
  • 1
  • 17
  • 31

6 Answers6

15

So, now a couple of months later i figured out what's wrong. Seems like the server simply restarts once when I save and the once again when babel transformed the code a couple of seconds later since the files get updated. So it was the package babel-node that was giving me this unwanted behaviour. It works with a nodemon delay of 2 seconds --delay 2 or more.

Jonathan Nielsen
  • 1,442
  • 1
  • 17
  • 31
6

You should use babel-node as an executor like this:

nodemon ./index.js --exec babel-node
chuyik
  • 908
  • 8
  • 12
5

So in case someone stumbles on this like I did.

While the delay works, it works because your build takes less than 2s usually.

This can lead to it being flakey, or just take longer than it needs.

The correct solution is to actually ignore the output directory, or file within nodemon.

NODE_PATH=src nodemon --watch src/ --exec babel-node src/app.js --out-file dist/app.js -- dist/app.js

Amos47
  • 695
  • 6
  • 15
2

At first I was loading a first babel build, then launch in parallel a babel watch with --skip-initial-build option enabled and nodemon,

But finally, the better workaround I found is to make my own babel watcher which have theses advantages:

  • take into account deletion and others events, keeping everything synced

  • allowing me to add @compileDependencies annotation system (see https://github.com/kentcdodds/babel-plugin-preval/issues/19)

  • fix a bug of watching that was caused by awaitWriteFinish option of chokidar used in official @babel/cli watcher (with my favorite editor, geany, when I save a file, it write a temp file first, and then move it to dest, and I don't know why but sometimes the recompile watching was just lost and never fired again until I restart babel watch)

here is the link: https://github.com/di-ninja/babel-watch-extra

DevTheJo
  • 2,179
  • 2
  • 21
  • 25
2

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.

Konstantin Tarkus
  • 37,618
  • 14
  • 135
  • 121
1

I was able to get it by adding --watch like this. 

"scripts": {
    "build": "babel server.js --watch -d dist",
    "start": "npm run build && node dist/server.js"
  },

see docs: https://babeljs.io/docs/en/babel-cli

Deke
  • 4,451
  • 4
  • 44
  • 65