This is the 11th day of my participation in the August More text Challenge. For details, see: August More Text Challenge

When we create a Node project, we need to create a package.json file that describes the various modules required for the project, as well as the project configuration information (such as metadata such as name, version, license, and so on).

You can use the NPM help package.json command on the command line to jump to the page to see how these fields are used. The following will be organized according to the document.

Basic fields

On the command line, use the NPM init command and fill in the fields

Name the project name

{
  name: "node"
}
Copy the code

Version Indicates the current version of the project

{
  version: "0.1.0 from"
}
Copy the code

Description Description of the item

{
  description: 'My package'
}
Copy the code

Main Specifies the main entry file for the project

{
  main: 'index.js'
}
Copy the code

Author Information about project authors, contributors. It can be written two ways. Email and URL are optional.

// Mode 1:
{
  "name" : "lio-zero"."email" : "[email protected]"."url" : "https://www.jianshu.com/u/3f644e66afa3"
}
​
// Mode 2:
{
  "author": "lio-zero <[email protected]> (https://www.jianshu.com/u/3f644e66afa3)"
}
Copy the code

Keywords Describe items using relevant keywords

{
  "keywords": ['admin', 'node', 'vue']
}
Copy the code

License (tells the user what to do and what not to do. Common: MIT, BSD-3-clause)

{
  "keywords": "MIT"
}
Copy the code

Scripts specifies the NPM command line abbreviation for the command that runs the script. For example, start specifies the command to be executed when running NPM run start.

"scripts": {
  "start": "node ./bin/xxx"./* npm start */
}
Copy the code

The Repository field specifies where the code is stored.

{
  "repository": {
    "type": "git"."url": "Put the github address of the project here."}}Copy the code

You can also add the -y parameter to generate the default package.json package:

{
  "name": "demo"."version": "1.0.0"."description": ""."main": "index.js"."scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "keywords": []."author": ""."license": "ISC"
}
Copy the code

The default package.json package generated by using NPM init -y removes a repository field, which can be added manually if needed.

Next we will introduce some other fields on top of this, all of which are optional.

Rely on

The Dependencies field specifies the dependencies of the production environment project. It is automatically generated when you add production dependencies, such as NPM I Express

{
  "dependencies": {
    "express": "^ 4.17.1"}}Copy the code

The devDependencies field specifies the dependencies of the development environment project. It is automatically generated when you add production dependencies, such as NPM I eslint -d

{
  "devDependencies": {
    "eslint": "^ 6.7.2." "}}Copy the code

PeerDependencies Compatibility dependencies. If your package is a plugin, this works.

{
  "peerDependencies": {
    "tea": "2.x"}},Copy the code

OptionalDependencies If you want NPM to continue executing even if some dependencies are not found, or if the installation fails. So these dependencies fit in here.

{
  "optionalDependencies": {···},}Copy the code

BundledDependencies Array of package names to bundle when publishing a package

{
   "bundledDependencies": ["renderized"."super-streams"]}Copy the code

configuration

The keys in the config field are exposed to the script as env environment variables.

{
  name: "node"."config": {
    "foo": "hello"}}Copy the code

You can use the config field in the application and the script will get the value when the user executes the NPM run start command.

console.log(process.env.npm_package_config_foo)
Copy the code

You can change this value using the following command.

$ npm config set node:foo hi
Copy the code

lint-staged

Before committing your code, do a code rule check to ensure that any code that enters your Git repository conforms to the code rules. While Lint can be slow to run on an entire project, Lint-Staged allows Lint to detect only files in the staging area, so it’s fast.

Installation and configuration

Husky and lint – staged

$ npm i husky lint-staged -D
Copy the code

Package. json configuration:

{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"}},"lint-staged": {
    "*.js": "eslint --fix"}}Copy the code

Git commit triggers pre-commit hooks, runs lint-staged commands, and executes eslint on *.js. Eslint should be configured in advance.

other

Homepage Of the project.

{
  "homepage": "https://www.jianshu.com/u/3f644e66afa3"
}
Copy the code

The URL or email address of the bugs project’s problem tracking system, which can be helpful for people experiencing software package problems.

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

Bin Many packages have execution files that need to be installed in the PATH. This field corresponds to a Map with a {command name: filename} for each element. The header of these executables needs to be #! The/usr/bin/env node.

{ 
  "bin": { 
    "npm": "./cli.js"."command": "./bin/command"}}Copy the code

Private is a Boolean value. If private is true, the package is guaranteed not to be published to NPM. This would prevent private Repositories from being accidentally released.

PreferGlobal is a Boolean value. Set this to true if your package is a command-line application that requires global installation.

{
  "private": true."preferGlobal": true
}
Copy the code

Browserslist specifies the browser version supported by the project.

{
  "browserslist": [
    "last 3 Chrome versions"."last 3 Firefox versions"."Safari >= 10"."Explorer >= 11"]},Copy the code

The Engines field specifies the platform on which the project is running, such as a version of Node or browser, and can also specify the applicable NPM version.

{
  "engines": {
    "node": "> = 12.16.2"."npm": "> = 6.14.8"}},Copy the code

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

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

Style specifies the location of the style file when used by the browser. Style file packaging tool Parcelify, which knows where the style file is packaged.

{
  "style": [
    "./node_modules/tipso/src/tipso.css"]}Copy the code

CPU Specifies the CPU model.

{
  "cpu" : [ "x64"."ia32"]."cpu" : [ ! "" arm".! "" mips"]}Copy the code

OS specifies what operating system the project can run on.

{
  "os" : [ "darwin"."linux"],}Copy the code

Files Specifies which files will be posted when you publish your project. If you need to exclude some files from your project, add a.npmIgnore file. This file is similar to gitignore.

{
  "files": [
    "src"."dist/*.js"."types/*.d.ts"],}Copy the code

PublishConfig is a Boolean value. Set this to true if your package is a command-line application that requires global installation.

EngineStrick is a Boolean value. Set this to true if you are certain that your program will only run on the engine specified.

Some special fields, such as prettier, UNpkg, Babel, and jest, are used with each tool plug-in.

The readme.md file is automatically generated from the package.json content

Here is a handy tool, the readME-mD-Generator, that automatically generates a nice readMe.md file from the contents of the package.json file

Readme-md-generator reads your environment (package.json, Git configuration…) To create the project’s readme.md file

use

Make sure NPX is installed (NPX 5.2.0 by default since NPM)

Simply run the following command at the root of the project and answer the question:

$ npx readme-md-generator
Copy the code

Or use the -y parameter to generate it by default

$ npx readme-md-generator -y
Copy the code

Let’s see the default generation with the following configuration:

{
  "name": "vue3"."version": "0.1.0 from"."private": true."description": "vue3-demo"."author": "lio-zero <[email protected]>"."license": "MIT"."engines": {
    "node": "> = 12.16.2"."npm": "> = 6.14.8"
  },
  "repository": {
    "type": "git"."url": "git+https://github.com/lio-zero/vue3.git"
  },
  "homepage": "https://github.com/lio-zero/vue3.git#readme"."keywords": [
    "vue3"."cli"]."scripts": {},
  "dependencies": {},
  "devDependencies": {}}Copy the code

The effect is as follows:

Of course, if you are not satisfied, you can also manually configure. 😏