The public,

Today I’ll show you how to use Babel in a Node.js project.

As we learned in the previous “step-by-step” series on configuring Babel, Babel degrades new language features, converts them into syntax supported by the target environment, and adds polyfills to APIs that are not supported by the target environment. The target environment mentioned in this article is specific to the browser, so how can the Node environment be used?

Next, we’ll create a simple server using KOA, and then walk through integrating Babel step by step.

Create a Node project

First, create a folder for the Node project and enter it

mkdir babel-node-example 
cd babel-node-example

Initialize the project

npm init

We use KOA to create a simple service, and we need to install the KOA dependency

 npm install koa --save

After the installation, create a SRC folder, go to SRC folder, and add index.js file

mkdir src && cd "$_"  && touch index.js

A simple KOA service is created by importing the KOA via require

Koa const Koa = require(' Koa ') import Koa from "Koa" const app = new Koa() // PORT const PORT = 3000 app.use(async (ctx, next) => { ctx.body = { code: 0, message: "success", data: {}} next()}) app.listen(PORT, () => {console.log(' Server is listening ${PORT}, http://localhost:${PORT} ')})

Add the following command in package.json script

 {
    "start": "node ./src/index.js"
 }

Then execute NPM run start under the project root directory

> $NPM run Babel :demo > node./ SRC/Babel /index.js Server is listening 3000, http://localhost:3000

Then open http://localhost:3000/ and we get the following result

{
  code: 0,
  message: "success",
  data: { }
}

Okay, this all seems perfect, but what if I replaced const Koa = require(‘ Koa ‘) with import Koa from “Koa”?

// Const Koa = require(' Koa ') import Koa from "Koa" const app = new Koa() // Const Port = 3000 App.use (async (CTX,)) next) => { ctx.body = { code: 0, message: "success", data: {}} next()}) app.listen(PORT, () => {console.log(' Server is listening ${PORT}, http://localhost:${PORT} ')})

Re-execute NPM run start to take a look at the console output

SyntaxError: Cannot use import statement outside a module

The reason is that you cannot use import. What if you want to use import? Then you need @babel/node.

@babel/node

Next, walk you step-by-step through how to integrate @babel/node.

Install Babel dependencies

 npm install -D @babel/core @babel/cli @babel/preset-env 
 npm install -D @babel/node
  • @babel/core is the core of Bable’s transcoding, and @babel/cli and @babel/node all depend on it
  • @babel/cli is a built-in cli that compiles files from the command line
  • @babel/preset-env is a preset set that allows you to use the latest JavaScript and degrades code based on the target environment (see “How to configure Babel(3) — Patching in a real project” for more details).
  • @babel/node is the same CLI as the Node.js CLI. It is compiled using the Babel presets and plugins before running. It takes up a lot of memory when running and is not officially recommended for production use

Configure the.babelrc file

{
  "presets": [
    "@babel/preset-env"
  ]
}

Modify the script start command in package.json

{
     "start": "babel-node ./src/index.js"
}

And then I’m going to run NPM run start and the console won’t say anything wrong.

Now let’s add a little bit of knowledge about Nodemon

nodemon

Nodemon monitors any changes in the Node.js application and automatically restarts the service, making it ideal for use in a development environment

Nodemon simply wraps your Node application and monitors any files that have changed. Nodemon is simply a replacement package for Node and simply replaces the Node on the command line when the script is run.

The installation

# NPM install --save-dev nodemon # NPM install --save-dev nodemon

Now start the service with nodemon mode. Modify the start command

{
    "start": "nodemon --exec babel-node ./index.js",
}

So every time we change the index.js command, we don’t have to restart NPM run start. For more nodemon just check out the nodemon Git address: github.com/remy/nodemon#nodemon