当前位置：网站首页>package. Are you familiar with all configuration items and their usage of JSON

package. Are you familiar with all configuration items and their usage of JSON

2022-06-29 06:45:00 【51CTO】

Write it at the front

In front end development ,npm Is already an essential tool . Use npm, It's inevitable to be with package.json Dealing with . At ordinary times package.json It's used a lot , But I didn't read the official documents carefully . This paper combines npm Official documents and their perception in the process of normal use , To talk about package.json. Official documents on here .

initialization

Use npm init Command can initialize a package.json file . During the initialization , Will ask the user to enter name, version Information, etc. , Of course , You can ignore . All the way back , The following initialization is generated package.json.

      
      
       
       {
       
       
  "name": "test", //  If the project is called test
       
       
  "version": "1.0.0",
       
       
  "description": "",
       
       
  "main": "index.js",
       
       
  "scripts": {
       
       
    "test": "echo \"Error: no test specified\" && exit 1"
       
       
  },
       
       
  "author": "",
       
       
  "license": "ISC"
       
       
}
      
      
      
      
       
       1.
       
       2.
       
       3.
       
       4.
       
       5.
       
       6.
       
       7.
       
       8.
       
       9.
       
       10.
       
       11.

above package.json Contains the name of the project , Version number , describe , Entrance file , Execute the script , author , Open source protocol, etc .package.json The content is much more than that , The following will be introduced one by one . When developing business projects and component libraries ,package.json It's slightly different . I will black out the configuration items that I think are important .

Detailed introduction

