Npm - Package.json

> (World Wide) Web - (W3|WWW) > Javascript (Js|ECMAScript) > Node - npm cli (Node package manager)

1 - About

Package.json is used by npm to store metadata for projects published as npm modules.

Package.json:

  • serves as documentation for what packages your project depends on.
  • allows you to specify the versions of a package that your project can use using semantic versioning rules.
  • makes the build reproducible

See Reference

Advertising

3 - Syntax

Mandatory:

  • “name”: all lowercase one word, no spaces dashes and underscores allowed
  • “version” in the form of x.x.x follows semver spec

Optional:

  • main.js: the entry point when the package is used.
  • description. The description helps people find your package on npm search. If there is no description field in the package.json, npm uses the first line of the README.md or README instead.

Example:

{
  "name": "my_package",
  "description": "",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/ashleygwilliams/my_package.git"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/ashleygwilliams/my_package/issues"
  },
  "homepage": "https://github.com/ashleygwilliams/my_package"
  "dependencies": {
    "my_dep": "^1.0.0"
  },
  "devDependencies" : {
    "my_test_framework": "^3.1.0"
  }
}

3.1 - Dependency

To not include a dependency in the final compiled javascript file, you may need to declare it in your bundler. Example with webpack, External

3.2 - Import

  • main: main script
  • module: define where to find the module file named by the name properties (use when importing to locate the module)
"module": "src/index.js",  
  • browser defines the location of module that are only available inside the browsers.
"browser": {
    "module-a": false,
    "./server/only.js": "./shims/server-only.js"
}

The import order of precedence is defined in resolve-mainfields for webpack

webpack.config.js
module.exports = {
  //...
  resolve: {
    mainFields: ['browser', 'module', 'main']
  }
};
Advertising

4 - Management

4.1 - Create

yarn init
# optionaly
npm init

4.2 - Modify Config

npm set init.author.email "[email protected]"
npm set init.author.name "ag_dubs"
npm set init.license "MIT"
Your Name <[email protected]> (http://example.com)

4.3 - Add dependency

To add dependency, use the save and save dev flag of npm install. See install.

  • For dependencies
npm install <package_name> --save
  • For dev-dependencies (development and testing)
npm install <package_name> --save-dev

4.4 - Script

Within scripts you can reference locally installed npm packages by name instead of writing out the entire path. This convention is the standard in most npm-based projects and allows for instance to directly call a package. Example:

  • myApp,
  • instead of ./node_modules/.bin/myApp

Doc

Meaning of the start script:

  • for react: dev
  • for next: server
Advertising

5 - Documentation / Reference

web/javascript/npm/package.json.txt · Last modified: 2019/05/27 10:02 by gerardnico