I can’t run the code with good front-end supernatural events?

Write at the beginning

• Front-end soul torture:

The same project, the same code, can run on someone else's computer, why can't it work on your own computer?

The same project, the same code, packaged and built by others on their own computers, why not work on the server?

The old Peter driver will take you to deeply analyze this problem this time

What's the reason?

There is usually more than one reason. Maybe you had a problem at that time, it was caused by incorrect posture, environmental problems, or irregular operations by colleagues, etc., let's follow one by one.

Before watching, remember to pay attention to:

---

One of the original sins: Irregular use of npm/yarn, etc.

When the front-end dependencies are installed through package managers such as npm/yarn, the version is not locked. For example, when your colleague installs the dependencies:

yarn add react --save 

So what exactly is this version? As we all know, before version 18 of react, two reacts cannot exist at the same time, otherwise an error will be reported and the screen will be blank.

When a colleague uses yarn to install react, a yarn.lock file will be generated to lock the react version information for this installation, but at this time you clone the code, use npm install, then start the project, and find the react version of the project itself and The react versions of other third-party libraries are not compatible, and you won't be able to run at this time.

Therefore: for multi-person development and collaboration, it is necessary to unify the package manager, use a lock file uniformly, and use git to manage this file to lock the dependent installation version
In addition, try to lock the version when installing dependencies, for example:

yarn add react@16.18.0 --save 

The same reason: when your build machine and the local development machine use different commands, it can also cause this problem. For example, the local use yarn install , and the build machine use npm instasll

The second original sin: Node.js version is inconsistent

At present, the front-end engineering is mostly based on the Node.js environment. node.js is released and upgraded very quickly. It is normal that the new and old versions of the api are not compatible. For example, the 16 version of nodejs on your computer is matched with a relatively new webpack version. , It can be used normally, but once you build the machine, or go to a colleague’s computer with an older version, it can’t run.

It is recommended to use nvm manage the node.js version, so that there are multiple nodejs versions on the computer

Original sin three: special environment configuration

For example, if the computer lacks the hosts configuration, the project itself needs to run on a specific host , but your computer does not write the configuration, which will cause the project to fail to start

The fourth original sin: specific dependent sources cannot be downloaded

This important situation:

One is that the real source is abroad, which is relatively slow, and will often time out, and cannot be downloaded, so it cannot be started (for example, the pain of the front end node-sass )

When installing, you can specify the source address as Taobao mirror:

npm install -g mirror-config-china --registry=http://registry.npm.taobao.org

npm install sass-loader node-sass -D

One is that the private mirror source is protected, and there is no permission to access it on the public network. The console reports 401 during installation, and a company VPN is required.

The fifth original sin: the specific dependency is compiled for a long time after downloading, or it cannot be compiled

For example, when windows installs dependencies, it prompts: the python2.7 environment is not installed

At this point, you only need to execute this command and it will install the python environment for you

npm install --global --production windows-build-tools

Cross-platform development, Mac computer is the first choice, it will solve many environmental problems for you in advance

Sixth original sin: Port is occupied

It is possible to start multiple projects at the same time outside, for example: when the project occupies port 8080, and then start the project later, it will report that the port is occupied twice

At this time you need to adjust the port to start

Concluding remarks

I believe that through these six points, you can solve the problem of not running the same code in most of your projects. You must know that the project can run on other people's computers, and your computer will definitely be able to do it. If not, it’s your posture problem

Remember to help me with the public peak of the front end: Watching/Like/Follow