name: It's easy to understand , Namely package The name of . But here's the thing ,name Limited length ( Although it usually doesn't exceed ), and name Can't use 【 spot 】 perhaps 【 Underline 】 start ,name You can't have capital letters in . This is every package necessary . In the business code , adopt require(${name}) You can import the corresponding package .
version: package Version of . For business projects , This is often less important , But if you want to publish your own project , This is very important .name and version Jointly decided on the only code .npm Yes, it is [npm-semver To resolve the version number . What we usually see is The big version . minor . Small version This version number , such as 16.1.0. Rules for version numbers 、 In fact, there are many meanings , You can refer to This article .
desription： Package description . Required when developing component libraries , Briefly introduce the users of the library to what the library is . For the company's business projects , This configuration item generally doesn't matter .
keywords： key word . An array of strings , For this npm Package introduction . Component library is required , Convenient for users in npm Mid search . For company business projects , This configuration generally doesn't matter .
homepage： Project home page . It is very useful for developing component library .
bugs： Contact information of developers , Code base issues Address, etc . If the code user finds out bug, Can be found through this configuration item bug The place of .
license： Open source licenses . For open source component libraries , This is very important . Before react And because it's not less despised by the community . The open source protocol is slightly more complex , use Ruan Yifeng Let's illustrate with a picture of the elder . notes ： There is less in the picture ISC, ISC and BSD almost

package.json All configuration items and their usage , Are you familiar with them _ Version number

author： The author of the project . It can be a string , object .
contributors： Contributors to the project .author Array of .
main： Code entry . This is very important , Especially for component libraries . When you want to be in node_modules When modifying the code of a component library you use , First, in the node_modules Find this component library , The first sight is to see this main, Find the entry file of the component library . Modify the code in this entry file .
scripts： Specifies the... To run the script command npm Command line abbreviation . Very important .

Let's look at an example ：

      
      
       
       "scripts": {
       
       
    "dev": "NODE_ENV=dev webpack-dev-server --progress --hot --host 0.0.0.0 --port 8089",
       
       
    "test": "NODE_ENV=test webpack --config webpack.test.config.js --progress",
       
       
    "online": "NODE_ENV=production webpack --config webpack.online.config.js --progress",
       
       
    "build": "webpack",
       
       
    "node": "node server.js"
       
       
  },
      
      
      
      
       
       1.
       
       2.
       
       3.
       
       4.
       
       5.
       
       6.
       
       7.

Enter at the command line ：npm run dev , The corresponding command will be executed . There is a place to pay attention to , When executed npm run xxx When ,node_modules/.bin/ The directory will be added to the system at run time PATH Variable . The above example , When we type in on the command line ：npm run build when , In fact, the real command is node_modules/.bin/webpack instead of webpack. therefore , When your webpack When not installed globally , Type... Directly on the command line ：webpack It's a mistake . Because of you. webapck Is installed in node_modules/.bin/ Below .

directories： A description of the entire code structure . Tell the code package user where to find the corresponding file .
files： Array . Indicates all files included when the code package download and installation is completed .
repository： Useful for component libraries . Let the component library user find your code library address . This configuration item will be directly in the component library npm Home page effective . Example :

      
      
       
       "repository": {
       
       
    "type": "git",
       
       
    "url": "git+https://github.com/CoyPan/react-scroll-to-show-cb.git"
       
       
},
      
      
      
      
       
       1.
       
       2.
       
       3.
       
       4.

config： Environment variable used to add command line . Please refer to here .
dependencies： Project dependency . adopt npm install --save The installed package will appear here . Be careful , Don't put the test tool 、 Code converter or packaging tool Wait here . When you use... On the command line npm install react --save when ,react It will appear in dependencies. The default is to install the latest version . If you want to install a specific version , Sure npm install [email protected]. Following dependencies, The format is legal ,

      
      
       
       "dependencies" : { 
       
       
    "foo" : "1.0.0 - 2.9999.9999",
       
       
    "bar" : ">=1.0.2 <2.1.2",
       
       
    "baz" : ">1.0.2 <=2.3.4",
       
       
    "boo" : "2.0.1",
       
       
    "qux" : "<1.0.0 || >=2.3.1 <2.4.5 || >=2.5.2 <3.0.0",
       
       
    "asd" : "http://asdf.com/asdf.tar.gz",
       
       
    "til" : "~1.2",
       
       
    "elf" : "~1.2.3",
       
       
    "two" : "2.x",
       
       
    "thr" : "3.3.x",
       
       
    "lat" : "latest",
       
       
    "dyl" : "file:../dyl"
       
       
  }
      
      
      
      
       
       1.
       
       2.
       
       3.
       
       4.
       
       5.
       
       6.
       
       7.
       
       8.
       
       9.
       
       10.
       
       11.
       
       12.
       
       13.
       
       14.

What we often see are the following ：

      
      
       
       "dependencies": {
       
       
    "foo": "1.0.0", //  Designated is 1.0.0 edition 
       
       
    "bar": "~1.2.2", //  The installation version number shall not be lower than 1.2.2 Of 1.2.x Latest version , for example :1.2.3, 1.2.4 wait .1.2.1 ,1.3.x  I can't wait 
       
       
    "baz": "ˆ1.2.2", //  The installation version number shall not be lower than 1.2.2 Of 1.x.x Latest version , for example : 1.2.7,1.3.1,1.7.8 etc. .1.2.1 ,2.0.0  I can't wait . Be careful , If the configuration is ^0.x.x, And ~0.x.x The effect is the same .                
       
       
    "lat": "latest"  //  Install the latest version 
       
       
}
      
      
      
      
       
       1.
       
       2.
       
       3.
       
       4.
       
       5.
       
       6.

dependencies It can also be configured as follows ：

      
      
       
       "dependencies": {
       
       
    "foo": "git+ssh://[email protected]:foo/foo.git#v1.0.1",
       
       
}
      
      
      
      
       
       1.
       
       2.
       
       3.

foo The address of the component is git+ssh://{foo Code base ssh Address }#v{foo Version number of }

Such a configuration is very useful in the following scenarios ：

Many items in the group have the same function , It's a natural idea to pull out this function and make it into components . But every project has its own code base , The company also has no internal npm library , Where should the components be placed ？ You can create a new code warehouse for components , Put components here to develop 、 iteration . such , Each project can reference this component ： Only need dependencies Configure the components in the above form . As for the version of the component , Can pass git tag To control .

dependencies There are other configurations , Specific in here see .

devDependencies： Project dependency . adopt npm run install --save-dev The installed package will appear here . Mainly in the The development process Some tools relied on in . Usage and dependencies be similar .
bundledDependencies： Array , Packaging dependencies . If the bundledDependencies, Execute in the project npm pack When packaging items , Last generated .tgz In bag , Will contain bundledDependencies The dependencies configured in .bundledDependencies Dependencies in must be in devDependencies perhaps dependencies Stated in .
peerDependencies: Specifies the dependency of the current component to its version . If the component user installs the same dependency of other versions in the project , It will prompt for an error .
engines： Specify the... On which the project depends node Environmental Science 、npm Version, etc .
private： If it is set to true, Unable to get npm publish Post code .
bin： Used to specify the path of the executable file corresponding to each internal command . I won't talk about the specific usage here . For details, click here .

summary

This article covers package.json Most configuration items . My point is this ： If it's a business project of the company , about package.json, In general , I think we just need to pay attention to scripts,dependencies,devDependencies These three places are enough . For open source component libraries , At least pay attention to the points marked black above . Understand the meaning of important configuration , Improve development efficiency , Reduce the probability of stepping on the pit .

Written in the back

This article combines the official documents and my experience in my daily work , Elaborated package.json The meaning and usage of the items in this configuration file . In line with expectations .