Shulou(Shulou.com)06/02 Report--

This article mainly introduces the relevant knowledge of "how to set Babel in Node.js". The editor shows you the operation process through an actual case. The operation method is simple and fast, and it is practical. I hope this article "how to set Babel in Node.js" can help you solve the problem.

What is Babel?

Babel is a JavaScript compiler. It is a popular tool that helps you use the latest features of the JavaScript programming language.

More precisely, babel is a JavaScript transcoder that converts a higher version of JavaScript code into a lower version of JavaScript code, thus applying the higher version of JavaScript functionality in an environment that uses a lower version of JavaScript code.

Why use Babel in Node.js?

Have you ever opened a back-end repository built using Node.js/Express-the first thing you see are ES6 import and export statements and other cool ES6 syntax features?

Well, Babel made it possible. Keep in mind that Babel is a popular tool that lets you use the latest features of JavaScript. Many frameworks now use Babel at the bottom to compile their code.

For example, without the help of a compiler like Babel, Node cannot use ES6 import and export statements and other cool features of the ES6 syntax.

precondition

This tutorial assumes the following conditions:

Basic knowledge of Node.js

Nodes installed on your machine

Any code or text editor you choose

Introduction

Let's set up a basic Node application that we will use in this tutorial.

Create a new folder. In this tutorial, I will call my node-babel. Now add the folder to the workspace and open your terminal.

Let's initialize and create a package.json file for our application:

Npm init

This command will show some setup steps that we want to leave as they are. Therefore, pressing enter or enter can work properly during the whole setup process.

When you're done now, create a new file called "index.js", which will be our entry point.

How to set up and install Babel

Now, we will install three packages of the Babel series, which are:

@ babel/cli, @ babel/core and @ babel/preset-env

To install, we use the following command to install the package:

Npm install-- save-dev @ babel/cli @ babel/core @ babel/preset-env

We want to use-- save-dev to install them as dependencies for module development. So once you have completed the installation, create a new file called .babelrc to configure babel.

Touch .babelrc

This file will contain all the options we want to add to Babel. So for now, let's use the settings I usually use for development in my application. You can copy it and add it to your:

{"presets": [["@ babel/env", {"targets": {"node": "current"}]], "plugins": ["@ babel/plugin-proposal-class-properties", "@ babel/plugin-proposal-object-rest-spread"]}

The above configuration is what I use to tell Babel, yes, I use not only my import and export statements, but also class features and the rest and spread operators in ES6.

Isn't that awesome? Let's move on.

How to set up a simple server

Now open the "index.js" file we created earlier and add the following code to generate a simple server:

Import http from 'http';const server = http.createServer ((req, res) = > {res.end (' Hello from the server');}). Console.log ('Server is up and running'); export default server

Using the sample code above, our server will listen on port 4001 and then send us a "Hello from the server" response when we access that port.

Package.json script configuration.

We now have a simple server. To run it, we must translate our code before running it using Node.js. To do this, open the "package.json" file and add this build and startup script:

"scripts": {+ "build": "babel index.js-d dist", "start": "npm run build & node dist/index.js"}

Good-so let's start our server with this command:

Npm start

You should receive this response after accessing localhost:4001

How to use Nodemon to monitor and restart your server

To prevent the server from restarting itself each time the application is changed, we need to install nodemon. You can install nodemon into your application as a development dependency using the following command:

Npm install-save-dev nodemon

Then we reconfigure our package.json script:

"scripts": {"build": "babel index.js-d dist", "start": "npm run build & & nodemon dist/index.js"}

Great, now this is the final code for our Node application and the code you should get when you run "npm start" to start the server.

As can be seen from the above picture, our server is up and running. You can now use the import and export statements in the es6 syntax, as well as other great features provided by es6, such as the rest and spread operators in Node applications.

This is the end of the introduction to "how to set up Babel in Node.js". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.