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

How do I generate package.json

Perform NPM init -y quick build in the project folder. -y indicates yes. Opening the file 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"
}
Copy the code

The following fields are introduced one by one:

  • namePackage name. This parameter is mandatory
  • versionThis parameter is mandatory
  • descriptionPackage description information, a one-sentence description of the purpose of the package
  • mainPackage entry file.

Such as require(‘package-json’), equivalent to using the package’s index.js. This field is relatively common in the development of NPM packages, and we, as cutters, don’t have much exposure to it.

  • scriptsPackage to execute scripts, commonly usednpm start,npm run dev,npm run buildThey’re all registered here.
  • keywordsThe keyword, similar to description, describes the purpose of the package
  • authorPackage creator
  • licensePackage agreement, which specifies whether to open source and whether to pay

Package. json for web projects

Most developers work around Web development. Json dependencies, devDependencies, private, scripts…

dependencies & devDependencies

Interviewer: Tell me the difference between dependencies and devDependencies?

Run NPM install -s XXX to install dependencies. Run NPM install -d XXX to install devDependencies, which are dependent on the development environment

What are production and development environments? Does the project run if you accidentally install a dependency like React or Vue into the devDependencies list?

As far as Web projects are concerned, I don’t think dependencies and devDependencies are fundamentally different. The project builds and runs normally wherever the package is installed. The main difference lies in semantic expression.

Dependencies refer to the code that depends on the package after it is packaged into production.

DevDependencies refers to the development environment dependencies of tools such as WebPack, esLint, Babel, etc. They exist to help us safely and easily convert the code we develop into code that the user’s browser can execute.

NPM install –production=true installs dependencies under devDependencies. Nobody normally controls this variable.

private

If “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, during the monorepo craze, people will set the private of the monorepo project root directory to true, so that no one will send the whole directory by mistake

scripts

Scripts Scripts that control the project lifecycle. Think about what NPM run dev, NPM run build, and NPM run Lint do every day. Just look at the scripts configuration.

If you want to understand the engineering implementation of the team project, then it is also recommended to start with scripts configuration, a little bit to read the command corresponding script file, you are the project master.

Scripts is the command hook pre and Post. The hook registers the precommand and the postcommand of a command. Here’s an example:

{
  "scripts": {
    "prexxx": "echo 'start~'"."xxx": "echo 'xxx running'"."postxxx": "echo 'end! '"}}Copy the code

When we execute NPM run XXX, we see the following result. Prexxx and postxxx are automatically executed.

Uses: Run lint before commit, automatically install packages for users before NPM run dev, etc

Think about what else you can do. Welcome to the discussion.

engines

It is difficult to ensure that the development environment among colleagues is consistent, for example, different developers have different Versions of Node, some are 8.x, some are 10.x, some are 14.x. A new person to ask you node with what version, tired not tired. Let’s configure engines

"engines": {
  "node": "> = 12.10.0 < 15"
}
Copy the code

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 users to correct, avoiding word of mouth

Package. json for non-Web projects

The same applies to the fields described earlier. Several properties are common and useful for package projects. For example, main, files, bin

main

The package entry file was introduced earlier. The default is index.js in the project root directory.

"main":"./lib/index.js".Copy the code

If your package name is package-json, when the user requires (‘package-json’), it is equivalent to requiring the./lib/index.js file in your package directory.

files

Files determines which files to publish to the NPM repository. Files that are not in files are not accessible to package users, and files pointed to by main must also exist in the scope of this list.

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

bin

Command line tool entry. When your package provides a command line tool, you need to specify an entry for the command line tool. Mapping between command names and locally specified files. You can refer to the vue-CLI-service source

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

If you are careful, you will notice that there are many executables in the node_modules/bin folder of our project.

For the user: executables in bin of the local installation package are linked to./node_modules/.bin/; Bin of the global installation package will be soft linked to /usr/local/bin.

dependencies & devDependencies

NPM install dependencies dependencies are not included in this package. DevDependencies are not included in this package.

Dev packages need to be careful not to install production dependencies into devDependencies, which will cause your users to fail to run.

other

Suggestion: If you have any questions about the project, read the project configuration file first. If you are not sure, consult your colleagues. Otherwise you might get sprayed

Focus on me and don’t get lost