Give an npm package a nickname using a browserify shim

I'm in the process of transitioning from requirejs to browserify.

One of the dependencies I have is for masonry.

Trying to shim it using the bower version was proving to be a little challenging (more on that can be found here).

Instead, I decided to simply install it using npm, which installs it as masonry-layout.

Now my question is: How do I go about shim the named import of an npm module with thlorenz/browserify-shim? This way, I won't have to update every reference in my code from masonry to masonry-layout.

javascriptnpmbowerbrowserifybrowserify-shim

Answer №1

It seems like browserify-shim may not be the best solution for your specific scenario. Consider some alternative approaches:

  • Utilize the browser field in your package.json to achieve your desired outcome. For example:

    "browser": {
  "masonry": "masonry-layout"
}

  • If you are not concerned about having the masonry package as a dependency within the same project and have symlinks available, try creating a symlink from node_modules/masonry to node_modules/masonry-layout.

  • Explore using the pathmodify browserify plugin for another potential solution.

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

Transforming PHP Variable Using Ajax

I have a variable called $type and I need it to be either month or year. This change should occur when a div is clicked. I attempted to use an onclick event with an ajax call. The ajax call and the variable are both in the same script (index.php). Within ...

javascriptphpjqueryhtmlajax

I keep encountering the same issue every time I try to execute the npm run watch command. Does anyone have any suggestions on how to fix this?

When attempting to execute the command npm run watch, I encountered an error as shown below: ERROR Failed to compile with 1 errors2:50:28 PM This dependency was not found: * vue in ./resources/js/app.js To install it, you can run: npm install --save vue ...

phplaravelvue.jsnpmweb-deployment

Challenges with creating a responsive YouTube iframe using the API

Looking to integrate a Youtube video using the iFrame API to capture events effectively, embedding the player alone is not an option. Following the documentation, everything functions correctly with code like: var tag = document.createElement('scrip ...

javascriptcssiframeyoutubeyoutube-api

"UIWebView experiences a crash when a long press gesture is performed on a textarea element

Looking to implement a custom keyboard for UIWebView that is entirely based on HTML/JS/CSS for compatibility across multiple devices. To achieve this, I included a notification as shown below: [[NSNotificationCenter defaultCenter] addObserver:self selecto ...

javascripthtmliosuiwebviewtextarea

What is the best way to find the product of each object in an array by the corresponding values in another array?

Searching for a solution to an issue I encountered while working on an assignment. The problem can be illustrated as follows: var arrOfObj = [{a:10 },{a:20},{a:30}, ......] var arrToMultiply = [2,4,6, .....] The expected result const result = [{a:10,resul ...

javascriptnode.jsarraysobject

Tips for utilizing the track OrbitControls in three.js

Presently, there are two blocks visible within the space: const material1 = new THREE.MeshBasicMaterial({color: '#00ff00'}); const cube1 = new THREE.Mesh(geometry, material1); cube1.position.set(0, 0, 0); const material2 = new THREE.MeshBasicMat ...

javascriptthree.js

Display results in a Web application using Google Apps Script

function doGet() { return HtmlService.createHtmlOutputFromFile("vi"); // var output = HtmlService.createHtmlOutput('<b>Hello, world!</b>'); } function doPost() { return HtmlService.createHtmlOutputFromFile("vi"); // var out ...

javascripthtmlwebgoogle-apps-scriptgoogle-apps

When I attempt to connect to my local MongoDB database, including a specific port in the URI is preventing the connection from being

While testing a connection to a local DB using mongoose and mongodb, I encountered an issue. Whenever I include a port number in the URI passed to mongoose.connect(), I receive a connection refused error. async function connectDB() { const db = await m ...

javascriptnode.jsmongodbmongoose

What is the reason that when we assign `'initial'` as the value for `display` property, it does not function as intended for list elements?

To toggle the visibility of elements, I have created a unique function that accepts an object and a boolean. Depending on the boolean value, either 'none' or 'initial' is assigned to the 'display' property of the specified obj ...

javascripthtml

The lookahead will only find a match if there are brackets present within the string

Trying to use a negative lookahead to search for a particular pattern within a single line string: /\s+(?![^[]*]).+/g Applicable to the following cases: // Case 1 a.casd-234[test='asfd asdf'] abc defg // Case 2 asf.one.two.three four fiv ...

javascriptregex

Utilizing the Flex property on the parent div ensures that all child elements receive an equal width

I am currently working on a messaging application and I want the layout to be similar to Twitter or Whatsapp. Specifically, I want the messages from the person the user is chatting with to appear on the left side, while the user's own messages should ...

javascripthtmlcssuser-interfaceflexbox

Transferring NodeJS information to JavaScript

I am currently working on a web application where the client receives data from a server. The challenge I'm facing is how to pass this data from NodeJS to a Javascript file that is included in an HTML document. Unfortunately, I have not been successfu ...

javascriptnode.jsexpress

Extracting data from a JSON object using Angular

Recently, I've been delving into the world of AngularJS and encountered a hurdle with LocalStorage. After spending numerous hours trying to figure out how to save data locally, I believe I have finally got it working as intended. Now, my next challeng ...

javascriptarraysangularjsionic-framework

Is the inclusion of @vue/composition-api in devDependencies warranted?

Is it recommended to add @vue/composition-api to the dependencies section of the package.json instead of devDependencies? I noticed that on the npm registry it is listed under dependencies. ...

vue.jsnpmvue-composition-api

The functionality of filtering a list based on the selected value from a drop-down menu is malfunctioning

When the page initially loads, there is a dropdown with the default placeholder "Select Person Type" and a checkbox list displaying all persons by default. An angular filter is used to display only the selected type of persons from the dropdown (working p ...

javascriptjqueryhtmlcssangularjs

Cancel an Ajax Request in ExtJS

Recently, I have been using ExtJS 6.0 and implementing an Ajax Request to fetch data from the application server. In my current setup, when the OK button is clicked in a view, it triggers an Ajax call with certain payload parameters while also displaying ...

javascriptajaxextjs

Tips for deactivating a text field once a selection drop-down option has been chosen

I have been searching for a while on the internet but I couldn't find what I was looking for. How can I disable a text field when a select drop down is selected with a value (not empty)? It would also be nice to toggle it. When there is no option se ...

javascriptjqueryhtmlcss

Unusual behavior of .replace() function observed in Chrome browser

<div> <input type="text" class="allownumericwithdecimal"/>saadad </div> $(".allownumericwithdecimal").live("keypress keyup ", function (event) { $(this).val($(this).val().replace(/[^0-9\.]/g, '')); var text = ...

javascriptjqueryreplace

The issue of jQuery, Ajax, and MVC6 parameters becoming null after an Ajax request has been identified

Hello everyone, I am a beginner in asp.net core, c# and MVC 6. Currently, I am facing an issue with sending data over ajax to my controller. function sendAjaxData() { $.ajax({ url: "AjaxWithData", // using hardcoded value for testing purpose type ...

javascriptjqueryajaxasp.net-core-mvc

The issue of height and width always being zero in Chrome when using Classic ASP with JavaScript

Within my markup, I have an image field that I am setting the source for using JavaScript. I am in need of its height and width, so I utilized the image.height() and image.width() methods. Despite working properly in Internet Explorer, these methods do not ...

javascripthtmlcssasp-classic