In front-end development, we inevitably use the package manager to initialize the project, such as NPM and yarn. The shortcut command for initialization is similar to yarn init -y or NPM init -y. Of course, you can also generate the required file configuration step by step.

The initialization command is executedyarnThe sample

Yarn init Yarn init v1.22.10 question name (packageDesc): package-desc-project question version (1.0.0): yarn init yarn init v1.22.10 question name (packageDesc): package-desc-project question version (1.0.0): 1.0.0 Question description: a description for project question Entry point (index.js): main.js question repository URL: https://juejin.cn/user/2780044227521063 question author: Coder1921 question license (MIT):MIT question private: Success Saved package.json Done in 141.24s.Copy the code

Package. json list of projects

The above image is a simple version of the package contents. There are no fixed requirements for the contents of the package.json file. The only requirement is that the JSON format must be followed, otherwise it cannot be read by a program trying to access its properties programmatically.

Key attribute Description

  • versionIndicates the current version applied.
  • nameSet the name of the application/software package.
  • descriptionIs a short description of the application/package.
  • mainSet the entry file for the application.
  • privateIf you set it totrueCan prevent applications/packages from being accidentally published tonpm.
  • scriptsDefine a set that can be runnodeThe script.
  • dependenciesSet up the production environment as a dependent installationnpmList of packages.
  • devDependenciesSet development dependencies installednpmList of packages.
  • enginesThis section describes how to set the version dependency of the software package or application.
  • browserslistUsed to inform developers which browsers (and versions) to support.

Team collaboration attribute description

  • authorAuthor’s name
  • keywordsThe keyword of the item is easy to retrieve
  • descriptionDescription text of the project
  • contributorsProject contributor
  • bugsThe tracker for project issues is similar to the Issues page
  • homepageThe main page of the project
  • versionThe current version number of the project
  • licenseLicense certificate of the project
  • repositoryThe location of the project warehouse

Special Attribute Description

The package.json file can also host command-specific configurations such as Babel, ESLint, Typescript, Git, and so on. Each has unique properties, such as eslintConfig, Babel, and so on. They are command specific and you can find how to use them in the corresponding command/project documentation.

{"name": "package-desc-project", "version": "1.0.0", "description": "a description for project", "keywords": ["package", "description"], "main": "main.js", "repository": "https://juejin.cn/user/2780044227521063", "author": "Coder1921", "contributes" : {}, "homepage" : "the project home page", "license" : "MIT", "scripts" : {" start ": "Node. The main js"}, "dependencies" : {" react ":" ^ 17.0.2 ", "the react - dom" : "^ 17.0.2"}, "devDependencies" : {" rimraf ": "^ 3.0.2 semver", ""," ^ 7.3.5 "}, "engines" : {" node ":" > = 13.10.0 ", "NPM" : "> = 6.9.0"}, "browserslist" : ["> 1%", "last 2 versions", "not ie <= 8"] }Copy the code

Semantic versioning

The concept of semantic versioning is simple: all versions have three numbers: X.Y.Z, which represents the major version. This version is a patch version.

  • xThe first number is the major version.
  • yThe second number is the secondary version.
  • zThe third number is the patch version.
Symbol description of common version rules:
  • ^: Will only perform updates that do not change the left-most non-zero digit. If I say yes^ 1.0.0, when runnpm updateCan be updated to1.1.0,1.5.0And so on, but can’t update to2. *. *Or later.
  • ~: If yes is written~ 1.0.0, when runnpm updatewhenUpdate to the patch version: that is,1.0.1,1.0.3Ok, but1.1.0Can’t.
  • >: Accepts any version higher than the specified version.
  • > =: Accepts any version equal to or higher than the specified version.
  • < =: Accepts any version equal to or lower than the specified version.
  • <: Accepts any version later than the specified version.
  • =: Accept the exact version.
  • -: Accepts a range of versions. Such as:2.1.0-2.6.2.
  • ||: Sets a combination. For example,< 2.1 | | > 2.6.