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, contains
type
andurl
field
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,
require
This file is loaded when imported, usually in the root directory by defaultindex.js
File,browser
The environment andnode
It can be used in any environment - moduleTo define the
npm
Package ESM specification entry file,browser
The environment andnode
It 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.x
The version number
andMinor 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 change
The 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
Other articles:
- Take an hour to quickly learn all the features of ES6 to ES12
- Create your own CLI in 10 minutes
- Build the React mobile framework out of the box
- Build your Own Ant Design Pro V5