What are the benefits of storing dist in both a GitHub repository and on npm?

I'm curious about why some repositories include a dist folder. Shouldn't repositories just store source code and not any builds or compiled files?

Let's take a look at an example with ES6 code.

package.json

{
  "files": [
    "dist",
    "lib"
   ],
  "scripts": {
    "build:lib": "<transform ES6 to ES5 and put it in the ./lib folder>",
    "build:umd": "<create a umd module and place it in the ./dist folder>",
    "build": "npm run build:lib && npm run build:umd",
    "postbuild": "<minify code>"
    "prepublish": "npm run build"
  }
}

This approach makes sense to me, and I have seen other repositories follow a similar structure. With this setup, the GitHub repo only contains src, while the npm repo includes only lib and dist.

Now onto another question: Why include dist and lib in npm? Most libraries can be easily installed with the command npm install. Additionally, we know that the prepublish script runs on local npm install (see npm-scripts). After installing a package, we already have the lib and dist folders. So why include this compiled code in npm when the source code is sufficient?

Answer №1

It seems that repositories include dist folders so that other projects can easily use them as dependencies via git. Refer to the package.json documentation, although it currently doesn't specify that artifacts must be included.

Take a look at NPM: Missing dist and src directories when trying to install directly from a github URL for issues that may arise if the dist folder is not present in the repository.

Answer №2

Another approach is to opt for installation directly from a Git repository, as long as there is a preparation stage that constructs the package:

{
  ...
  "scripts": {
     ...
     "prepare": "npm run build"
  },
  ...
}

This method eliminates the need to store the /dist folder in the actual repository.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

When you access the `selectedIndex` property in JavaScript, it will return an object of type `HTMLSelect

I am currently working on a piece of code that retrieves the value from dropdown list items and then displays it in the document. To proceed, please select a fruit and click the button: <select id="mySelect"> <option>Apple</option ...

Proceed to the next request after the initial request has finished executing in node

Imagine there is an endpoint called /print. Each time a request is sent to this endpoint, it triggers the function printSomething(). If another user hits this endpoint while printSomething() is still processing, it will run the function again simultaneousl ...

Troubleshooting a Messaging Error between Background and Another Script

Attempting to transfer selected text from the current page to an HTML page using message passing: content script to background script, then background script to the HTML page. However, encountering errors if the HTML page is not already open, and even gett ...

Tips on updating checkbox background color after being selected

I've been working on creating checkboxes for seat selection in Angular using a TypeScript file, but I'm facing an issue where the background color of the checkbox doesn't change after checking them. Here's my TypeScript function: gener ...

The Angular.js UIBootstarp Timepicker is displaying the "ng-invalid" class when used with an input type of "number"

Currently, I am working on incorporating a time picker using UIBootstrap and angular.js. By default, the timepicker utilizes {{input type="text}} for capturing hours and minutes. However, since I intend to use this feature on mobile devices, I need to di ...

Change the color of the plotly button when it is clicked

I recently implemented a custom button on my plotly modeBar and I would like it to retain a distinct color when clicked. This would help visually indicate its "active" state, allowing users to easily discern whether it is enabled or disabled based on its ...

Google Maps Info Window with Asynchronous Loading

Need help with loading a Google map asynchronously on your website? Check out the code snippet below: function initialize(lat,lng) { var mapProp = { center: new google.maps.LatLng(lat,lng), zoom:15, mapTypeId: google.maps.MapTypeId.R ...

Transferring information between a pair of input fields using ngModel

There are two input fields named input1 and input2. An event has been created where anything typed in input1 is displayed in input2. However, if something is manually changed or typed into input2, the event should not trigger. I think I may need to use a ...

Tips for transferring variables as arguments in javascript

Currently, I am immersed in a test project aimed at expanding my knowledge of web development. Unexpectedly, I have encountered an issue that has left me puzzled on how to proceed. Within this project, there exists a table consisting of 11 cells. While 9 ...

Unable to perform updates for personalized fonts

I've been trying to incorporate custom fonts into my website, but I seem to be facing difficulties in actually implementing them. Could someone please let me know if I am doing it correctly? .pattern{ background:rgba(0,0,0,.5) url(../images/pattern ...

Encountering issue with 'mongodb-connection-string-url'

As a beginner, I am struggling to understand the error message. When I try to run the app.js file, I receive the following log message. I read that I need to upgrade my MongoDB, but since I am using Windows 7, this seems impossible. PS G:\AWebDev&bsol ...

Opening multiple scripts in individual terminal windows within VSCODE is a great method for better organization and efficiency

When setting up my development environment, I find it necessary to run multiple scripts. I have a preference for using VSCode. Although utilizing tools like concurrently is helpful, I would prefer each script to run in its own terminal window so that I ca ...

Live notification application using node.js

I am looking to create a recipe maker webapp for practice purposes. This webapp will consist of 2 main pages: the index page and the recipes page. On the "index" page, users can create their own recipes. On the "recipes" page, users can view a table ...

"Understanding How to Utilize the Grpc Stream Variable for Extended Processes in Node.js

Utilizing Node.js for connecting to a server through gRPC in order to execute a lengthy task. The server sends a one-way stream to the client (Node.js app) while the task is ongoing. I am looking to add a Stop button and have been advised that closing the ...

Transmitting keys and data from Sails.js to Angular via streaming

In my current setup, I am using an angular frontend to fetch data from a sails backend through the sails-mysql adapter and display it in a ui-grid. However, due to the large size of the dataset, there is a noticeable delay in loading the data before the pa ...

Implementing a universal timer for tmi.js and discord.js integration

I am currently working on a Discord bot that monitors multiple Twitch chats for commands and executes them on Discord using tmi.js and discord.js. Everything is functioning as expected, but I am facing an issue with implementing a global cooldown on the ...

Utilize jQuery in phantom.js to send an ajax request across domains

I am currently in the process of testing a chrome plugin by emulating a portion of its functionality on phantomjs. My objective for phantom seems quite straightforward, yet I am encountering issues. I aim for it to navigate to a specific webpage and withi ...

Retrieving video information using Dailymotion API with JSON and jQuery

I have been struggling to understand the issue even after consulting the Dailymotion API and various sources. I am attempting to retrieve data from Dailymotion for a specific video ID by using the following code: $.getJSON('https://api.dailymotion.co ...

The error message "Unable to execute stripe.customers.createBalanceTransaction function" is displayed on

Having trouble with a Type Error while attempting to use stripe's createBalanceTransaction function. You can find the API reference for the function here: https://stripe.com/docs/api/customer_balance_transactions/create The error message being receiv ...

How to add a subtle entrance animation to text (demonstration provided)

Apologies for the brevity, but I could really use some assistance with replicating an effect showcased on this particular website: My understanding is that a "fadeIn" can be achieved using jQuery, however, I am at a loss as to how to implement the 3D effe ...