Who moved my package lock

The bloody lesson is only to present a better article

package-lock Introduce

nodejs Yes package-lock Introduction to ：package-lock.json file

The most important sentence is ：

The purpose of this file is to track the exact version of each software package installed , So that the product can be used in the same way 100％ Copy （ Even if the maintainer of the software package updates the software package ）.

The emergence of problems

Today, a new project was launched , Just put the scaffolding of a project Copy Go to another project . Then all sorts of problems suddenly appeared .

The most outrageous thing is the same code , Another domain name is running well , All kinds of questions about new projects ... No mistake , No warning for local operation ~

The most obvious one is <slot></slot> Turn into undefined.

This means that the following operations do not achieve the desired results ：

<!--  Ignore a pile vue Writing ... -->
<slot>content</slot>

<!--  The normal output is as follows  -->
content

<!--  After packing  -->
 It's empty , even to the extent that  undefined

However, most of the components encapsulated in the project use the default slots , Some even added v-if The judgment of the , The content will not be displayed if the page is light , Repeat the entire page GG~

All this originated from ：vue - Slot document 2.6.0 And then to slot Changed something .

The scenario of problem recurrence

• package-lock.json Is an ignored file
• Use vue.js And in vue.config.js Use external import in JS The way of introducing vue（ Not from node_modules） Package generation
• Local debugging OK,CI After packing GG
• slot Most are default slots , And there are default contents in the default slot , Some slots even use v-if
• pageage.json Medium vue Version is "vue":"^2.6.10". Dynamically introduced vue The version is also 2.6.10

After some debugging, I found , Run locally vue The version uses 2.6.14. and vue-template-compiler The version of 2.6.14. However, it was introduced after packaging before the launch vue.js The version is 2.6.10!

But I don't think the ultimate problem is vue Version of , But when it comes to packing vue-template-compiler Version of （ Because if it's just vue The problem of , Previous projects have had problems for a long time , So it can only be parsed when packaging vue The version of the template library is also vue The version does not correspond to ！）

So the last thing is to comment out vue.config.js Medium externals To configure . hold vue Of cdn Get rid of , Or use the packaging method to import vue.js. Solved the problem for the time being

PS：externals What is the configuration ？webpack - externals To configure

package.json Document symbol interpretation

Back to the problem of local debugging , Mingming package.json Is written 2.6.10 edition , Why do you actually use 2.6.14 ?

Look for the ："vue":"^2.6.10". Ahead ^, Also in package-lock.json file In the introduction , The following is a summary

Such symbols have a total of 4 individual

1. ^ Indicates that only the master version number is locked ： "vue":"^2.6.10" Represents that the major version number is 2. The following will get the latest version under the main version number , Until now , The latest version is indeed 2.4.16
2. ~ It means that only the major version number and minor version number are locked ： Or to "vue":"~2.6.10" For example , The main version is 2, The second version is 6, You will eventually get 2.6.x The latest version .
3. No symbols indicate that the version is locked ："vue":"2.6.10" It will be designated as 2.6.10 . There will be no change
4. * Represents the latest version . If it says "vue":"*". Which day? vue3.0 Updated to the stable version of the official website , After installation, you will directly upgrade to 3.0

summary ：

• ^ Lock master version
• ~ Lock master + Next version
• empty Lock the specified version number
• * The latest version

How to find it quickly node_modules In the package

To understand the package.json After the definition of each symbol , Let's talk about how I found the problem : Recommend a vscode plug-in unit Search node_modules

After installation ,CTRL+P. Input >node

Then we can quickly search what we want to find npm package

open vue Of package.json. although _form Is written 2.6.10. But the bottom is actually installed version yes 14 Of .

package-lock Do you want to delete ？

Before this happened , I usually put yarn.lock perhaps package-lock.json Delete first , stay npm i. Even in the project .gitignore Add them to the ignore file .

package-lock.json It will help you always lock the version number of the current running .

although package.json There is 4 Symbols , It seems that if ^ Such symbols will show that the whole program has been in the state of automatic version upgrade . It is extremely unstable for enterprise projects , that package-lock File can help you lock the current running environment .

Assuming the current package.json Of vue The version still says "vue":"^2.6.10". And now vue The latest version is "vue":"^2.6.14". At this time, a new project , The installation is "vue":"^2.6.14" rely on . meanwhile package-lock.json Will record vue Current 2.6.14 edition .

Even after a month ,vue Updated to 2.7.0. As long as there is package-lock.json Version record of , What are you doing npm i. It's all installed 2.6.14. It's kind of like package.json Medium “ Empty symbol ” It means .

Only the fully locked version , To ensure that “ Products can be used in the same way 100％ Copy （ Even if the maintainer of the software package updates the software package ）”

therefore , You dare to delete it package-lock.json Do you ？

summary

• package.json The symbols are 4 individual

  • ^ Lock master version
  • ~ Lock master + Next version
  • empty Lock the specified version number
  • * The latest version

---

• package-lock.json Delete and ignore as appropriate

  • If you are a vigorous , A team willing to upgrade / personal , Directly change the version number to "*"
  • If the project needs to be delivered continuously / Having high requirements for stable operation , Don't delete it
  • And if you use webpack - externals To configure Do not delete , Because he will let you and you at any time CDN The version does not match the number ~
    This leads to a series of “ It looks OK on my computer ” Illusion

---

• A small plug-in is recommended

  • Search node_modules I usually want to see some npm The source code of the package is also much more convenient

It was another day of learning from mistakes