The original address: Using babel7 with node (https://hackernoon.com/using-babel-7-with-node-7e401bc28b04), the original author: Will Willems, BangoodCopy the code

Want to use the latest JS syntax in your Node.js project? Want your project to have hot update capability? The goal of this article is to enable you to build such a basic project.


You may have used other lower versions of Babel before, but there are some differences between the Babel 7 we’re using today and those lower versions.

1.Babel7 packages are hanging in the @babel domain. For example, the previous babel-cli package is now renamed @babel/cli.

2.@babel/preset-env includes all the previous presets named for years.

3. Babel-node is extracted from the CLI into a separate package: @babel/node.

To learn more about the changes to Babel7, go to the official website.

Set up the Node project structure

Let’s first open our command line terminal tool: Windows, win+R, enter CMD, enter, enter the command line tool.

Create our project folder: mkdir my-project.

Switch to the project folder: CD my-project.

We use Git to manage our project, so let’s execute the Git init command.

Executing NPM init to initialize our project automatically generates a package.json file.

Let’s create two more folders in the current directory: dist and SRC. Here is the structure of our project as follows:

  my-project
    |--dist
    |--src
    |--package.json
Copy the code

Let’s now create an entry file for our entire project, server.js, in the SRC directory

my-project
    |--dist
    |--src
    |  |--server.js
    |--package.jsonCopy the code

To use babel7 in our project, we run NPM install –save-dev @babel/core @babel/cli @babel/preset-env @babel/node.

To tell Babel how to use the @babel/preset-env package, we need to create a file in the root of our project:.babelrc.

// .babelrc
{  
"presets": ["@babel/preset-env"]}Copy the code

After compiling the debugging Node.js project and modifying the code, you need to close it manually frequently and then restart it again, which is very tedious. Now, we can introduce the nodemon tool into our project by NPM install –save-dev Nodemon. Its function is to monitor the changes of code files and automatically restart the code after the changes.

Our project structure so far is as follows:

  

 my-project    
    |--dist
    |--node_modules
    |--src
    |  |--server.js
    |--package.json
    |--.babelrc
Copy the code

Add scripts to package.json

Finally, we add some NPM commands to our package.json file.

  • addstartCommand:nodemon --exec babel-node src/server.js . This command is to tellnodemonIt listens for file changes, and when it detects that a file has changed, it restarts and runs babel-Nodesrc/server.jsFile. This command is typically used for local development.
  • addbuildCommand:babel src --out-dir dist. This command tells Babel to compilesrcIn the source file, and output the results todistIn the
  • addserveCommand:node dist/server.js. This command lets us run the compiled file using Node. One might ask, why don’t we just use Nodemon to run our programs? This is because running our program with Nodemon uses more memory and takes more startup time than Running With Node.

package.json

   

 {  
    "name": "my-project"."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": "MIT"."dependencies": {},"devDependencies": {    
        "@babel/cli": "7.4.3"."@babel/core": "7.4.3"."@babel/node": "7.2.2"."@babel/preset-env": "7.4.3"."nodemon": "1.18.11"  
      }}Copy the code