Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Setting up Babel and nodemon

Setting up Babel and nodemon

Inital set-up

Set up project:

mkdir project
cd project
npm init -y

Install dev dependencies:

npm i --save-dev babel-cli babel-preset-latest nodemon

Configure Babel by adding the lines below to package.json:

"babel": {
  "presets": [
    "latest"
  ]
},

Scripts

Add some convenience scripts to package.json:

"scripts": {
  "babel-node": "babel-node --presets=latest",
  "start": "nodemon --exec npm run babel-node -- ./index.js",
  "build": "babel src -d dist"
},

To start the Node.js REPL:

npm run babel-node

To start the app in development mode (letting Babel interpret ES6 code):

npm start

To build the ES5 code in the build directory from the ES6 code in the src directory:

npm build

Adding in Mocha and chai

npm install --save-dev mocha chai

Add this line to the scripts section in package.json:

"scripts": {
  ...
  "mocha": "mocha --compilers js:babel-register",
  "test": "mocha --compilers js:babel-register --recursive ./test/"
}

Create a new directory called test:

mkdir test

Minimal test (to save e.g. as test/test.js):

'use strict'

import { expect } from 'chai'

describe('test', function () {
  it('should pass', function () {
    expect('string').to.be.a('string')
  })
})
@Rayraegah

This comment has been minimized.

Copy link

@Rayraegah Rayraegah commented Jun 22, 2017

babel-preset-latest is now deprecated. Use "presets": ["env"] instead.

@mocon

This comment has been minimized.

Copy link

@mocon mocon commented Sep 9, 2017

This was very helpful, thank you.

@kenshinji

This comment has been minimized.

Copy link

@kenshinji kenshinji commented Sep 16, 2017

Since you've included babel-node in the script section, which means that it is under the premise of global installation of babel-node, right?

@Macil

This comment has been minimized.

Copy link

@Macil Macil commented Oct 16, 2017

When the scripts section is run, npm puts node_modules/.bin into the PATH environment variable so that executables from any dependencies can be used easily. (nodemon is being executed in the same way.)

@yicone

This comment has been minimized.

Copy link

@yicone yicone commented Dec 26, 2017

From npm@5.2.0, npm ships with npx package which lets you run commands from a local node_modules/.bin or from a central cache.

Simply config:

"scripts": {
  "start": "nodemon --exec npx babel-node -- ./index.js"
}
@dcDalin

This comment has been minimized.

Copy link

@dcDalin dcDalin commented Jan 23, 2018

Install dev dependencies:

npm i --save-dev babel-cli babel-preset-env nodemon

Configure Babel by adding the lines below to package.json:

"babel": {
"presets": [
"env"
]
},

Scripts
Add some convenience scripts to package.json:

"scripts": {
"babel-node": "babel-node --presets=env",
"start": "nodemon --exec npm run babel-node -- ./index.js",
"build": "babel src -d dist"
},

@tkshi

This comment has been minimized.

Copy link

@tkshi tkshi commented Mar 17, 2018

+1 thanks!

@elodieirdor

This comment has been minimized.

Copy link

@elodieirdor elodieirdor commented Mar 22, 2018

Thank you so much!!

@devskope

This comment has been minimized.

Copy link

@devskope devskope commented Sep 2, 2018

I believe the start scripts: "start": "nodemon --exec npm run babel-node -- ./index.js" or "start": "nodemon --exec npx babel-node -- ./index.js" can be replaced with "devstart": "nodemon index --exec babel-node", making it more semantically expressive as nodemon is usually, if not always, a devDependency.

@MutableLoss

This comment has been minimized.

Copy link

@MutableLoss MutableLoss commented Oct 28, 2018

Just for the sake of keeping this up to date (thanks for the nodemon setup), heres what you need to change for babel 7:

yarn add @babel/preset-env @babel/node @babel/cli @babel/register

and scripts:

"babel:node": "./node_modules/.bin/babel-node --presets=@babel/env",
"dev": "nodemon --exec npm run babel:node -- ./src/index.js",
"test": "mocha ./spec/**/*.spec.js -r @babel/register --opts spec/mocha.opts"

and of course for the setting changes, the babelrc:

{
  "presets": [
    ["@babel/preset-env", {
      "targets": { 
        "node": "current" 
      }
    }]
  ]
}
@swaghacker

This comment has been minimized.

Copy link

@swaghacker swaghacker commented Jan 8, 2021

Getting error in windows
[nodemon] 2.0.7
[nodemon] to restart at any time, enter rs
[nodemon] watching path(s): backend***
[nodemon] watching extensions: js,mjs,json
[nodemon] starting backend-node backend/server.js
'backend-node' is not recognized as an internal or external command,
operable program or batch file.
[nodemon] app crashed - waiting for file changes before starting...

please help me to solve this issue i have tried all above recommended task

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.