Construction of project front-end development environment

Introduction to tool

Node.js

Node.js is an open source, cross-platform JavaScript runtime environment. it is based on Chrome used V8 Engine, make JavaScript Can be used outside of the browser operating environment Implementation in.

Node.js can be used not only to develop Web service-side programs, but also to build front-end engineering tools, command-line tools, automated scripts, etc. Modern front-end projects often rely on Node.js to run build tools, install dependencies, and launch development servers.

V8 Will use just-in-time compilation, etc. compilation techniques Execute JavaScript. Compared with the traditional line-by-line interpretation scripting language Execution methods, such optimizations can improve the code’s running speed, and help teams reduce the cost of duplicating tool chains development costs。

npm

npm is a commonly used package manager in the Node.js ecosystem. When installing Node.js, npm is usually installed at the same time, so it is generally not necessary to install it separately.

npm connects bothOpen source online Node.js The package’s registry also provides command-line tools to do the following:

• according to package.json Install and manage project dependencies.
• by package-lock.json Lock dependency resolution results to improve installation consistency across different environments.
• implementation package.json scripts defined in, for example npm run dev。
• Publish and maintain npm software packages.

Yarn, pnpm and cnpm are all related to the npm ecosystem, but their positioning is not exactly the same. Yarn and pnpm are optional package managers, and cnpm is a client compatible with the way npm is used. They should not be simply understood as “domestic mirrors of npm.” A project should try to unify the package manager and submit the corresponding lock file to avoid dependency differences after mixing.

NVM for Windows

NVM for Windows is a Node.js version management tool on the Windows platform. It can install and switch multiple Node.js versions on the same computer.

The main uses include:

• Install, uninstall, and view different versions of Node.js.
• Switch Node.js versions according to project requirements.
• Set the current version of Node.js in effect.
• Reduce the cost of compatibility between multiple projects with different Node.js versions.

note: Windows uses NVM for Windows, which is similar to the common ones on macOS and Linux nvm It is not the same project, and there are differences in installation methods and some commands.

Installation plan description

It is recommended to use NVM for Windows to install and manage Node.js uniformly. It is not recommended to install the stand-alone version of Node.js before installing NVM for Windows. When two installations exist at the same time, conflicts between environment variables or installation directories may occur, resulting in nvm use after switching node -v The old version is still displayed.

The Node.js version used for this project is 22.17.0。The course screenshot also demonstrates 14.20.0, this version is only used for version switching exercises when compatibility with old projects is needed and should not be used as the default version for current projects.

Clean up old environment

When you have installed Node.js or NVM for Windows, it is recommended to clean up the old environment first; you can skip this section for a new computer.

Step 1: Close the relevant program

Close terminals, IDEs, development servers and other related processes that are using Node.js to avoid files being occupied.

Step 2: Record the current environment

Open a command prompt and execute the following command:

node -v
npm -v
where node
where npm

where Commands can help confirm which directory the system is actually calling the executable file.

Step 3: Uninstall the old version of Node.js

Uninstall the stand-alone installation of Node.js in Windows Settings or Control Panel, and then check if there are still any remnants in the original installation directory.

If you plan to use NVM for Windows in the future, especially make sure that the original Node.js physical directory does not occupy the symbolic link location of NVM. Before deleting a directory, you should first confirm that there are no configurations or files in it that need to be preserved.

Step 4: Uninstall the old version of NVM for Windows

When you need to reinstall NVM for Windows, you can uninstall it through Windows ‘application uninstall feature. Check after unloading NVM_HOME、NVM_SYMLINK and PATH Whether the failed configuration still remains in.

Don’t directly delete unfamiliar environment variables. Make sure that the variable points to the old NVM installation directory before cleaning up.

Step 5: Handle npm residues

You can first use the following command to view npm’s cache and global installation directory:

npm config get cache
npm config get prefix

After confirming that the old environment is no longer needed, clean up the corresponding directory. in the user directory .npmrc It may contain a mirror, proxy, or private warehouse configuration and should be backed up before deleting it.

Install NVM for Windows

Step 1: Run the installer

Run the NVM for Windows installer provided by your team or course. It is recommended to use the default directory during installation; when modifying the directory, avoid the path containing special characters and ensure that there are no physical folders with the same name in the symbolically linked directory.

If the installer asks whether to take over existing Node.js, it is recommended to exit the installation first, uninstall the stand-alone version of Node.js as above and then reinstall it to avoid path conflicts.

Step 2: Re-open the terminal

After installation is complete, turn off and reopen Command Prompt or PowerShell. When switching Node.js versions, Windows usually requires administrator privileges, so it is recommended to open the terminal as an administrator.

Verify NVM for Windows by executing the following command:

nvm version

Some older versions also support:

nvm -v

Install and switch Node.js versions

Install the current project version

Execute the following command to install Node.js required by this project:

nvm install 22.17.0

Switch to this version after installation is complete:

nvm use 22.17.0

If Windows pops up a permission confirmation window during switching, the operation should be allowed after confirming that the command source is correct.

Verify current version

Execute the following command:

nvm current
node -v
npm -v

You can also view all installed versions of Node.js on this machine:

nvm list

Older versions of NVM for Windows are also available:

nvm ls

The versions with an asterisk in the list are the currently effective versions.

Example of switching old project versions

Only if an old project explicitly requires Node.js 14.20.0 Install this version again:

nvm install 14.20.0

You can switch and view versions after installation:

nvm use 14.20.0
nvm list

After processing the old project is completed, switch back to the current project version:

nvm use 22.17.0

Launch front-end projects

Step 1: Enter the project catalog

Open a command prompt or IDE terminal and enter the project’s webui Contents:

cd <项目目录>\webui

Step 2: Confirm the Node.js version

node -v
npm -v

Current projects should use Node.js 22.17.0。If the version is incorrect, execute:

nvm use 22.17.0

Step 3: Install project dependencies

When you run a project for the first time or when dependencies change, you need to install dependencies first.

Project submitted and not modified package-lock.json When, you can use the repeatable installable command first:

npm ci

no package-lock.json, or when you need to update the lock file, use:

npm install

Don’t randomly mix npm, Yarn, and pnpm in the same project, otherwise multiple lock files may be generated at the same time and inconsistent dependent versions may be created.

Step 4: Start the development server

npm run dev

After successful startup, the address output by the terminal shall prevail. The default address for a Vite project is usually:

http://localhost:5173

if 5173 The port is already occupied, and the development server may automatically select another port, so don’t judge whether the boot was successful based on the fixed address.

Troubleshooting common problems

nvm use Execution was successful, but the Node.js version remained unchanged

Check the following items in turn:

• Re-open the terminal as an administrator.
• Close the old terminal window and then re-verify.
• implementation where node, check whether there are path conflicts in the stand-alone version of Node.js.
• implementation nvm debug, check out the issues detected by NVM for Windows.
• Make sure that the symbolic link directory of NVM is not occupied by the entity directory with the same name.

you can’t find node or npm

Implement first:

nvm list
nvm use 22.17.0

Then close and reopen the terminal. If it still fails, check NVM_HOME、NVM_SYMLINK and PATH。

npm install or npm ci failure

Key inspections:

• Whether the current version of Node.js meets the project requirements.
• package.json with package-lock.json Whether they are consistent.
• Is it correct webui Execute the command in the directory.
• Whether the network, proxy, mirror, and private warehouse authentication configurations are valid.
• Whether lock files generated by different package managers are mixed.

npm run dev Prompt script does not exist

open package.json, confirm scripts Whether defined in dev。npm run dev It is just a script that executes the project declaration, and not all front-end projects use this command firmly.