1. An overview of the

From the time we started working on the front end, there was usually a package.json file at the root of each project, which defined the various modules needed for the current project, as well as the configuration information of the project (such as name, version, license, etc.).

When the NPM install command is run, the required modules are automatically downloaded based on the configuration in the package.json file, which is the runtime and development environment required to configure the project.

For example, the following file has a simple project name and version number.

{
  "name" : "yindong"."version" : "1.0.0",}Copy the code

The package.json file is a JSON object, as evidenced by its.json suffix, and each member of the object is a setting for the current project. For example, name is the project name and version is the version number.

Of course, most people don’t really care about package.json configuration; they apply dependencies or devDependencies configuration more often.

Here’s a more complete package.json file that explains what each field really means.

{
    "name": "yindong"."version":"0.0.1"."description": "antd-theme"."keywords": ["node.js"."antd"."theme"]."homepage": "https://zhiqianduan.com"."bugs": {"url":"http://path/to/bug"."email":"[email protected]"},
    "license": "ISC"."author": "yindong"."contributors": [{"name":"yindong"."email":"[email protected]"}]."files": ""."main": "./dist/default.js"."bin": ""."man": ""."directories": ""."repository": {
		"type": "git"."url": "https://path/to/url"
	},
    "scripts": {
      "start": "webpack serve --config webpack.config.dev.js --progress"
    },
    "config": { "port" : "8080" },
    "dependencies": {},
    "devDependencies": {
        "@babel/core": "^ 7.14.3"."@babel/preset-env": "^ 7.14.4"."@babel/preset-react": "^ 7.13.13"."babel-loader": "^ 8.2.2"."babel-plugin-import": "^ 1.13.3"."glob": "^ 7.1.7"."less": "^ 3.9.0"."less-loader": "^ 9.0.0"."style-loader": "^ 2.0.0." "."webpack": "^ 5.38.1"."webpack-cli": "^ 4.7.0"."webpack-dev-server": "^ 3.11.2"
    },
    "peerDependencies": {
        "tea": "2.x"
    },
    "bundledDependencies": [
        "renderized"."super-streams"]."engines": {"node": "0.10.x"},
	  "os" : [ "win32"."darwin"."linux"]."cpu" : [ "x64"."ia32"]."private": false."publishConfig": {}}Copy the code

2. The name field

The most important fields in the package.json file are the name and version fields, which are mandatory. The name and version together constitute an identifier that is considered to be completely unique. Changes to the package should accompany changes to the version.

The name must contain a maximum of 214 characters. Or _, cannot have uppercase letters, because the name ends up as part of the URL and therefore cannot contain any non-URL-secure characters. NPM officials advise us not to use the same name as the core node module. Do not add JS or node to the name. You can specify the runtime environment using Engines if desired.

This name is passed to require as a parameter, so it should be short, but also reasonably descriptive.

3. The version field

Version The version format is X.X.X and must comply with this rule.

The most important fields in the package.json file are the name and version fields, which are mandatory. The name and version together constitute an identifier that is considered to be completely unique. The version in each release cannot be the same as the existing version.

4. The description field

Description is a string used to write a description. Help people find your module when searching in the NPM library.

5. Keywords field

Keywords are an array of strings that will help people find your module when searching in the NPM library.

6. Homepage field

Homepage the homepage address of the project.

7. Bugs fields

Bugs are used as an issue address for feedback on project problems or an email address.

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

8. License fields

A license is the current project’s agreement that lets users know what permissions they have to use your module and what restrictions there are on using it.

"license" : "BSD-3-Clause"
Copy the code

9. That leads to a coding coding sequence

Author is a specific person, and cn3 denotes a bunch of people that all represent shareers of current projects. And everyone is an object. Has a name field and an optional URL and email field.

"author": {
  "name" : "yindong"."email" : "[email protected]"."url" : "https://zhiqianduan.com/"
}
Copy the code

You can also write it as a string

"author": "yindong [email protected] (https://zhiqianduan.com/)"
Copy the code

10. Files field

The value of the files property is an array of file names or folder names under the module. If it is a folder name, all files in the folder will also be included (unless the files are excluded by some other configuration).

You can create a.npmignore file in the module root directory. Files written in this file will be excluded even if they are written in the files property. This file is written in a similar way to.gitignore.

11. The main field

The main field specifies the entry file to load, which will be loaded when require imports. The default value for this field is index.js under the module root directory.

12. Bin field

The bin entry is used to specify the location of the executable file corresponding to each internal command. If you’re writing a Node tool you’re going to use the bin field.

When we write a CLI tool, we need to specify the running command of the tool, such as the common Webpack module, whose running command is webpack.

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

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

Module installed in dependency mode, if the bin option exists. Generate the corresponding file at node_modules/.bin/. Npm will look for this file and set up a symbolic link under node_modules/.bin/. Since the node_modules/.bin/ directory adds the system PATH variable at runtime, these scripts can be invoked directly by command without a PATH when running NPM.

All node_modules/.bin/ commands can be run in the NPM run format. On the command line, type NPM run and then press TAB to display all available commands.

13. Man field

Man specifies the location of the man document for the current module.

"man": ["./doc/calc.1" ]
Copy the code

14. Directories field

Directories specify ways to describe the structure of the module to tell the user where each directory is located.

15. The repository fields

Specifying a code location is helpful for people who want to contribute code to your project

