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

commented Jun 22, 2017

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

@mocon

This comment has been minimized.

Copy link

commented Sep 9, 2017

This was very helpful, thank you.

@kenshinji

This comment has been minimized.

Copy link

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

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

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

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

commented Mar 17, 2018

+1 thanks!

@elodieirdor

This comment has been minimized.

Copy link

commented Mar 22, 2018

Thank you so much!!

@devskope

This comment has been minimized.

Copy link

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.

@3DEsprit

This comment has been minimized.

Copy link

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.