The profile

This paper mainly involves:

  1. nodejsVersion management toolnvminwin,*nixInstallation, update, and use of the system
  2. npm,yarn,pnpmUse of package management tools, source swapping and source restoration
  3. package.lock.json,yarn.lock,pnpm-lock.yamlHow to explain and use the documentniElegant dependency package handling across different package management tool projects

Premise & reason

I myself is a work for nearly five years of front-end engineer, in the first into the front-end developer, feel have a lot of things to learn, want to try a lot of technology, but sometimes because nodejs version under different, relying on a bag not come down, have a problem with online learning in the source in the also can’t restore, all kinds of wonderful work problems, almost make me stop. So I will write down a best practice summarized from the process of nodeJS environment preparation, package manager, dependency installation and development in front end development, so as to provide a reference for novices, experts and veterans, so as not to have to turn to previous notes, favorites and search engines every time they encounter these annoying problems. Anyhow it is a record front-end development environment of incurable diseases, does not involve any technical advice, directly give you best practices and problem solution, if your local environment is bad now, recommended uninstall all deleted, in accordance with this article to deal with the local environment, this article will follow later popular technology stack not regularly updated content recommendation collection, If you have any good tools, content or best practices, feel free to share them in the comments section!

Nodejs version management tool NVM section

What is NVM? Why do I need NVM?

When using a new library or a new version of a library, we often encounter a minimum nodeJS version requirement. What if our local nodeJS version is too old to use? What if you have several projects to maintain and some historical projects don’t use newer versions of NodeJS? This won’t work! , so we need a tool that can manage the local nodeJS version to solve this problem

NVM installation, use, and update

NVM can be installed on Windows, Linux, and OSX. Since the installation process on Linux and OSX is basically the same, I will use Windows and Linux as an example. If you have nodeJS locally and have packages installed globally, Please use NPM list -g –depth 0 to check the installed package. Use node -v to check your nodeJS version and record it. After installing NVM, restore the local environment again. Then go to the next step.

Install NVM on Windows (if you have already installed NVM, skip the update on Windows)

Get ready: Right-click the Start menu and click on the Windows PowerShell(Administrator)(A). Enter the set-ExecutionPolicy Remotescene and enter the A. This is because *.ps1 scripts (powershell scripts) need to be set to execute permission on Windows.

The installation process of NVM on Win is relatively simple and the repository is not the same as the original NVM repository. It is the NVM-Windows repository. First we go to the Releases page of the repository, go to nVM-setup. zip, and click to download a compressed package of the installation file. If you want to change the installation path, you can also change it by yourself, but make sure that the installation path cannot contain Chinese and space, or you can uninstall and install again. After all is done, restart the terminal or computer (restart the terminal is not possible, restart the computer 😝, this step is mainly to enable the configuration of the environment variable PATH to take effect), after the restart, open the terminal, enter NVM version in the terminal, if there is normal output, it means that it has been installed. In this case, we need to switch sources (for faster network speed and faster installation of Nodejs and project dependencies). First, open the directory of your NVM installation, which should contain a settings. TXT file, open this file, append the content to this file, save and close. (If you need to change the source later, you can change the path of the later source, reset the default source, delete this part and save it directly.)

node_mirror: https://npm.taobao.org/mirrors/node/
npm_mirror: https://npm.taobao.org/mirrors/npm/
registry: https://registry.npm.taobao.org
Copy the code

Restart the terminal and run it

NVM install XXXXXX (the nodeJS version you installed earlier, such as 16.13.2)Copy the code

After the installation is complete, open Windows PowerShell(administrator)(A), NVM ls to check which versions of nodeJS are installed. NVM use XXXXXX specifies which nodejs version is used by default. Exit status 1 will be reported if you are not using the administrator terminal: � � � � � � � � � � the fault, use the administrator terminal to switch is ok (only if the switch in NVM nodejs version will have this problem, at ordinary times development not used). You can use NPM install -g XXX to install your global package.

The NVM installation pit under Win should be exhausted, next to tell you the update.

Update the NVM on Windows

If your NVM version is lower than V1.1.8, you may not be able to use PNPM using corepack built into NODEJS in V16.13 +. For those who are not familiar with Corepack and PNPM, please read my other article. For better development experience and subsequent updates, You are advised to upgrade the NVM after the NVM version is updated.

