Adding a JQuery Plugin to Brunch 2.8

I am currently working on a Brunch project with version 2.8.2. This particular version of Brunch is compatible with front-end dependencies through NPM. Additionally, I have integrated the Typescript Brunch plugin and successfully implemented import $ = require("jquery") in my code.

However, I am facing an issue when it comes to loading a JQuery plugin for use in my project.

Simply adding the plugin to package.json does not result in it appearing in my compiled vendor.js file as expected, since it is not required anywhere in the codebase.

The method of using 

npm: {
  globals: {
    "$": "jquery-validation"
  }
}

is effective for making JQuery a global variable, but it seems that this approach does not work for loading the jquery-validation plugin as it depends on JQuery itself and does not export its own module.

Attempting to require("jquery-validation") in my Typescript code is also unsuccessful due to the plugin's .d.ts file correctly defining it as an extension of JQuery rather than a standalone module.

Is there a solution to achieve what I am attempting to do?

jquerytypescriptnpmbrunch

Answer №1

To make JQuery accessible globally, I made sure to include it in my project and also forced the inclusion of the JQuery Validation plugin in my vendor.js. This required adding specific configurations to my brunch-config.js:

npm: {
  globals: {
    "jQuery": "jquery"
  },
  static: [
    "node_modules/jquery-validation/dist/jquery.validate.js"
  ]
}

I had to tweak the globals section a bit to ensure that plugins recognized the global variable name as jQuery instead of $.

For more detailed information, refer to the Brunch documentation under the NPM section.

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 could be the reason behind npm installing a previous version of the dependency I specified?

My file is organized like this: / /package.json /* workspace root */ /server/ /server/package.json /* directly includes "is-plain-object": "^5.0.0" */ /client/ Upon running npm i --workspace server, two separat ...

node.jsnpmnpm-workspaces

JSON request returning a value that does not exist in the specified .json document

While I may be new to JSON and JavaScript, I am encountering an issue that is perplexing me. On a webpage, I have two scripts included - jQuery and "scripts2.js". In the same directory as "scripts2.js" resides a JSON file named "settings.json". Within my " ...

javascriptjqueryjson

Creating an Http interceptor in Ionic 3 and Angular 4 to display a loading indicator for every API request

One of my current challenges involves creating a custom HTTP interceptor to manage loading and other additional functions efficiently. Manually handling loading for each request has led to a considerable increase in code. The issue at hand: The loader is ...

javascriptangulartypescriptionic2

Troubleshooting issues with setTimeout in Angular 2 using typescript

Within this HTML code, I am monitoring the page for idle activity. If the user is idle for a certain period of time, an inactivity alert will be displayed and the user will be logged out. <div *ngIf="environmentData" xmlns="http://java.sun.com/jsf/html ...

angulartypescriptsettimeout

Targeted filtering for specific values

I need assistance with filtering the value of PLAN https://i.sstatic.net/QZEqu.png When I input a value like 1 https://i.sstatic.net/N1SCz.png The filter works correctly... However, if I input the value 4, I encounter an issue... https://i.sstatic.ne ...

angulartypescript

Encountering an unresolved variable issue in Angular 2 rc.1 and PhpStorm 2016.1.2

Ever since I upgraded Angular 2 in my project to rc.1, my IDE, PHPStorm 2016.1. has been having trouble finding many properties and static functions, such as those from the Observable class (rxjs) like Observable.of and Observable.forkJoin. I primarily us ...

javascriptangularjstypescriptphpstormrxjs

What is the best approach for showcasing the contents of an array with class attributes in TypeScript?

Here is an example code snippet for adding a single item from a pre-written array to a table. In this case, we have a simple name element so only one "< td>${people[i]}< /td>" tag is needed to display the names. let people: string [] = ["Jack" ...

arraystypescriptfunctionclass

Develop a "Read More" button using Angular and JavaScript

I am in search of all tags with the class containtText. I want to retrieve those tags which have a value consisting of more than 300 characters and then use continue for the value. However, when I implement this code: <div class=" col-md-12 col-xl-12 c ...

javascriptangulartypescript

Tips for removing elements inserted with before() function

I have successfully implemented an alert-style div that is displayed when a user selects an option from a form and clicks the add to cart link. The jQuery .before() method is used to add the user's form selection to the div. I am facing two issues th ...

javascriptjquery

Problems with Firefox's rendering of CSS

Currently, I am developing a website using polymer elements such as code-header-panel and paper-tabs. In my markup, I have several <section> tags that I want to display or hide based on specific paper-tab clicks. Here is the HTML markup for the tab ...

jqueryhtmlcssfirefoxpolymer

Adjust the message background color once it has been viewed

One of the buttons attached to a mat-menu has a red background when clicked. If you want to see it in action, check out this Stackblitz. .list-item.error { background-color:#FCE8FF; } However, if the button is clicked more than two times, the color sh ...

javascriptcssangulartypescript

Refine the search results by focusing on a specific property value

Assume I have a type defined as follows: type Result = {error:true,response: undefined} | {error:undefined, response:{nick:string}} This type will either contain an error property or a response, but not both. Now, I am attempting to create a function tha ...

typescripttypescript-generics

Utilize Google Place Autocomplete to restrict input to only addresses recommended by autocomplete suggestions

My application includes an input field for users to enter an address, with the help of Google's Place Autocomplete feature for address suggestions. The location field is mandatory. I aim to restrict users from submitting the form with an address that ...

javascriptjquerynode.jsautocompletegoogle-places-api

Encountered an issue with ERESOLVE when trying to upgrade to a newer version, unable to resolve the dependency

After updating to node version v16.16.0 and npm version 8.11.0, I removed node modules and package-lock.json before running 'npm install'. However, I encountered an error during the installation process: npm WARN config global '--global&apos ...

npmnpm-installpackage.jsondependency-managementstylelint

Toggling D3 JS graphs when radio buttons are clicked is not working as expected

Working on integrating a D3 SVG chart with jQuery to trigger radio buttons displaying different graphs, using a helpful answer from here. Fiddle : http://jsfiddle.net/k3WJN/13/ Data is fetched from various URLs to populate log count by day and week. Belo ...

javascriptjqueryhtmld3.jssvg

Double invocation of ActivatedRoute.params.subscribe method observed

To extract URL parameters, I'm utilizing the ngOnInit() method where I've implemented the following snippet: this.activatedRoute.queryParams.subscribe(params => { console.log(params); // actual implementation here }); Yet, upon initi ...

node.jsangulartypescriptobservable

Creating a fading header effect with a gradual transition as it disappears

I'm working on a header that should disappear when the user scrolls down and reappear when scrolling back up. I've managed to make the header reappear with a smooth transition, but the disappearing effect is instant, which is not what I want. I n ...

htmljquerycss

Using "array_agg" in a "having clause" with Sequelize

I am facing a particular scenario with my database setup. I have three tables named computers, flags, and computerFlags that establish relationships between them. The structure of the computerFlags table is as follows: computerName | flagId computer1 | ...

javascripttypescriptpostgresqlsequelize.js

New alternative for websocket-server in BrowserQuest

I am currently in the process of setting up Mozilla's BrowserQuest, but I have encountered a roadblock. The game relies on the now deprecated websocket-server node package, which has been removed from the npm library. In an attempt to find a solution ...

node.jswebsocketnpmbrowserquest

Troubleshooting Nested jQuery Plugin Selector Problems

I'm looking to have the ability to nest one plugin inside another. However, my selectors seem too broad and are capturing elements within the nested plugin as well. For instance, consider the following HTML structure: <div class="my-plugin"> ...

javascriptjqueryjquery-selectors