Skip to content

Instantly share code, notes, and snippets.

@sam-artuso
Last active November 3, 2023 08:52
Show Gist options
  • Save sam-artuso/d39dc04650f9455e34549841a8270c82 to your computer and use it in GitHub Desktop.
Save sam-artuso/d39dc04650f9455e34549841a8270c82 to your computer and use it in GitHub Desktop.
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
Copy link

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

@mocon
Copy link

mocon commented Sep 9, 2017

This was very helpful, thank you.

@kenshinji
Copy link

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
Copy link

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
Copy link

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
Copy link

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
Copy link

tkshi commented Mar 17, 2018

+1 thanks!

@elodieirdor
Copy link

Thank you so much!!

@devskope
Copy link

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
Copy link

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
Copy link

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