"repository" : {
  "type" : "git"."url" : "https://github.com/npm/npm.git"
}
Copy the code

16. Scripts fields

Scripts specifies the NPM command line abbreviation for running the script command. For example, start specifies the command to execute when running NPM run start.

"scripts": {
  "start": "node ./start.js"
}
Copy the code

Use the scripts field to quickly execute shell commands, which can be understood as alias.

Scripts can be run directly using modules installed in node_modules, as opposed to running directly using the NPX command.

"scripts": {
  "build": "webpack"
}

// npm run build
// npx webpack
Copy the code

17. The config fields

The config field is used to add environment variables to the command line.

{
  "name" : "yindong"."config" : { "port" : "8080" },
  "scripts" : { "start" : "node server.js"}}Copy the code

The server.js script can then reference the value of the config field.

console.log(process.env.npm_package_config_port); / / 8080
Copy the code

The user can change this value by using the NPM config set.

npm config set yindong:port 8000
Copy the code

18. Dependencies field, devDependencies field

The dependencies field specifies which modules the project depends on to run, and devDependencies specifies which modules the project needs to develop.

Their value is an object. Each member of the object, consisting of the module name and the corresponding version requirement, represents the dependent module and its version range.

Use the –save parameter when installing dependencies to write the module into the dependencies attribute, and –save-dev to write the module into the devDependencies attribute.

"devDependencies": {
        "webpack": "^ 5.38.1",}Copy the code

Each entry in the object is represented by a key-value pair, preceded by the module name and followed by the version number of the corresponding module. The version number follows the “Major version. Minor version. Minor version “format.

Release notes

Fixed version: For example, 5.38.1. Only the specified version is installed. Tilde: For example, ~5.38.1 indicates that the latest version of 5.38.x (at least 5.38.1) is installed, but 5.39.x is not installed. In other words, the major and minor version numbers are not changed during the installation. Insert id: such as ˆ5.38.1, which indicates that we install the latest version of 5.x.x (no later than 5.38.1), but do not install 6.x.x, that is, we do not change the major version number when installing. Note that if the major version number is 0, the insert number behaves the same as the Tilde. This is because at this point in the development phase, even minor version changes can cause incompatibility in the program. Latest: Installs the latest version.

19. PeerDependencies fields

When we develop a module, we will have a problem if the current module and the dependent module depend on a third party module, and they depend on two incompatible versions.

For example, your project depends on version 1.0 of modules A and B, and module A itself depends on version 2.0 of module B.

In most cases, this is not a problem, and both versions of module B can run side by side. There is, however, a problem where the dependency is exposed to the user.

The most typical scenario is A plug-in, such as module A is A plug-in for module B. The user installs module B of version 1.0, but plug-in A can only work with module B of version 2.0. At this point, the user will have A problem if he passes an instance of version 1.0 B to A. Therefore, A mechanism is needed to remind users when templates are installed that IF A and B are installed together, then B must be A 2.0 module.

The peerDependencies field is used for the plug-in to specify the version of the main tool it needs. You can use the peerDependencies field to limit the use of the Myless module to the 3.9.x version of the LESS module.

{
  "name": "myless"."peerDependencies": {
    "less": "3.9.x"}}Copy the code

Note that as of NPM 3.0, peerDependencies is no longer installed by default. It doesn’t default out when it’s initialized.

20. BundledDependencies fields

BundledDependencies Specifies the modules that will be packaged together when published.

21. OptionalDependencies fields

If a dependent module is available and you want NPM to continue running if the module cannot be found or obtained, you can place the module dependency in the optionalDependencies configuration. This configuration is written in the same way as in dependencies, except that a module installation failure does not cause NPM Install to fail.

22. The engines fields

The Engines field specifies the platform on which the module runs, such as a version or browser of Node or NPM.

{ "engines" : { "node" : "> = 0.10.3 < 0.12"."npm" : "~ 1.0.20"}}Copy the code

23. The OS field

You can specify which operating system your module can only run on

"os" : [ "darwin"."linux"."win32" ]
Copy the code

24. The CPU fields

Limited modules can only run on cpus of a certain architecture

"cpu" : [ "x64"."ia32" ]
Copy the code

25. Private fields

If this property is set to true, NPM will refuse to publish it to prevent a private module from being inadvertently published.

"private": true
Copy the code

26. PublishConfig fields

This configuration takes effect when the module is published and is used to set the set of values to be used for publication. If you don’t want your module to be tagged as current by default, or published to a public repository by default, you can configure the tag or repository address here.

Usually publishConfig will be used in conjunction with private if you just want the module to be published to a specific NPM repository, such as an internal repository.

"private": true."publishConfig": {
  "tag": "1.0.0"."registry": "https://registry.npmjs.org/"."access": "public"
}
Copy the code

27. PreferGlobal fields

The value of preferGlobal is a Boolean to indicate whether to display a warning when the user does not install the module as a global module (that is, without the -global argument), indicating that the module is intended to be installed as a global module.

"preferGlobal": false
Copy the code

28. The browser field

Browser Specifies the version of the template used by the browser. A browser packaging tool like Browserify that tells you which file to package.

"browser": {
  "tipso": "./node_modules/tipso/src/tipso.js"
},
Copy the code

Reference source

  • [1] npm package.json
  • [2] javaScript Standard Reference Tutorial