What is package.json and how to add JavaScript libraries dependencies to it

A package.json file is a file that contains metadata about a JavaScript project. It is used by the Node Package Manager (npm) to manage dependencies and to publish projects to the npm registry.

The package.json file contains the following information:

• The name of the project
• The version of the project
• The dependencies of the project
• The scripts that are used to build and run the project
• The keywords that are used to search for the project
• The author of the project
• The license for the project

The package.json file is a required file for any JavaScript project that is published to the npm registry. It is also a good practice to include a package.json file for any JavaScript project, even if it is not published to the npm registry.

Here is an example of a package.json file:

JSON

{
  "name": "my-project",
  "version": "1.0.0",
  "dependencies": {
    "express": "^4.17.1"
  },
  "scripts": {
    "start": "node server.js"
  },
  "keywords": ["express", "node", "javascript"],
  "author": "John Doe",
  "license": "MIT"
}

This package.json file defines a project named “my-project” that has a version of 1.0.0. The project depends on the Express library, and it has a script named “start” that starts the project. The project also has keywords of “express”, “node”, and “javascript”, and it is licensed under the MIT license.

How do I import a JavaScript library from an URL in my project.json ?

Here is how you would declare in your package.json that you want to use a JavaScript library from the URL you provided:

JSON

{
  "name": "my-project",
  "version": "1.0.0",
  "dependencies": {
    "animate.css": "3.5.2",
    "animo": "github:thrivingkings/animo.js",
    "blueimp-canvas-to-blob": "3.11.0",
    "blueimp-file-upload": "9.18.0",
    "blueimp-load-image": "2.14.0",
    "blueimp-tmpl": "3.9.0",
    "bootstrap-colorpicker": "2.5.1",
    "bootstrap-filestyle": "1.2.1",
    "bootstrap-slider": "9.8.0",
    "bootstrap-tagsinput": "0.7.1",
    "bootstrap-tour": "0.11.0",
    "bootstrap-wysiwyg": "2.0.1",
    "bootbox": "https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/5.3.2/bootbox.min.js",
    "chart.js": "2.8.0",
  }
}

The dependencies object in the package.json file specifies the libraries that your project depends on. In this case, you are adding the Bootbox library to the dependencies object. The value of the bootbox property is the URL of the Bootbox library.

Import in case of using Ruby on Rails

Here is how. From terminal.

yarn add bootbox

Or find the name of the library to import on yarn packages browser > https://classic.yarnpkg.com/en/

Example of Bootbox usage

Once you have added the Bootbox library to the dependencies object, you can use it in your JavaScript code. You can import the Bootbox library by using the require() function. For example, the following code imports the Bootbox library and displays a confirmation dialog box:

JavaScript code

const bootbox = require("bootbox");

bootbox.confirm("Are you sure?", function(result) {
  if (result) {
    console.log("The user confirmed.");
  } else {
    console.log("The user canceled.");
  }
});

Related posts:

Revolutionizing JavaScript Package Management: A Deep Dive into npm vs. Yarn “Building a RESTful JSON API with Rails and React” Mastering Webpack: Enhancing JavaScript Development JSON JBuilder