Similarly, if you see the latest Releases of NVM-Windows that are higher than your native releases, go to the Releases page and find the latest version of NVM-update. zip, download it, unzip it, right-click and run it as an administrator, select the latest version, and wait until the installation is complete. Restart the terminal and use NVM Version to check whether the installation is successful. If not, run the updated file again.

Install NVM on Linux (again, if nodeJS is installed, uninstall it first)

Run according to the official readme document

The curl - o - https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash# orWget - qO - https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bashCopy the code

Usually, part of the homecoming for DNS pollution problem to curl: port 443 (7) Failed to connect to raw.githubusercontent.com: Connection refused fault, this time to up some posts will let you go to check the domain name IP website by way of change the local host to fix this problem, here to tell you a more elegant solution:

Go to the readme section of the NVM repository and click Install Script to jump to the install.sh file. Copy the contents of the file and create a new install-nvm. Then run the script at bash./install-nvm. Sh. If you need to update the NVM later, just change the version number in the script file to the latest version number, such as 0.39.1 as of the update. Once you’re done, you need to add the following contents to your terminal configuration file as shown in the readme document. For example, if you’re using the default bash, you need to check your ~/.bashrc for the following contents. If not, if you’re using ZSH, You need to add the following configuration to your ~/.zshrc and then source your configuration file to make it work

export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm
Copy the code

At this point, you’re done installing and updating NVM on your Unix system.

Note, however, that the commands to set the default nodeJS version on Win and Unix are different. On Windows, you can use NVM use 16.13.2 to switch the nodeJS version of the current system and set it to the default version. On Unix, you need to use NVM alias default 16.13.2 to set the default nodeJS version. Set the nodeJS version in the current environment using NVM use 16.13.2. Run the the following for the source (later if need to change the path of the source can be replaced at the back of the source to perform, reset the default source directly to the back of the path switch to https://npmmirror.com/mirrors/node)

export NVM_NODEJS_ORG_MIRROR=https://npm.taobao.org/mirrors/node
Copy the code

NPM, YARN, and PNPM dependency package management tool

NPM is the default package management tool for NodeJS for a long time. After nodeJS is installed, NPM is installed globally by default. However, due to historical design problems, using NPM to install dependencies leads to a large volume of dependencies in the project, and the installation process takes a long time if the network is poor. But without a good yarn rely on large size problems, came back PNPM, contrast and principle for the several package management tool is not to be discussed in this paper, here recommend new project using PNPM rely on installation, about how to use the PNPM, can also be a reference my previous article, if in the case of local bandwidth does not poor, PNPM PNPM PNPM PNPM PNPM PNPM PNPM

# replace taobao source PNPM config set registry https://registry.npm.taobao.org # reset PNPM config set registry https://registry.npmjs.orgCopy the code

NPM source swap and restore are the same commands

The lock file

For example, package.lock.json is generated after NPM is installed, yarn.lock is generated, PNPM is generated, pnpm-lock.yaml is generated. These files are used to ensure that when multiple people collaborate on maintenance projects, everyone installs the same version of the package.

What is NI? Why do I need NI?

May be due to some historical reasons or other reasons, we develop at ordinary times maintain projects may use the package management tool is not unified, cause we need according to the different projects using different command to install the dependent and start the project, packaging, it is also more prone to errors, so it is recommended to use ni to optimize this situation, Ni can install dependencies and perform other operations using different commands for different lock files, and can configure your default package management tool to operate mindlessly when starting a new project.

Ni installation & use

# install NPM I -g@antfu /ni # install dependency ni # NPM I; yarn i; PNPM I # install specific package ni libname # NPM I libname; yarn add libname; pnpm i libname # run nr xxscript # npm run xxscript; yarn xxscript; Nx prisma generate # NPX prisma generate; yarn dlx prisma generate; PNPM DLX prisma generate # update yarn update; PNPM update # followed by \? View the corresponding package manager source command (do not execute, only print the command) ni \? npm i; yarn i; pnpm iCopy the code

So developers don’t have to worry about what package management tool is being used in the current project

conclusion

Web front-end development in all aspects of the fast, we are there for all to see, a variety of new toys emerge in endless, a variety of new libraries like a fierce enemy, I hope this article can help you front-end developer practice a weapon of their own, can play strange upgrade on the road to wish you a helping hand, useful please praise, If you like, please pay attention. My name is Senar. Thank you!