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" 
      }
    }]
  ]
}
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.