Analysis of package.json

There is a package.json file in every front-end project. Do you know it? Take a few minutes to reexamine this familiar stranger.

How to generate package.json

npm init -y quick generation in the project folder. -y represents one way yes . Open the file and we see the following information.

{
  "name": "package-json",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Introduce the above fields one by one:

• name package name, required field
• version package version, required field
• description package description information, one sentence introduces the purpose of this package
• main package entry file.
  For example, require('package-json') , which is equivalent to using the package index.js. This field is more common in the development of npm packages, and we don't have much contact with it as a cut figure.
• scripts package execution script, the commonly used npm start , npm run dev , npm run build are registered here.
• keywords keyword is similar to description, used to introduce the purpose of the package
• author package creator
• license package protocol, used to specify whether to open source, whether to pay

package.json of the web project

Most developers work around web development. Let's take a look at the common configuration fields dependencies , devDependencies , private , scripts ...

dependencies & devDependencies

Interviewer: Please tell devDependencies the difference between dependencies and 061585eeb2bfbb?

Simple, dependencies are the dependencies of the production environment, execute npm install -S xxx when installing the package; devDependencies are the dependencies of the development environment, and the installation package needs to execute npm install -D xxx

What do production environment and development environment refer to? If I accidentally install a dependency like react or vue into the devDependencies list, can the project still run?

As far as web projects are concerned, the author believes that the essential difference between dependencies and devDependencies Where the package is installed, the project can be built and run normally. The difference lies mainly in semantic expression.

dependencies often means that the code that depends on the package will be included in the product after the package is built, which is indispensable in the operation of the production environment.

devDependencies refers to those tools in the development and construction process, such as webpack for construction, eslint for code inspection, and babel for code escape, which are all dependent on the development environment. The purpose of their existence is to help us safely and conveniently convert the developed code into executable code in the user's browser.

There is another difference. npm install --production=true will not install devDependencies , only the dependencies of dependencies . Generally no one will control this variable.

private

"private": true is set in package.json, npm will refuse to publish it.
Most web projects do not need to be submitted to the npm repository. It is recommended to set private to true.

By the way, under the monorepo boom, everyone will set the 061585eeb2c096 in the root directory of the monorepo project to true to prevent any partner private

scripts

scripts A script that controls the life cycle of the project. Think about what npm run dev, npm run build, and npm run lint have done every day. Just look at the scripts configuration.

If you want to understand the engineering implementation of team projects, it is also recommended to start with the scripts configuration and read the script files corresponding to the commands a little bit. You are the engineering boss.

scripts needs to focus on is the command hooks pre and post . The hook can register the pre-command and post-command of a certain command.
Write an example:

{
  "scripts": {
    "prexxx": "echo 'start~'",
    "xxx": "echo 'xxx running'",
    "postxxx": "echo 'end!'"
  }
}

When we execute npm run xxx, we will see the following results. prexxx , postxxx are executed automatically.

Purpose: Execute lint before commit, automatically install packages for users before npm run dev, etc.~

Think about what else can be done, welcome to discuss.

engines

It is difficult for us to guarantee the uniformity of the development environment among colleagues. For example, the node versions of different developers are inconsistent. Some are 8.x, some are 10.x, and some are 14.x. Let a newcomer ask you what version of node you use, whether you are tired or not. Configure engines

"engines": {
  "node": ">=12.10.0 <15"
}

The above version is written by me, if the developer’s version does not meet the requirements, the console will report an error and guide the user to correct it, avoiding word of mouth

Package.json for non-web projects

The fields described earlier are also applicable. There are several properties that are commonly used and useful for package projects.
Such as main , files , bin

main

As mentioned above, the entry file of the package. The default is index.js in the project root directory.

"main":"./lib/index.js",

If your package name is package-json, when the user code is require('package-json') , it is equivalent to ./lib/index.js file in your package directory.

files

files used to determine which files are released to the npm repository. Files that are not in files cannot be accessed by the user of the package, and main must also exist in this list.

"files": [
    "src",
    "dist/*.js",
    "types/*.d.ts"
  ],

bin

Command line tool entry. When your package provides a command line tool, you need to specify an entry point for the command line tool. Correspondence between the command name and the locally specifiable file. Reference may look VUE-cli-Service source

"bin": {
    "vue-cli-service": "bin/vue-cli-service.js"
  }

If you are careful, you will find that there are many executable files in the node_modules/bin folder of our project.

For the user: the local installation package bin executable file will be linked to the ./node_modules/.bin/ ; global installation package bin will be soft to /usr/local/bin next.

dependencies & devDependencies

When our project is provided as a package for others to use, the developer executes npm install We need to note that only dependencies will be installed as a dependency of the package, and devDependencies will be ignored. At this point, I believe everyone can finally understand what is a development environment and what It's the production environment.

The development kit needs to be careful not to install production dependencies into devDependencies by mistake, which will cause your users to fail to run.

other

Suggestion: If you have any engineering questions, first look at the project configuration file for yourself, and then consult a colleague if you don’t understand it. Otherwise it may be sprayed~

Follow me, don't get lost