Hello everyone, I’m cc, the first article I’m looking forward to, finally started writing. I know the title of the article does not surprise you (I am a science student after all, please forgive me). In fact, I have read many similar articles before, and each article has some bright spots, but there are inevitably some overlap and some places that are not covered. Next, I will summarize to let you understand the configuration of package.json in a second.

No, no, no, you have to believe it!! Without further ado, let’s get down to business

The name field

Naming rules:

The package name length should be greater than zero
All characters in the package name must be lowercase, that is, uppercase or mixed case names are not allowed
The package name can be a hyphen
The package name must not contain any non-URL-safe characters (because the name eventually becomes part of the URL)
Package names should not start with. Or _
Package names should not contain any leading or trailing Spaces
The package name should not contain any of the following characters: ~)(‘! *
Package names cannot be the same as core modules in Node.js, and cannot be the same as reserved/blacklisted names.
The package name cannot exceed 214
Cannot be the same as another module name

If you want to verify that a string is a valid NPM package name, you can use the validate-npm-package-name package to help you develop scaffolding

To check whether the module name is in use, run the following command: NPM view

The description field

Is a string used to write descriptive information. Help people find your modules when searching in the NPM library.

For example, if you search for a project at www.npmjs.com/, the description of the NPM package is drawn in red below.

The version field

NPM package version. Module versions in NPM packages are required to follow the semver. specification, which has a standard version number in X.Y.Z format.

Alpha: is an internal beta version, which is usually not released to the outside world and has many bugs. Generally only used by testers. Beta: Also known as a beta, this phase of the release is always adding new features. It will be released after alpha. Rc (Release Candidate) : final test version; A potential release candidate for the final product, or for release if there are no problems.

For example: 1.2.0-beta.1, 1.0.1-alpha.1, 3.0-RC.1

Keywords field

Keywords. Put the keywords in. This is an array of strings. This helps people find your package in NPM searches.

For example, if you search for a project at www.npmjs.com/, the key words of the NPM package are highlighted in red.

Homepage field

The home page address of the project. The general store is the official website address.

The bugs field is used as a feedback issue address or a mailbox for project problems. \

JavaScript copy code

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

License field

Specify a license for the NPM package to let users know their usage rights and any restrictions. The value of the field is usually the license identifier code — for example, a string like MIT or ISC that stands for MIT and ISC licenses. If you don’t want to provide a license, or if you explicitly don’t want to grant permission to use a private or undistributed package, you can use UNLICENSED as a license

You can view the full list of SPDX license ids. Ideally, you should choose an OSI-approved one

How to choose a license that can be recommended by reading this article

www.ruanyifeng.com/blog/2011/0…

"license": "MIT"
Copy the code

Author, polymorphism field

So author is a specific person, and ficol3 represents a group of people, all representing contributors to the current project. And everyone is an object. Has a name field and optional URL and email fields.

"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

But in package.json, there’s usually only one author field written. Where does that lead to source contributors on NPM and Github?

On NPM, NPM owner add

can be added successfully.

* * * *

Ficolin-3 now has its own rules on Github, which you can check out on the website.

Files field

The value of the files property is an array of module file names or folder names, in which case all files in that folder are also included (unless the file is excluded by some other configuration).

You can create a.npmignore file at the root of the module. Files written to this file are excluded even if they are written to the files property. The npmignore file works similarly to the.gitnore file. If a.gitignore file exists and.npmignore is missing, the contents of the.gitignore file will be used.

Always include some files, regardless of Settings:

package.json
README
LICENSE / LICENCE
The file in the “main” field

For example, in the element-UI source, the files field contains the following:

  "files": [
    "lib",
    "src",
    "packages",
    "types"
  ],
Copy the code

When we view node_modules after NPM install, we see the following file: check out this article on how to generate the change log.

Fundig field (sponsor)

You can specify an object that contains a URL that provides up-to-date information about methods to help develop packages, or a string URL, or an array of the following:

{
  "funding": {
    "type" : "individual",
    "url" : "http://example.com/donate"
  },

  "funding": "http://example.com/donate",

  "funding": [
    {
      "type" : "individual",
      "url" : "http://example.com/donate"
    },
    "http://example.com/donateAlso",
    {
      "type" : "patreon",
      "url" : "https://www.patreon.com/my-account"
    }
  ]
}
Copy the code

This can be viewed through NPM Fund

Main field, Module field, browser field

Main: Defines the entry file for the NPM package, which can be used by both Browser and Node environments
Module: Entry file that defines the ESM specification for NPM packages. Browser and Node environments can use this file
Browser: defines the entry file for NPM packages in browser environment

Unpkg field and jsDelivr field

These two fields are to do CDN optimization services

unpkg

Unpkg applies to everything on NPM. Use it to quickly and easily load any file from any package using the following URL. If our NPM package is accessed through unpkg.com, there are two ways.

First: Create a umD file in the root directory and store the path to the file to be accessed in the following format:

unpkg.com/:package@:version/:file // unpkg.com/[email protected]/umd/react.production.min.js unpkg.com/[email protected]/umd/react-dom.production.min.jsCopy the code

Json: add unpkg to package.json to store the path of the file to be accessed. If not, access main

// For example: unpkg.com/jquery unpkg.com/foreign-clCopy the code

**** Note: The file must be in UMD format.

jsDelivr

Access to NPM, Github, wordpress and all of the above packages

How to access Github

https://cdn.jsdelivr.net/gh/ user name/warehouse name @ version number/directoryCopy the code

Access to NPM

Package name @ https://cdn.jsdelivr.net/npm/ version number/directoryCopy the code

Bin field

The bin item is used to specify the location of the executable file for each internal command. If you are writing a Node tool, you must use the bin field (NPM itself is installed as an executable via the bin property).

When we write a CLI tool, we need to specify the tool run command, such as the common webpack module, his run command is webpack. In the source code, the package.json file is configured as follows:

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

When installing the module, if it is installed globally, NPM will create a soft link for the file configured in bin in the bin directory (for Windows system, the default will be in C:\Users\username\AppData\ NPM directory), if it is installed locally, A soft link is created in the./node_modules/.bin/ directory within the project.

Man field

Make a file or an array of files for the man command on Linux to find document addresses

Directories field

CommonJs uses directories to map out ways to describe the structure of a module, look at the PACKage. json file for NPMregistry.npmjs.org/npm/latest, you can find that there is the content of this field.

directories.lib

Tell the user where the lib directory is in the module. If you specify the bin directory here, the files under this configuration will be added to the bin directory. If you have already configured the bin directory in package.json, this configuration will have no effect.

directories.man

Specify a directory filled with man files. This is a syntax sugar for configuring man files.

directories.doc

Put some Markdown files in this directory.

directories.example

Put in some sample scripts.

The repository field

Specifying a code location is helpful for people who want to contribute code to your project. The URL should be a public address

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

If the package’s package.json is not in the root directory (for example, if it is part of monorepo), you can specify the directory it is in:

{
  "repository": {
    "type": "git",
    "url": "https://github.com/facebook/react.git",
    "directory": "packages/react-dom"
  }
}
Copy the code

Scripts field

The scripts property is an object that specifies the commands that need to be executed during each phase of the project lifecycle. Key is the life cycle event, and value is the command to execute. See docs.npmjs.com/misc/script…

The config field

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

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

The value of the Config field can then be referenced in the server.js script.

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

Dependencies field

The Dependencies field specifies the module on which the project runs.

Install a package by using the command NPM I XXX -s or NPM I XXX –save. NPM 5.x can start by omitting –save, meaning that if NPM install XXX is executed, NPM will also add package dependencies to package.json. To turn this feature off, use NPM config set Save false.

If you simply write a package name, install the latest version of the package currently in NPM Registry

In practice, production dependencies fall into several categories: toolkits, component libraries, front-end frameworks, and so on.

Using urls as development dependencies:

You can specify tarball urls instead of version ranges. (Generate a tarball URL with NPM Pack)

NPM install https://normal-test-use.oss-cn-beijing.aliyuncs.com/0.0.1/foreign-cl-0.0.1.tgzCopy the code

Use git urls as development dependencies:

<protocol>://[<user>[:<password>]@]<hostname>[:<port>][:][/]<path>[#<commit-ish> | #semver:<semver>]
Copy the code

It must be git, git+ SSH, git+ HTTP, git+ HTTPS, or git+file.

Use GitHub URLs as a development dependency:

{
  "dependencies": {
    "express": "expressjs/express",
  }
}
Copy the code

Using local paths as development dependencies:

{ "dependencies": { "react": ".. /react" } }Copy the code

Version:

For more information about specifying version ranges, see Semver.

Here are a few common ones:

~ version will match the most recent minor version dependencies, for example ~1.2.3 will match all 1.2.x versions but not 1.3.0
^version will match the latest large version dependencies, for example ^1.2.3 will match all 1.x.x packages, including 1.3.0, but not 2.0.0
*version This means to install the latest version of the dependency package
Version The version must match the version exactly
< version Is less than the version
<= version Less than or equal to the version

DevDependencies field

Development environment dependencies

Use NPM I -d or NPM I –save-dev

In real development, there are a few categories that can be classified as development dependencies: build tools, preprocessors, test tools, Babel, ESLint, typescript.

For more information about the specified version range, see above.

PeerDependencies field

Peer dependencies: Describes a “dependency” that expresses a plug-in and its host package. Something like, “I only work when I plug in version 1.2.x of my host package, so if you install me, make sure it works with compatible hosts.

For example, in Element-Plus, the vUE version of the project is required to be at least 3.1.x, and if we had installed the ve2. X version, the installation would not have been successful.

"PeerDependencies ": {"vue": "3.1.x"},Copy the code

PeerDependenciesMeta field

When a user installs your package, NPM will warn if the package specified in peerDependencies is not already installed. The peerDependenciesMeta field is used to provide NPM with more information on how peer dependencies are used. Specifically, it allows peer dependencies to be marked as optional.

For example, in Vite, peerDependencies and peerDependenciesMeta are as follows, and sass, Stylus, and less are marked as optional.

  "peerDependencies": {
    "less": "*",
    "sass": "*",
    "stylus": "*"
  },
  "peerDependenciesMeta": {
    "sass": {
      "optional": true
    },
    "stylus": {
      "optional": true
    },
    "less": {
      "optional": true
    }
  },
Copy the code

If sASS, Stylus, or LESS is not installed in the project, the following warning is displayed:

BundledDependencies field

Bundled dependencies are packaged with the NPM pack as TGZ.

For example, the package.json file for foreign-cl looks like this:

{"name": "foreign-cl", "version": "0.0.1", "main": "index.js", "bundledDependencies": ["jquery"], "dependencies": {"jquery": "^3.6.0", "moment": "^2.29.1"}}Copy the code

When we execute the NPM pack, the foreign-Cl-0.0.1. TGZ package is generated

Node_modules in this TGZ package contains only jquery.

Private fields

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

"private": true
Copy the code

OptionalDependencies field

For a dependency package, the installation will fail if it is not found in the mirror repository.

{" name ":" my - vue - app ", "version" : "0.0.0", "dependencies" : {" vue ":" ^ 3.2.16 ", "test111" : "^ 1.2.0"}}Copy the code

If you want NPM to continue installing, you can put it into the optionalDependencies object.

{" name ":" my - vue - app ", "version" : "0.0.0", "optionalDependencies" : {" test111 ":" ^ 1.2.0 "}, "dependencies" : {" vue ": "^ 3.2.16}}"Copy the code

PublishConfig field

The configuration used when the NPM package is published is an object in which we can set tag, Registry, access

"PublishConfig" : {" tag ":" 1.0.0 ", "the registry" : "https://registry.npmjs.org/", "access" : "public"}Copy the code

OS field

You can specify which operating system your module should run on

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

For example, in foreign-cl, package.json looks like this:

{" name ":" foreign - cl ", "version" : "1.0.1," "OS" : [" Linux "]}Copy the code

When we download from Windows, we get the following error:

CPU field

Restricted modules can only run on a certain architecture CPU, same as the OS field.

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

Engines field

Specify the environment in which the project will work. Unless the user sets the enginee-strict tag, this field is only recommended. Dependencies are not affected if the user version does not match the specified value.

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

Did you think it was over?

There is also a workspace field, as well as some fields (such as Broswer, main, Modules, etc.), which will be covered in detail in the next article.

If you find any problems, please feel free to correct them. The author will reply as soon as he sees them.

If this article is helpful to you, please manually click “like” to inspire the author.

Standing on the shoulders of giants

Unpkg.com/ docs.npmjs.com/cli/v6/conf www.jsdelivr.com/… www.cnblogs.com/tzyy/p/5193… Juejin. Cn/post / 698717… Zhuanlan.zhihu.com/p/56002037 www.cnblogs.com/murenziwei/… www.yht7.com/news/163530

Package. json configuration details, so that you can see (top)