Help you fully understand the package.json file by opening a fruit store

Json file, package.json, package.json, package.json, package.json Why does every project have this file? What does it do? What are the fields? And we’ll do that step by step

What exactly is package.json?

When you open any project, you’ll find a package.json file in the root directory, which you can tell by its.json suffix

So what is this file for?

In fact, the package.json file describes all configuration information for the current project (such as name, version, etc.) as well as all NPM package information

Next, I will explain package.json by opening a fruit store.

Before we start, let’s take a look at the package.json configuration, using this as an example:

{
  "name": "domesy"."version": "1.0.0"."description": 'A fruit shop in Domesy with fresh fruit'."keywords": ["react"."antd"."antdpro"]."main": "index.js"."scripts": {
    "start" : "node server.js"."test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Domesy"."bugs": {
    "url": "https://github.com/DomeSy"."email": "[email protected]"
  },
  "files": []."license": "ISC"."licenses": [{"type": ""."url": ""}]."config": {
     "port" : "8088"
  },
  "engines": {
    "node": "> = 0.10.3 < 0.12"
  },
  "os": [ "linux"."win64"]."cpu" : [ "x64"."ia32"]."private": true."publishConfig": {
    "tag": "1.0.0"."registry": "https://www.npmjs.com/package/domesy-cli"."access": "public"
  },
  "repository": {
    "type": "git"."url": "https://github.com/DomeSy"."directory": "Descriptive discourse"
  },
  "preferGlobal": false."dependencies": {},
  "devDependencies": {},
  "peerDependencies": {},
  "optionalDependencies": {},
  "bundledDependencies": true."browserslist": {
      "0.2%" >."not dead"."not op_mini all"]."development": [
      "last 1 chrome version"."last 1 firefox version"."last 1 safari version"]}}Copy the code

Create package. Json

If you want to open a fruit store, you must first set up a store, as long as there is a store, can proceed to the next step, there are two ways to create

Manual creation: Create a package.json file in the root directory yourself
Automatic creation: find a younger brother, say NPM init to younger brother, and tell some information about it, let him automatic creation

One thing to note here is that the information we use must be neat in case someone checks you later, so the format must be strictly JSON

Attribute is introduced

The name and version

When we purchase our own store, first of all, the store needs to have its own name, and secondly, we need to record the version of the store, so as to record it through the name and number

Name and version form a unique identifier, which also constitutes a unique representation of the NPM platform, preventing others from finding the wrong store and buying pirated fruit

NPM does not allow you to exist if your store name is the same as another store name.

So name and version are the two most important and required fields in package.json

If we want to set up shop here, we have to follow the rules of the community

Name: must contain no more than 214 characters and cannot start with a period (.), underscore (_) or uppercase letter. The reason is that our name will eventually become part of the URL and therefore cannot contain any non-URL-safe characters
Version: indicates that the version is in the X.X.X format, for example, 1.0.0. If the package is sent in NPM, the version numbers are different

The description and keywords

When we open the store, we need to think of words to tell the customer how fresh the fruit is, for example, sweet and delicious

Description: A string of information, which is also displayed in the results of NPM Search, to remind customers that this store meets your needs
Keywords: keyword, array, its function is similar to description, the description of the keywords extracted, can also be found through NPM search

homepage

We need to tell customers where our stores are, where they are

Homepage: The home address of the project

Used the React friend should know, when we use the NPX create a project, the packaging will find can’t find the address, the reason is the React to use lazy loading package server can only be found after buildle. [r]. Hash js, so this is we need to configure the “homepage” : “.”, make him point to the path

Author, Polymorphism, and Maintainers

When we open this store, there will be a founders and some shareholders, and there will be some maintainers that come in to help you with the store.

Auto: author, string | object
Ficol3: List of contributors, Array
Maintainers: Maintainers list, Array

Note: They are all shared by the whole fruit store, and each person is an object or string with three fields: name, address and email. Name is mandatory, while URL and email are optional

Take author as an example:

  // is an object"The author": {"name":"Domesy","email":"[email protected]","url":"http://doemsy.cm"
  } 
  
  // is a string
  "author": "Domesy [email protected] (http://doemsy.cm)"
Copy the code

bugs

As a store, there will certainly be customer dissatisfaction, we have to give customers an address, used to feedback the existing problems

Bugg: Issue address or email address used for project feedback

  "bugs": {
    "url": "https://github.com/DomeSy"."email": "[email protected]"
  }
Copy the code

License and licenses

After opening the shop, we need some organization’s approval, such as hygiene certificate

Lincense: Open source protocol name for the package
lincense: Multiple package open source protocol name, array, containstypeandurlfield

Main, Module, and Browser

This field can be understood as the entrance to the store. Only through this entrance can we enter the store

main: specifies the entry file to load,requireThis file is loaded when imported, usually in the root directory by defaultindex.jsFile,browserThe environment andnodeIt can be used in any environment
moduleTo define thenpmPackage ESM specification entry file,browserThe environment andnodeIt can be used in any environment
Browser: defines the entry file for NPM packages in browser environment

Dependencies and devDependencies

Once our store is open, we need to choose the fruit to consume in devDependencies, which is the fruit we sell to customers

When we use NPM install to install node_module, we are restocking our fruit store

devDependencies: Develop projectsThe development ofRequired modules, commands--save-dev= >-D
dependencies: Develop projectsrunRequired modules, commands--save= = >-S

Note: They are all objects, represented by key-value pairs, consisting of attribute names and version numbers

