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

What makes NPM thrive while submodules struggle with construction?

My experience with utilizing npm has often involved encountering seemingly meaningless errors - such as Visual Studio projects failing to build and build tools (e.g. python.exe / CL.exe) being unavailable on the command line. For instance, some packages t ...

javascriptnode.jsnpmkerberosnode-gyp

Event that signifies a change in the global state of the Angular 2 router

Is there a universal event that can be utilized for state change/start across all components, similar to the Component Lifecycle Hooks ? For example, in UI-router: $rootScope.$on("$stateChangeStart", function() {}) ...

javascriptangularjs

What is the best method to divide a string, enclose it within a span tag, and generate fresh code using jQuery?

Is there a way to separate multiple links, enclose them in a span tag, and then iterate through them to display them back within the a tag? I have managed to split all the dates into the dateArr array, but I need help looping through them to output each on ...

javascriptjquery

The value of the checked input with the name `nameofinput` is currently not defined

I'm having trouble passing the input value to another page. $( this ).attr( "href", '?module=module_progress_report&Subject='+ $('input[name=subject]:checked').val()+ '&Centre_Selected_ID='+ encodeURIComponen ...

javascriptjquery

Selecting the optimal data structure: weighing the benefits of using boolean check versus array .include (balancing performance and redundancy

My objects can have one or more properties assigned, with a total of 5 different properties in my case. To illustrate this, let's use a simple movie example where each movie can be assigned from 5 different genres. I have come up with two methods to ...

javascriptarraysangulartypescript

Leveraging npm to exclusively install the necessary packages for the existing project

Starting my journey with node/npm has brought about a lot of challenges for me. Figuring out the correct path to install packages Loading the package in Node I envision having a designated package folder containing only the necessary packages for my curr ...

node.jsnpmpackage

Error message: "Uncaught ReferenceError: $ is not defined in BackboneJS and RequireJS"

In my Backbone application, I am using RequireJS. However, I keep encountering the error message Uncaught ReferenceError: $ is not defined, indicating that my libraries may not be loading properly. This is what my RequireJS config looks like: require.con ...

javascriptjquerybackbone.jsrequirejs

When I select an option with an object, ng-model is receiving '[object Object]' instead of the actual object for <select> element

Referencing an example from Angular documentation: this link, specifically the section on "Using ngValue to bind the model to an array of objects." In the index.html file: <!doctype html> <html lang="en"> <head> <meta charset="UTF- ...

javascriptangularjs

Gulp dependencies appear to be absent, even after executing npm install

I am currently working on a project that utilizes Gulp. After deploying the project to my Ubuntu server, I wanted to compile the assets using my gulpfile. Following the installation of Node and npm, I executed npm install from the project's root direc ...

node.jsubuntunpmgulp

Redirecting pages without a hash portion

In my Express.js app.js file, there is a get route that looks like this: app.get('/admin', function(req, res, next){ if(req.isAuthenticated()) { return next(); } res.redirect('/admin/login'); },Routes.Admin.Index); When a ...

javascriptnode.jshttp-redirectexpress

Troubleshooting: Ineffective use of replace() function on input value with jQuery

Visit this link for a demo How can I update the input value based on user selection in a dropdown menu? The objective is to change the value from "service_######" to "membership##_####" when the user selects YES, but my current JavaScript code using repla ...

javascripthtmljquery

Updating the state of a Next.JS router component with React.JS: A step-by-step guide

I've implemented a toggleswitch in my app that changes its state based on the dynamic URL parameters. For instance, if the URL includes a parameter named followType set to following (e.g. https://www.example.com/home?followType=following), I want the ...

javascriptreactjsreact-hooksnext.jsnext-router

transform constant values into API requests using React

The sample dataset mentioned will be retrieved from a backend API call handled by Flask. The API has already been configured on the backend. const rows = [ { name: "XYZ", age: "12", email: "<a href="/cdn-cgi/l/emai ...

javascriptreactjsrestflask

Sentry alert: Encountered a TypeError with the message "The function (0 , i.baggageHeaderToDynamicSamplingContext) does not

My website, which is built using Next.js and has Sentry attached to it, runs smoothly on localhost, dev, and staging environments. However, I am facing an issue when trying to run it on my main production server. The error message displayed is as follows: ...

javascriptnext.jsserver-side-renderingsentry

Error message: Suitescript encountered an unexpected issue - TypeError: The function this.handleChange is not defined

For the past year, I have been immersed in Suitescript development. In my current project, I have a client script that triggers on Save for a Journal Entry. However, upon trying to save, I encounter an error message that reads "TypeError this.handleChang ...

javascripterror-handlingnetsuitesuitescript

Adjust Tinymce size automatically when a key is held down for a prolonged period of

Having trouble with tinymce not automatically resizing when certain characters are pressed repeatedly. However, the height adjusts after releasing the key. Is there a method to auto resize tinymce during the key down event? I am utilizing angularjs ui-tin ...

javascriptangularjstinymcetinymce-4

What could be the reason for the "begin" script failing to execute?

I have a simple node and express application that works as expected, but I encounter an issue when trying to run the server from the script. When my script is set to "start", running the command simply opens my cmd. However, if my script is set to any oth ...

javascriptnode.jsexpressnpm

CORS headers not functioning as expected for Access-Control-Allow-Origin

Can someone help me figure out how to add Access-Control-Allow-Origin: 'http://localhost:8080' in Node.js and Express.js? I keep getting this CORS error: Access to XMLHttpRequest at http://localhost:3000 from origin 'http://localhost:8080&ap ...

javascriptnode.jsexpresscors

Enhancing Web Forms with PHP and AJAX Javascript

Currently, I'm working on implementing a "stream" feature that allows users to input their status. So far, I have successfully set it up, but my goal is to enable users to see their new status without having to refresh the page. I understand that uti ...

phpjavascriptsqlajax

Using Javascript and jQuery to modify the element's ID

I've been trying to automate the loading process of articles on my website, but I'm having trouble with the line $(tytul).html(data);. Is there a way to get this working correctly? var numboart = 3; $(document).ready(function(){ for(i=0;i& ...

javascriptjqueryajaxvariables