How to install babel using npm in vscode

Preface

The previous article introduced the installation and configuration of nodejs. This article will introduce how to use bable in VScode.
bable is a widely used ES6 converter that can convert ES6 code to ES5 code

1. Check if npm is already installed

Enter npm -v in cmd to get the version number. Now the new version of nodejs has automatically installed npm during installation.

Again, it is best to open the terminal as an administrator.

2. Configure bable

Install babel in the terminal, enter npm install –g babel-cli

This is to allow VScode to recognize bable. After successful installation, it looks like this:

This process is super slow, please be patient.

3. Configure in VScode

1. Use vscode ctrl+j to open vscode's built-in terminal
2. Enter the target folder [use cd command]

In fact, the second step of configuring bable above should also be done in the VScode terminal, but I tried several times and failed, so I simply configured it in an external terminal.

3. Enter npm init –y in the terminal to initialize the project. The correct result is that a package.json file will appear in the bable folder.

4. Install bable
Type npm install -–save-dev babel-preset-es2015 babel-cli in the terminal

This process is also quite long.

Since we have already installed the Taobao mirror, we can also use cnmp because nmp may fail, but we may encounter this situation:

I use cnmp -v to query the version number as a demonstration

There is an error in executing cnmp in the vscode terminal. At this time, just execute in the terminal: set-ExecutionPolicy RemoteSigned

Now you can use cnmp normally.
The code is as follows (example):

5. Create a new .babelrc file and configure the configuration file content

{
    // The presets property tells bakel which new syntax features are used in the source code to be converted // Convert js to es2015
    "presets":["es2015"],
    // This property tells bable which plugins to use // These plugins can control how to convert code "plugins": []
}

6. File conversion Create a new js file, enter some content (in es6 format), and then convert it in the terminal
babel src/index.js –o dist/index.js
Here I use test.js->demo.js to make a small demonstration

After entering the command, a converted demo.js file is automatically generated in the folder, which contains the es6 code in test.js converted to es5

This statement is used to convert a single file. Similarly, there is also a direct conversion of all js files in the entire folder:

babel src –d dis //src-source folder dis-converted folder

There are also statements that can achieve real-time conversion

babel src/index.js –w –o dist/index.js
babel src –w –d dist

This is the end of this article about using npm to install babel in vscode. For more information about installing babel in vscode, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!