Rules for version numbers:

Fixed version: for example: 7.3.1, the installed version is 7.3.1
Tilde: for example: ~7.3.1, install the latest version of 7.3.x (but not less than 7.3.1), not install 7.4.xThe version numberandMinor version number
Insert number: for example: ^7.3.1, then install the latest version of 7.x.x (but not less than 7.3.1), will not install 8.x.x, that is: install, do not changeThe version number

PeerDependencies, bundledDependencies, and optionalDependencies

And when we have fruit, we can try to make drinks out of fruit blends,

I have to use watermelons from Nanjing as raw materials, and neither can watermelons from Suzhou. However, our fruit shop owner buys watermelons from Suzhou, but we still want to make this drink, so we must use watermelons from Nanjing.

To put it simply, the entire project depends on module A and module B 1.0, but A itself depends on module B 2.0, which means that in order to use modules A and B, it must be version 2.0 of B

The purpose of peerDependencies is for plug-ins to specify the version of their tool, and after NPM 3.0, there is no need to install peerDependencies

BundledDependencies: You need to add to every other beverage you sell
OptionalDependencies: consider them to be optionalDependencies that do not lead to the failure of the entire beverage. That is, a dependency under this condition does not cause NPM install to fail even if the installation fails

files

When there is some fruit left, we are reluctant to throw it away, but we will separate it from the good fruit

Files: the file name or folder name under the module, array, but this field is rarely used, you can implement the same use with.npmignore, similar to the use of.gitignore

bin

Some fruits are very popular, and we can say some code words to indicate that the fruit is out of stock, very popular, to order operations

Bin: specifies the location of the executable file corresponding to the internal command. This field is very useful, especially in cli, where this command is used.

Here, anyone interested can take a look at 10 minutes to create your own CLI

    "bin": { "domesy": "bin/domesy.js" },
Copy the code

The code in the bin/domesy.js file is executed when we execute the domesy command

If our package is installed as a dependency, if there is bin, it will generate the corresponding file at node_modules/.bin/ and then create a symbolic link

All commands in node_modules/.bin/ can be run in the NPM run [command] format. (You can TAB to view the command)

directories

Next, we classify the fruits to tell customers where you can buy the corresponding fruits

Directories: Information about a project’s directory structure that tells the user where each directory is located

repository

We can tell them the location of our fruit shop

Repository: a repository of packages containing fields such as type, URL, and directory. It is useful for people contributing to your code

  "repository": {
    "type": "git"."url": "https://github.com/DomeSy"."directory": "Descriptive discourse"
  }
Copy the code

script

This is the equivalent of buying fruit offline, online, or testing the quality of fruit,

Script: Specifies the command to run the script, which is short for NPM command, such as start command

 "scripts": {
     "start": "cross-env UMI_ENV=dev umi dev",}Copy the code

Note: Scripts can use modules installed in node_modules, as opposed to NPX running directly, such as:

NPM use:npm run start
NPX use:npx cross-env UMI_ENV=dev umi dev

config

We can not only put fruit, our storefront also needs to be renovated, to make our store more clean and comfortable

Config: used to add command line environment variables

Such as:

 {
   "name": "domesy"."config": {
       "port": "8088"
   },
   "script": {
      "start" : "node server.js"}}Copy the code

We print the corresponding value process.env.npm_package_config_port in server.js

Then run NPM run start to see that the printed value is 8088

engines

When we open the fruit store, there will be hours, not all the time

The Engines: field specifies the platform on which the module is running, such as limiting the version of Node

 {
  "engines": {
    "node": "> = 0.10.3 < 0.12"}},Copy the code

OS and CPU

Our fruit store can have multiple sales platforms, such as Taobao, jingdong and so on

OS: You can specify which operating system CPU to run on: you can limit modules to run on cpus of a certain architecture

{
  "os": [ "linux"."win64"]."cpu" : [ "x64"."ia32"],}Copy the code

private

The store publishes it on certain platforms to prevent others from unintentionally listing it for sale on other platforms

Private: If true, publishing will be rejected on the NPM platform in order to prevent a private module from being published

{
  "private": true,}Copy the code

publishConfig

When selling fruits, each platform needs different kinds of fruits. For example, meituan needs more watermelon and Ele. me needs more winter melon. At this time, we can provide different fruits for the two platforms

PublishConfig: a specific module is published to a specific NPM library, usually in conjunction with private, and has three fields: Tag, Registry, and Access

{
  "publishConfig": {
    "tag": "1.0.0"."registry": "https://www.npmjs.com/package/domesy-cli"."access": "public"}}Copy the code

preferGlobal

Each module of the fruit store can have the same decoration

PreferGlobal: Indicates that the user has not set this module as a global module, like –global

{
  "preferGlobal": false,
}
Copy the code

browserslist

The rules of each platform are different, and we need to meet the needs of each platform to do something to meet the conditions of the fruit

Browserslist: Provide shared browser support information in a project, such as Babel, etc. After providing the corresponding browser information, they will take different compilations for the browser information

{
  "browserslist": {
    "production": [
      "0.2%" >."not dead"."not op_mini all"]."development": [
      "last 1 chrome version"."last 1 firefox version"."last 1 safari version"]}}Copy the code

End

So far, the configuration of package.json is finished. This time, it will be explained by opening a fruit shop. If you can help you, please click “like” 👍🏻.

References:

npm package.json
Do you really understand package.json? Take a look, this is probably the most complete package parsing