jQuery library to NPM module: How to Update?

Hi,

I have a jQuery library stored as a file in my local directory. It is currently being referenced in my project. I want to keep using that file, but from an NPM module.

How do I update from a library stored as a file in my local directory to a library stored as a package in package.json? I have the package downloaded, but I’m not sure how to access it within my project correctly.

This may not be worded correctly, which is part of the reason I’m struggling with it.

Thanks,

Matt

p.s. I can ‘const lib = require(‘lib’)’ … but I’m not sure how to use that ‘lib’ in my project.

I may just not be thinking clearly enough about this.

To update from a jQuery library stored as a file in your local directory to a library stored as a package in your package.json file, you can follow these steps:

  1. Install the jQuery library as an NPM module using the npm install command. For example:

npm install jquery

  1. This command will add the jQuery library to your package.json file and download it to your node_modules directory.
  2. Remove the jQuery library file from your local directory. This file is no longer needed, since the library is now installed as an NPM module.
  3. Update your code to reference the jQuery library from the node_modules directory. For example, if you are using a script tag to include the library in your HTML file, you can update it to point to the library in the node_modules directory like this:

script src=“node_modules/jquery/dist/jquery.min.js”>/script

This script tag will include the jQuery library from the node_modules directory, instead of from your local directory.

  1. Update any other references to the jQuery library in your code to use the library from the node_modules directory. For example, if you are using the require function to import the library in your JavaScript code, you can update it to reference the library in the node_modules directory like this:

const $ = require(‘jquery’);

This require statement will import the jQuery library from the node_modules directory, instead of from your local directory.

I hope this helps!

No, you’re thinking clearly here. But we’d need to know how you’ve set up your project. Because:

require('lib') is the function used by Node to find and evaluate a local JS file (a module).

But a browser knows absolutely nothing about Node or require or NPM. It doesn’t have access to the filesystem on some random computer. So you can write that code, but it won’t work in the browser.

For browsers, you want a very small amount of JS, maybe all shoved in a single file, and it gets to the browser via a <script> tag in the HTML.

Actual native JS modules, they do work in the browser:

import * as $ from "./path/to/where/jquery/file/you/want.js"

Which, if, when you publish the website to a server, you also upload the dependencies, will work.

Installing things via npm then referencing them with direct paths to the exact files you want is not very useful though, which is why tools for bundling up JS you’ve installed/written in development into one file for you to use in a <script> tag exist – WebPack, Vite, Parcel, ESBuild etc.

You write your code as modules, split across different files, and you can import (or require) stuff. Then you run the bundler and it complies all the stuff you’ve used/written down into one file (or files) you can reference in that script tag. Then when you put your stuff in a server, you can just upload the HTML, CSS and that file and off you go.

So, to reiterate, need to know how you’ve set up your project. You can do your “install jQuery with NPM, then require it in files that use it” (though note you proba ly want to be using the native import/export syntax, everything is moving to that). But to do that you need a tool set up to turn that into something more useful for the browser.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.