import JavaScript script from a NPM package installation

I am facing a challenge with my server where I do not have the ability to run npm due to lack of permissions, and only have access to Apache.

Currently, I am in need of a JavaScript library that is typically deployed using npm, such as https://github.com/stevage/mapbox-gl-utils. Unfortunately, there is no traditional JS script available that includes everything I require, and can be referenced directly in my HTML.

While I was able to use npm locally on my own laptop (where I have necessary permissions), now I am left with a complex structure of interdependent folders containing JS and JSON files. These files seem to only function within an npm server environment.

At the moment, I have not come across a single JS file that contains all the necessary components for the library I need.

Is there a way to integrate the required JS into my standard HTML (served on Apache) without relying on npm? Or is it inevitable that I must utilize npm for this task?

javascriptnpm

Answer №1

To easily transfer an npm dependency to another computer, you can download it and consolidate it into a single JS file using any bundling tool of your choice (such as rollup). Once you have the bundled file, simply move it to the server and use it like any other self-written JS file.

Begin by installing the necessary dependencies:

$ npm install mapbox-gl-utils rollup rollup-plugin-node-resolve rollup-plugin-commonjs

Next, configure rollup with the following setup:

// rollup.config.js
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';

export default {
  input: './node_modules/mapbox-gl-utils/src/index.js',
  output: {
    file: './mapbox-gl-utils.js',
    format: 'iife',
    name: 'mapbox_gl_utils'
  },
  plugins: [
      resolve(),
      commonjs(),
  ]
}

Finally, execute rollup to bundle your dependency:

$ rollup --config

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

Having issues with unchecking checkboxes in ReactJS

I created a task management app and I thought of improving it by displaying all completed tasks when the "Show completed tasks" box is checked. https://i.stack.imgur.com/RkXsw.png The issue I'm facing is that while checking "Show completed tasks ...

javascriptreactjscheckboxfilterfrontend

update the icon of the .exe file within the pkg library

I am currently working on a Mean Stack application that creates an executable file using npm pkg. The conversion process is successful and the app is running without any issues. However, when I try to change the icon and version of the .exe file using rced ...

node.jsnpm

Issue with $watch in Angular Modal not triggering

Having trouble using $watch with a radio button located inside an AngularJS Modal. The $watch doesn't seem to work when the value changes within the modal. If I move the radio buttons outside the modal, the $watch functions as expected. You can see ...

javascriptangularjstwitter-bootstrapangular-uiangular-ui-bootstrap

Ways to explain executing npm script within Dockerfile

In my Dockerfile, I included the command to execute an npm script: WORKDIR /usr/src/app/server CMD ["npm", "run", "build"] This script runs webpack to build my project: "scripts": { "build": "webpack --mode development --open", "watch": "webpack --mod ...

dockernpmwebpack

seeking a way to integrate Amazon information into a PHP form

Trying to fix my old system for integrating Amazon search results into a form has been quite the challenge. Originally, I had a PHP-based form where users inputted an ISBN, triggering a JavaScript program to generate a signed request that returned XML data ...

javascriptphpjqueryjsonamazon-web-services

What is the best way to stop this Jquery slider from moving?

I've been struggling with this issue for what feels like forever, and it's driving me crazy! I have a slider on the homepage that I'm trying to enhance with a "click to pause" feature (and maybe even a click to resume, for good measure). I ...

javascriptjquerypluginsslidercycle

Ways to incorporate a dictionary into your website's content

I am in the process of developing a website for educational purposes while also honing my web programming skills. On this website, I have encountered some complicated terms that may be difficult for users to understand, so I want to implement a tooltip/mod ...

javascripthtmlcssnode.jsjson

Is it necessary to run npm install when a package does not have any dependencies?

If I have an npm package that contains all its dependencies bundled into one file using webpack, and I unpack it into the directory ./my-awesome-package/, should I still run npm install ./my-awesome-package/? I am aware of being able to specify preinstall ...

javascriptnode.jsnpmnpm-install

What is the best way to transform a string into emojis using TypeScript or JavaScript?

Looking to convert emoji from string in typescript to display emoji in html. Here is a snippet of the Typescript file: export class Example { emoji:any; function(){ this.emoji = ":joy:" } } In an HTML file, I would like it to dis ...

javascriptjquerytypescript

Arrange arrays with multiple dimensions in JavaScript based on their ranges

Seeking assistance on sorting a multi-dimensional array returned from an API to enable users to choose a range based on beats. I'm currently facing challenges with the data my API is returning. var myObj = [{ title: 'title one', be ...

javascriptarrays

The IntroJs step is only partially visible on the screen

Currently, I am incorporating introJS into my application and encountering an issue where one of the steps is only partially visible on the screen. Despite trying various position settings such as auto, left, right, etc., this particular item consistentl ...

javascripthtmlcssionic-frameworkintro.js

What is the process for installing with npm using the latest version specified in package.json, without the need for manual editing or upgrading?

I have experimented with a few different installation methods... npm install -S vue@* npm install -S vue@latest However, when I checked the package.json file, it didn't use * or latest as versions but instead had specific numbers. I'm looking f ...

npm

Issue with AngularJS form not binding to $http request

<form novalidate class="form-horizontal"> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <div class="text-capitalize"> </ ...

javascriptangularjshttpget

Efficiently adding values to a variable with the forEach method

I'm encountering an issue with displaying data from a JSON file similar to the one below: Currently, "checked" is set to null. I aim to update it to true within the steps array using a forEach loop. JSON data snippet: { "id": 4, "process": { ...

javascriptjqueryangularjs

Is there a way to determine the bounding rectangle of a specific word within a paragraph when you only have its index?

I am currently developing a text-to-speech functionality for a react application that can emphasize the word being spoken by highlighting it with a background color. This feature closely resembles the layout of the Firefox reader view. However, my curren ...

javascripthtmlcssreactjstext-to-speech

MVC3 does not support JQuery UI

Just recently, I had all my jquery-ui elements functioning perfectly. However, now it seems that none of the jquery-ui features are working anymore. In my Site.Master page, I have included the following code... <link href="../../Content/Site.css" rel=" ...

javascriptjqueryasp.netasp.net-mvc-3

Is it necessary to have nodejs, or can I just depend on Nginx alone?

I am currently in the midst of a discussion with my colleagues regarding whether or not to incorporate node.js into our application. We have decided to utilize angular.js for the front-end and communicate with the app server through a REST api. The app ...

javascriptnode.jsangularjsnginx

Tips for displaying "onclick" content beside dynamically generated content

I am working on a feature where a dynamically generated list has radio buttons displayed next to it. The goal is to show a dropdown list next to the specific radio button and list item that was changed. Essentially, if the radio button is set to "yes," I w ...

javascriptphpjqueryajaxjquery-events

Utilizing an Async API call from a separate page and passing it as a component input

I recently set up an asynchronous API fetch in one of my .JS files and then invoked it from another JS file to output the result using console.log. (Is there a more efficient method for achieving this?) Now, my aim is to utilize the fields of the response ...

javascriptreactjsfetch

Changing a variable with Functions and Objects

I'm curious to know what the index variable returns in this code snippet. I believe it will be 0. function jsTest() { var index = 0; var counter = 0; var obj = {}; obj.index = index; var func = function () { for (index ...

javascript