How configure node.js app with es6 support and server reload on file change.
I.Configuration steps ( creating project from the scratch ):
1.Go in terminal to Your project main directory
npm init
//create package.json for project
2.Install dependencies
npm install --save-dev babel
npm install --save-dev babel-cli
npm install --save-dev babel-preset-es2015
npm install --save-dev babel-preset-stage-0 //*1
npm install --save-dev nodemon
1 - it can be also stage-1 or 2, it depends what features of es We want to use
3.We should have in package.json file something like that ( for sure package version will be different but it is ok ):
"devDependencies": {
"babel": "^6.5.2",
"babel-cli": "^6.16.0",
"babel-preset-es2015": "^6.16.0",
"babel-preset-stage-0": "^6.16.0",
"nodemon": "^1.11.0"
}
4.Create .babelrc file in root project directory ( there is package.json file )
{
"presets": ["es2015", "stage-0"]
}
5.Create two directories:
src - here is working directory with files writen in es6
dist - here files will compile to es5 using babel
Your project root directory should look like this:
- project
- src
- index.js //main project file
- dist
- package.json
- .babelrc
7.Add to package.json needed commands:
"scripts": {
"watch": "babel -w src/ -d dist/",
"build": "babel src/ -d dist/",
"serve": "babel -w src/ -d dist/ | nodemon --watch dist",
"test": "echo \"Error: no test specified\" && exit 1"
}
8.Available commands:
npm run watch
//starts watch watch changes in src directory and compiles in to dist
npm run build
//compiles files from src directory to dist
npm run serve
//it is doing watch + start node server, on every file change it will restart node server using nodemon which is watching dist directory changes
9.Final notes
- Server will run dist/index.js file as main file.
- File dist/index.js will be compiled from src/index.js so there should be main file of project.
- dist directory should be added to ignore by git ( but not ignore it for npm if it will be a node package )
10.Run server and start creating app in src directory.
npm run serve
II. Easier way ( ready to use boilerplate )
If it is too many points for You then full woking boilerplate is available on github - https://github.com/maciejsikora/node-express-babel-boilerplate.
babel-node
? babeljs.io/docs/usage/cli/#babel-node – Ossuary