React Training
  • React JS Library
  • Roadmap
  • Training OutLine
  • React js basics
    • Understanding React JS
    • React JS a framework?
    • Setting Up React
    • Say Hello to React
    • Everything is a Component
    • Create-react-app
  • React Building Blocks
    • JSX and Babel
    • One Way Data Flow
    • Virtual DOM
    • V of MVC
    • React Terminology
    • React Tooling
  • Day 01
    • Day 01 OutLine
    • All About JSX
    • React Tools/ npm & webpack
    • Introduction of Webpack
    • Hello world using webpack
      • Webpack Setting up with React
    • NPM Scripts | Package JSON
      • Package.json file
    • React JS Principles
      • One Way Data Flow
      • V of MVC
      • Virtual DOM
    • Create React App - Part-1
    • Create React App - Part-2
  • Day 02
    • Quick Recap
      • Quiz
    • State & Props
      • State & Props in Depth
      • State Vs Props | Compare
    • React LifeCycle Methods
      • React LifeCycle Methods for V-0.16 x
    • Constructor | Lifecycle
    • Write Flicker App | First App
  • Day 03
    • Quick Recap
    • Life Cycle Flow
      • Birth and Mounting
      • Initlization and Construction
      • Pre Mounting
      • Render Method
      • componentDidMount
    • Type of React Components
      • Examples- Quick Compare
      • Class and Functional components
      • Functional Components
    • YouTube application
      • Component Design
    • All in One LifeCycle
  • Assignment
    • React App development
  • Day 04
    • Quick Recap on Lifecycle
    • Lifecycle deprecated/New Methods
      • New Lifecycle Methods
    • Lets Build App Netflix | Mock
  • Assignment
    • Github battle App | Assignment
  • Day 05
    • Quick Recap : Hooks
    • ES6 Features | Hands-on
      • ES6 Code Examples
    • Next Stop - React Router | SPA
      • Code examples | Router
      • React Router Building Blocks
      • Application using react-router-dom
  • Day 06
    • Router V4 | Quick Recap
    • ES2015 | 16 Quick Recap
    • LifeCycle Methods -Part-1
    • LifeCycle Methods -Part-2
  • Day 07
    • Quick Recap | New Lifecycle
    • Quick Recap | React Routing
    • Context API | React JS
      • component with context APIs
      • Context API | examples
    • App using Hooks/Context APIs
  • Assignment
    • Assignments
  • State Management Day-08
    • Quick Recap
    • Managing React State
      • What is Redux
      • Understanding Redux
      • Hello World "Redux"
  • React Redux Day - 09
    • Redux State Manager
    • Redux Redux Development
    • Simple Application | Redux
  • Redux Live Application Day -10
    • Redux with existing Application
      • Redux with React App
      • Lets Build More Apps
      • Should I use Redux from Dan
    • Quick Look at JS in React
    • Learn By Reading
  • miscellaneous Items - Day 11
    • Hooks useReducer
    • Hooks useContext
    • Hooks useRef
    • Hooks useEffect
    • Hooks useState
    • Lazy Loading and code splitting
    • Styling React Component
  • React Next Step - Day 12
    • Topics
    • Jest and Enjyme Testing
    • Examples: Testing
  • React Native
    • What is React Native
    • Setting up Environment
      • Linux Systems
    • React Native Hello World App
    • React Native Architecture
    • React Native Vs Native
    • Expo Cli or React Native CLI
  • React Native core Fundamental
    • React Native "Hello World"
    • Course OutLine
    • Getting started with Expo App
    • Layout with Flexbox
    • Working with Styles and Events
    • Manging Component State and Props
    • Build Simple Task List Application
  • What to Debug & How to Debug
    • Debug React Native Application
Powered by GitBook
On this page
  • Creating a package.json file (Basic can be skipped )
  • package.json fields§
  • Creating a new package.json file

Was this helpful?

  1. Day 01
  2. NPM Scripts | Package JSON

Package.json file

PreviousNPM Scripts | Package JSONNextReact JS Principles

Last updated 5 years ago

Was this helpful?

(Basic can be skipped )

You can add a package.json file to your package to make it easy for others to manage and install. Packages published to the registry must contain a package.jsonfile.

A package.json file:

  • lists the packages your project depends on

  • specifies versions of a package that your project can use using

  • makes your build reproducible, and therefore easier to share with other developers

Note: To make your package easier to find on the npm website, we recommend including a custom description in your package.json file.

A package.json file must contain "name" and "version" fields.

The "name" field contains your package’s name, and must be lowercase and one word, and may contain hyphens and underscores.

The "version" field must be in the form x.x.x and follow the .

If you want to include package author information in "author" field, use the following format (email and website are both optional):

Your Name <email@example.com> (http://example.com)
{
  "name": "my-awesome-package",
  "version": "1.0.0"
}

You can create a package.json file by running a CLI questionnaire or creating a default package.json file.

To create a package.json file with values that you supply, use the npm initcommand.

  1. On the command line, navigate to the root directory of your package.

      cd /path/to/package
  2. Run the following command:

      npm init
  3. Answer the questions in the command line questionnaire.

Customizing the package.json questionnaire

If you expect to create many package.json files, you can customize the questions asked and fields created during the init process so all the package.json files contain a standard set of information.

  1. In your home directory, create a file called .npm-init.js.

  2. To add custom questions, using a text editor, add questions with the promptfunction:

     module.exports = prompt("what's your favorite flavor of ice cream, buddy?", "I LIKE THEM ALL");
  3. To add custom fields, using a text editor, add desired fields to the .npm-init.js file:

      module.exports = {
     customField: 'Example custom field',
     otherCustomField: 'This example field is really cool'
      }
  1. On the command line, navigate to the root directory of your package.

      cd /path/to/package
  2. Run the following command:

      npm init --yes

Example

  > npm init --yes
  Wrote to /home/ag_dubs/my_package/package.json:

  {
    "name": "my_package",
    "description": "",
    "version": "1.0.0",
    "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"
  }

Default values extracted from the current directory§

  • name: the current directory name

  • version: always 1.0.0

  • description: info from the README, or an empty string ""

  • main: always index.js

  • scripts: by default creates an empty test script

  • keywords: empty

  • author: empty

  • bugs: information from the current directory, if present

  • homepage: information from the current directory, if present

You can set default config options for the init command. For example, to set the default author email, author name, and license, on the command line, run the following commands:

> npm set init.author.email "example-user@example.com"
> npm set init.author.name "example_user"
> npm set init.license "MIT"

To learn more about creating advanced npm init customizations, see the GitHub repository.

To create a default package.json using information extracted from the current directory, use the npm init command with the --yes or -y flag. For a list of default values, see “”.

license:

Creating a package.json file
semantic versioning rules
package.json fields§
Required name and version fields§
semantic versioning guidelines
Author field§
Example
Creating a new package.json file
Running a CLI questionnaire
init-package-json
Creating a default package.json file
Default values extracted from the current directory
ISC
Setting config options for the init command