Detailed explanation of npm script and package-lock.json

In the previous article, we talked about some common fields in package.jsonthe file , so in this article, we will learn about the fieldspackage.json in the file and other knowledge, and go directly to the topic.scriptnpm

npm script guide

npmScripts are a set of built-in scripts and custom scripts defined package.jsonin , whose templates provide a simple command to perform repetitive or complex tasks, such as:

• start a reactproject ;
• Use webpackto package the project;
• etc;

Each script command has a life cycle, what to do before execution, what to do during execution, and what to do after execution. For example, add two script commands in scriptthe field which are prestartand respectively poststart. The specific code is as follows:

 "scripts": {"prestart": "echo 我首先执行","start": "node index.js","poststart": "echo 我最后执行"}, 

Execute in the terminal npm start, and then view the console, there will be the following output:

npmYou can also use npm_package_字段名称to get package.jsonthe information in , you need to execute scriptthe script , for example package.json, there are the following definitions in :

 "scripts": {"start": "node index.js"}, 

In index.jsthe file there is the following code:

console.log(process.env.npm_package_version); 

npm startAfter executing in the terminal , it is found package.jsonthat the version information in is output. Here process.envis package.jsonthe field value obtained through the environment variable.

You can also add more fields before executing commands in the terminal, for example:

 npm start moment supper 

You can use process.argvto get the parameters passed in, and the following output will be output by printing:

Starting from the second value of the array is the additional parameter we pass in.

Some projects may need to execute multiple tasks at the same time when starting, and the execution sequence of multiple tasks determines the performance of the project.

For serial execution , the next task can only be executed after the previous task is executed successfully, and &&the symbol to connect, for example:

 "scripts": {"start": "node index.js && node test.js"}, 

In the execution of serial commands, as long as one execution fails, the entire script ends. In the picture below, the first command fails, and there will be no output afterwards:

The difference from the entire execution method above is parallel execution , that is, multiple commands can be selected and executed at the same time, using &symbols to connect:

 "scripts": {"start": "node index.js & node test.js"}, 

Here, if one of them reports an error, the rest can still be executed normally. The specific effect is as follows:

package-lock.json

When we run npm installthe command , we will find that a new file is automatically generated package-lock.json. When the file npmis modified node_modulestree or package.jsonfile , the file will be automatically modified. If it is manually modified, it will npm installbe modified in the next execution.

package-lock.jsonFiles are intended to be committed to codebases, such GitHubas , for various purposes:

• Describe a single concrete representation of the dependency tree to ensure that exactly the same dependencies are installed when the team develops and deploys;
• Provide users with a tool time-travelto get to the previous state, which means node_moduleswhat version you used in before. When you delete node_modulesthe file and share the code with others, npm installthe version of the package they downloaded through is also the same;
• Optimize the installation speed, if there is a package with the same version, it will be skipped to improve the speed;

package-lock.jsonThe generation logic of can be explained by referring to the following example. For example, momentin , the dependency package is installed X, Xand the dependency package depends on the package Y, and Ydepends on Z. Please refer to the following code for specific dependencies:

// project moment
{ "name": "moment", "dependencies": { "X": "^1.0.0" }}
// package X
{ "name": "X", "version": "1.0.0", "dependencies": { "Y": "^1.0.0" }}
// package B
{ "name": "Y", "version": "1.0.0", "dependencies": { "Z": "^1.0.0" }}
// package Z
{ "name": "Z", "version": "1.0.0" } 

In this case package-lock.jsonthe file would generate something like:

// package-lock.json
{ "name": "moment","version": "1.0.0","dependencies": {"X": { "version": "1.0.0" },"Y": { "version": "1.0.0" },"Z": { "version": "1.0.0" }}
} 

In our later development, if we do not modify package.jsonthe file , then package-lock.jsonthe file will never be regenerated, even if Xthe package releases a new version, although we package.jsonwrite in the file ^1.0.0, but because of the existence of package-lock.jsonthe file , the execution npm installwill not automatically upgrade.

In general, package.jsonthe file is to specify the range that the dependent package can use, and package-lock.jsonthe file is to use a specific value in this range.

at last

A front-end information package is prepared for everyone. Contains 54, 2.57G front-end related e-books, "Front-end Interview Collection (with answers and analysis)", difficult and key knowledge video tutorials (full set).



Friends in need, you can click the card below to receive and share for free