So you want to use the new babel 7 with node? Our goal here will be to set up a minimal node application that is able to run locally and has a build command for remote deployment. Lets get started! There are a couple of differences with the babel you might be familiar with and v7. just like many other large organisations Babel has renamed it’s NPM packages. This means for example has been renamed to . Babels packages are now scoped babel-cli @babel/cli You can just use now and optionally define your requirements in the config file. No messing around with presets anymore. @babel/preset-env from the CLI to it’s own package: **babel-node** has been moved @babel/node Ok so we have the most important things down. You can optionally read more about the changes but here is what we need to do next: on babels website Setting up the application structure We’ll keep it as simple as possible: First you want to run to create a file inside the directory and depending on if you are using Git you might want to run npm init package.json git init We’ll set up two directories, one to develop in and one to deploy our compiled assets. your-project-directory|--dist|--src|--package.json For this example we’ll add just a simple file inside the src directory called server.js your-project-directory|--dist|--src|  |--server.js|--package.json We’ll need to add some babel packages to our project with . These respectively take care of babels general working, the usage of babel in the command line, the ability to use the newest JS features and the usage of babel with node. npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node For easy development we’ll also add the package using which reloads node for us automatically when one of our files is changed. nodemon npm install --save-dev Finally we just need to tell babel to use the package by creating a file in our project root: @babel/preset-env .babelrc // .babelrc{"presets": ["@babel/preset-env"]} Your project structure should now look like this: your-project-directory|--dist|--node_modules|--src|  |--server.js|--package.json|--.babelrc Adding scripts to package.json Now for the final step we’ll add our commands to the file. package.json Add as the script. This tells the nodemon package to watch for file changes, reload when it detects them and use babel-node to run the file . We’ll use this while developing locally. nodemon --exec babel-node src/server.js start src/server.js Add as the script. This tells babel to compile the files from the directory and place them in the directory. babel src --out-dir dist build src dist Add as the script. This enables us to run our compiled code on a server, the reason we are not just using for this is it uses quite a bit more memory than just using and adds some startup time to the process which is fine for some applications but can be a huge performance hit in others. node dist/server.js serve nodemon node Your should now probably look something like this: package.json {"name": "my-app","version": "1.0.0","description": "","main": "src/server.js","scripts": {"start": "nodemon --exec babel-node src/server.js","build": "babel src --out-dir dist","serve": "node dist/server.js"},"author": "","license": "ISC","dependencies": {},"devDependencies": {" ": "^7.0.0-rc.1"," ": "^7.0.0-rc.1"," ": "^7.0.0-rc.1"," ": "^7.0.0-rc.1","nodemon": "^1.18.3"}} @babel/cli @babel/core @babel/node @babel/preset-env Happy developing and good luck! If you have any questions or suggestions I’ll see you in the comments or alternatively you can hit me up . via twitter

Using babel 7 with node

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

A case against CSS frameworks

Babel: Your first code transformations

Configuring Your Phaser 3 Game With Webpack For Production

ELI5: Babel and the gang

How to Fetch Date with Promise.all and Async / Await

How to Setup Webpack and Babel 7 for React

A case against CSS frameworks

Babel: Your first code transformations

Configuring Your Phaser 3 Game With Webpack For Production

ELI5: Babel and the gang

How to Fetch Date with Promise.all and Async / Await

How to Setup Webpack and Babel 7 for React

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps