Should I fork and customize npm package: Source or Distribution? How to handle the distribution files?

Currently, I am in the process of developing a VueJS web application. Within this project, there is a module that utilizes a wrapper for a JavaScript library obtained through npm and designed to seamlessly integrate with VueJS. However, it doesn't completely meet our requirements, so the plan is to fork it and make some adjustments.

Within the repository, there are two main folders: src and dist.

From my understanding, src contains the actual source code while dist houses a minified version intended for distribution purposes. This leads me to several questions:

  1. When it comes to editing the module, how should I approach the contents of /dist? Is it necessary to delete it?
  2. Regarding components installed via npm, do they rely on the /src/ version or the /dist/ one?
  3. If I choose to remove /dist, focus on modifying the /src code, how can I recreate /dist using the updated /src files?

Your guidance on these matters would be greatly appreciated.

javascriptnpm

Answer №1

After reviewing your inquiries, it appears that enhancing your understanding of your technology stack and learning how to build your application would be beneficial.

In general, the /dist folder contains automatically generated files that can be uploaded to a web server of your choice. If you are using VueJS, you can generate these files by executing npm run build.

  1. If I need to make changes, what should I do with the contents of /dist? Should I delete them?

As mentioned earlier, these files are automatically created when you run npm run build. So every time you run this command, everything in the /dist directory will be updated automatically.

  1. Do components installed via npm use the /src/ version or the /dist/ one?

Your main working directory is always /src. Dependencies can be utilized like in any other application (for example, using Axios, an HTTP client):

import axios from 'axios';

const httpClient = axios.create({ baseURL: 'https://api.something.com' });
httpClient.get(/* ... */);

For beginners who may not be entirely confident in utilizing dependencies, I recommend reading this article: An Absolute Beginner's Guide to Using npm

  1. If I remove /dist, work on the /src code, how can I recreate /dist based on the modified /src files?

There is no need to manually delete anything in the /dist directory. By simply running npm run build, the latest changes will be incorporated automatically.

It is important to note that running npm run build is specifically for your production environment. For development purposes, it is recommended to utilize a dev server by running npm run serve.

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

"AngularJS directive mandating the use of the required attribute for internal control

I've encountered a challenge with this specific issue. We are using a directive called deeplink, which contains the following code: restrict: 'E', require: 'ngModel', scope: { smDropdown: '=smDeeplinkDropdown', s ...

javascripthtmlangularjsangularjs-directive

The JADE form submission is not being captured even though the route is present

I am currently utilizing JADE, node.js, and express to develop a table for selecting specific data. This entire process is taking place on localhost. The /climateParamSelect route functions properly and correctly displays the desired content, including URL ...

javascriptnode.jsexpresspug

Error message: "Link binding error in knockout collection"

In this example, you'll find my Knockout ViewModel. $(document).ready( function () { var Incident = function (CaseNumber, DateOfIncident, Description) { this.CaseNumber = CaseNumber; this.DateOfIncident = DateOfIn ...

javascripthtmlmvvmknockout.js

What is the best way to delete a property from an object in an array using Mongoose? This is crucial!

Doc - const array = [ { user: new ObjectId("627913922ae9a8cb7a368326"), name: 'Name1', balance: 0, _id: new ObjectId("627913a92ae9a8cb7a36832e") }, { user: new ObjectId("6278b20657cadb3b9a62a50e"), name: 'Name ...

javascriptnode.jsarraysmongodbmongoose

React Big Calendar encountered an error: The element type provided is not valid, as it is expected to be a string for built-in

Error One: The element type is invalid: it was expecting a string (for built-in components) or a class/function (for composite components), but received undefined. This could be due to not exporting your component correctly from the file where it's d ...

javascriptreactjsreact-big-calendar

The ajax form submit function does not have the capability to automatically post content

On this particular webpage, there is a visible form labeled form A which contains a submit button with a post action. <form name="payFormCcard" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post"> I am looking to cre ...

javascriptphpajaxformshtml-post

fetching numerous JSON documents using jquery

I am struggling to retrieve data from multiple JSON files and display it in a table. Despite being successful in appending data from one JSON file, I encountered issues when trying to pull data from multiple files. Here is my code: var uri = 'sharepo ...

javascriptjqueryjson

What is the best way to incorporate a custom event listener into my React Native component?

Hello everyone, I am currently working with React Native+Expo and have created a custom component called a stepper. Here's how it looks: Below is the code for this custom stepper: import React, { useState } from 'react'; import { View, Text ...

javascriptreactjsreact-nativeexpo

Having an issue with the 'scroll' event not being disabled in jQuery

Currently, we are encountering an issue with the implementation of a simple hiding menu when scrolling and showing it back once the user stops scrolling. The method .on('scroll') works as expected, but .off('scroll') is not functioning ...

javascriptjqueryhtmlcss

Transferring information between pages in PHP

Currently, I am exploring the most effective way to pass data between two pages (Page A to Page B) using PHP for a specific scenario: Page A: This page displays a gallery of images with titles. The PHP file makes a database call to an images table, which ...

javascriptphphtmlperformance

Tips for embedding multiple video players on a single HTML page

I'm currently experiencing an issue with the YouTube API. I am in the process of developing a website where I want a video to automatically play when I open its corresponding image. The code I used initially worked successfully: <script> // 2. ...

javascripthtmlyoutube-apiyoutube-javascript-apivideo-player

Retrieve parameters from functions and convert them into coherent statements

As I delved into the world of THREE.js, I experimented with various geometries. However, manually writing out each geometry became tedious due to the vast array of options available. For example, creating a simple cube required these lines of code: var m ...

javascriptthree.js

calls to res.send and res.render

I'm currently trying to determine if it's possible to use res.send(data) and res.render('reports') simultaneously in my code. To provide more details, when I navigate to '/reports', on the server side I am executing a REST ca ...

javascriptnode.jsexpress

Best practices for efficiently utilizing setInterval with multiple HTTP requests in NodeJS

Imagine you have a collection with 3 to 5 URLs. You want to send requests every 5 seconds, one by one. Here is how I approached this: setInterval(() => { array.forEach(element => { request .get(element.url) .on('response', ...

javascriptnode.js

"Adding an active class to a link based on the current page and locale: A step-by-step

Looking to add an active class to the subheader menu on the active page, but facing issues when changing the locale in the link. While it works for links like my-site/my-page, it doesn't work for links like my-site/fr/my-page. Utilizing Storyblok head ...

javascriptreactjsnext.jslocalizationchakra-ui

Make the minimum height of one div equal to the height of another div

My query is somewhat similar to this discussion: Implementing a dynamic min-height on a div using JavaScript but with a slight twist. I am working on a dropdown menu within a WordPress site, integrated with RoyalSlider. The height of the slider div adjust ...

javascriptjquerycsswordpress

Npm is experiencing a technical issue

Encountering a serious issue with npm, I am facing difficulty in installing APIs like bluebird or fs due to an error message being thrown by npm. npm install bluebird -g npm WARN npm npm does not support Node.js v0.8.20 npm WARN npm You should probably up ...

node.jsnpmbluebird

Switching button class when hovering over another div

When you click on the "collapsible-header" div, I want the text "TE LAAT" in the button to change to "NU BETALEN". Currently, the CSS code changes the text on hover, but I want it to change on click when the collapsible-header also has the active class. T ...

javascriptjqueryhtmlcssonclick

Update npm to a specific version

Looking to refresh my current version, I use npm version patch. This command will increment the versions like so: - 1.0.0 -> 1.0.1 -> 1.0.2 -> 1.0.3 Is there a way I can specify a version like 1.0.x instead? Any suggestions? Thank you! ...

node.jsnpmnpm-install

You can't retrieve a JSON object using Javascript

Every time I execute the javascript/php code below, I encounter an issue where I keep receiving "undefined" when trying to alert the 'userid' property of the json object. However, if I turn the json object into a string using stringify(), it corr ...

javascriptjsonajax