How to successfully install Node.js and use npm and yarn in VS Code terminal?

1. What is Node.js?

Node.js is an open source and cross-platform JavaScript runtime environment. Node.js was written in 2009. The original author was American software engineer Ryan Dahl [1] . Node.js was born just over 10 years ago, JavaScript has been around for 26 years, and the Web has been around for 33 years.
Node.js is not an independent language. The code of Node.js is mainly divided into three types: JS, C++, and C. Nearly half of its underlying code is used to build event queues and callback function queues, and is completed using event drivers. Server task scheduling.

 

Node.js runs the V8 JavaScript engine (the core of Google Chrome) outside of the browser.

Node.js applications run in a single process, eliminating the need to create new threads for each request. Node.js provides a set of asynchronous I/O primitives in its standard library to prevent JavaScript code from blocking. Typically, libraries in Node.js are written using a non-blocking paradigm, making blocking behavior an exception rather than the norm. .

When Node.js performs an I/O operation (such as reading from the network, accessing a database, or the file system), Node.js will resume the operation when the response comes back (instead of blocking the thread and wasting CPU cycles waiting).

This allows Node.js to handle thousands of concurrent connections using a single server without introducing the burden of managing thread concurrency (which can be a significant source of errors).

Node.js has a unique advantage. Front-end developers who write JavaScript for browsers can now write server-side code in addition to client-side code without learning a completely different language, which can facilitate front-end development. Both browsers and Node.js use JavaScript as their programming language, but building applications that run in a browser is completely different from building applications for Node.js. [2]

2. Famous large projects or companies using Node.js

NASA, faced with the challenge of moving all EVA spacesuit data to a cloud database, adopted Node.js, which helped reduce the number of procedural steps from 28 to 7; Netflix, the world’s
largest The streaming and VOD provider, with over 130 million users, moved its backend from Java to Node.js.
PayPal migrated from Java to Node.js, which improved page response time by 200ms and doubled the number of requests it can handle per second.
Others such as Uber, LinkedIn, Yahoo, and Walmart use Node.js;
there is also Hyperledger Fabric SDK for Node.js, etc. [3]

3. How to successfully install node.js?

1. Download the nodejs engine, 32bit version or 64bit version, choose according to your computer. Here we take W11 as an example.
2. Download the latest version of npm zip format compressed package  Node.js

 

 

 3. Create a file node.js on the hard disk such as the D drive, and decompress the downloaded files and put them here.
4. Configure two environment variables: one is to add the directory D:\node.js of node.exe to PATH, and the other is to add a separate environment variable NODE_PATH with the value D:\node.js\node_modules.

 

Set a separate environment variable

 

 

5. Refer to a traditional installation method (Note: It is recommended to use Taobao mirror installation in China. The Taobao mirror synchronization frequency is currently once every 10 minutes to ensure that it is as synchronized with the official service as possible.) The npm warehouse is a foreign server, which often fails to connect or is installed
slowly . It is recommended to use Taobao NPM mirror for installation. There is no obstacle to installing express abroad. Please press the W icon + R shortcut key on the keyboard at the same time, enter cmd, enter the terminal, and enter the following command: d: Enter the
D drive, then enter: cd node.js and then enter:
npm install express "Install express to a relative path" or Enter npm install express -g "Install express to the absolute path" [4]

Taobao mirror:
npm config set registry  https://registry.npm.taobao.org

Enter node -v and if the version of node.js is output, as shown in the picture above v16.14.0, it indicates a successful installation.
When I installed node.js abroad, it was sometimes easy and sometimes unsuccessful. I also used domestic mirrors and domestic installation tutorials, but failed to install successfully after working in vain for several days. Sometimes I followed the instructions in the original English document. It worked quickly. I judge that the reason is still a path problem and a confusion in the directory structure.

4. How to open the terminal in VS Code to find the node in the VS Code terminal and use npm
1. In the blank state, do not import any files at the beginning, select the VS Code terminal, and create a new terminal. If the file has been opened before, it will be entered into the project by default and needs to be deleted.

 

Step 1, 2

 Before step 12, you can enter dir to view the directory (this viewing step is optional)

5. How to install Yarn in the vs code terminal

1. Yarn appears to make up for some deficiencies of npm. npm is Node.js’ default package management system written in JavaScript.
2.Yarn is a software packaging system developed by Facebook in 2016 for the Node.js JavaScript runtime environment, providing speed, consistency, stability and security as an alternative to npm (package manager).
3. Yarn was created through a collaboration between Facebook, Exponent, Google, and Tilde to solve the consistency, security, and performance issues Facebook faces with large code bases.

In projects such as vue , yarn will bring a lot of convenience to development.
So how to install yarn in VS Code? After installing Node in the above steps, npm will be automatically installed. If you cannot find the version number through npm -v, please exit VS Code and re-enter to try. If the installation is unsuccessful, it is recommended to completely delete it and then reinstall Node.
Therefore, when installing development software on the D drive, you sometimes need to format the D drive and delete it completely. Please note that some anti-virus software that comes with your computer should be deleted when reinstalling the system.

Enter in the terminal: npm instal -g yarn  install yarn [5]

6. How to configure the development environment for your VUE project through yarn?
d: cd\enter your own project, such as
PS C:\Users\wangs> d:

PS D:\> node -v

v16.14.0

PS D:\> wamp64\www\john-php (www is followed by the name of your own project) Enter the following command to configure the VUE development dependency environment through yarn.
The first step is to enter the following command: yarn global add @vue/cli
The second step is to enter the following command. If the installation fails, just enter vue create my-project

yarn global add @vue/cli-service-global @vue/cli-service

.

Use yarn to install VUE globally (gLobal means global)

 

Successful installation

vue create my-project (create a new project)

It works on other people's computers, but not on mine.
Various articles on the Internet that introduce methods seem to work, but I can't follow the pictures myself.
Because we initiated a large number of useless requests during the installation process, if the download fails, the request will be automatically re-requested. When the installation order of dependencies is different, the directory structure may change, which often causes the entire installation process to fail. You will spend a lot of unnecessary valuable time on it. I once spent six days in a row solving a bug in a blockchain application software due to inconsistent compression software versions, so I decided to use yarn.

yarn creates my project


Disadvantages of npm:
When the dependency level of a package is relatively deep, version control is not precise enough. The same package.json will appear, but different versions of dependent packages are installed on different people's computers. Bugs like "it can run on my computer but not on other computers" appear and are difficult to find. You can use  npm-shrinkwrap to implement version solidification, and the version information will be written to the npm-shrinkwrap.json file, but it is not a standard configuration of npm after all. However, npm 5+ and later versions have added package-lock.json which can be used to lock the version.

Yarn is inherently capable of version solidification. A yarn.lock file similar to npm-shrinkwrap.json will be generated, and the file will describe the version number of the package itself, and will also lock the version numbers of all the packages it depends on.

The main advantages of yarn are: fast speed, offline mode, and version control.
Configuring the development environment for your own VUE and other projects through yarn will bring a lot of convenience. For more details on how to install yarn, please refer to notes [6]

Enter cd vuecli and yarn serve in sequence and press Enter until App running at: - Local: http://localhost:8080/ - Network: http://192.168.1.10:8080/

http://localhost:8080/
Click on the above domain name that appears in vs code, you can see the VUE installed with yarn in CV Code.


You can develop your own APP by editing the "D:\wamp64\www\my-project\src\App.vue" and other modules inside .

 

Guess you like

Origin blog.csdn.net/weixin_64948861/article/details/129251613