How to use jQuery libraries on a project with npm? - javascript

I'm trying jQuery for the first time, I know this library is becoming more and more unused, but I need it to work with it on a project.
So I initialized a jQuery project with npm install jquery, so node modules and package-lock.json were created. I wonder how should I target library files on the index.html file, I mean maybe it should be something like this <script src="./node_modules/jquery/dist/jquery.min.js"></script>. Also how should I use libraries on .js files.
I don't know if I should point file by file or how should I use library files. Maybe someone could guide me with examples or docs on how to start using a jQuery libraries on a project.

In your relevant javascript files (where you need to use jQuery) you should be doing
import $ from "jquery";
at the top. Also install and configure babel for compiling as it will
support ES6/ES2015 modules even if browsers do not yet support.

Related

How to import JavaScript libraries with ViteJS in HTML?

I am using ViteJS to npm install any libraries or packages that I need, and I plan to use vanilla JavaScript and HTML. One of the libraries I am using is called os-gui, a styling library. The docs state that I can use npm install it, but also calls for directly importing the library in the HTML like this:
Since I am not using ReactJS but ordinary HTML, and since I have not directly downloaded the library, how can I properly format the href so that it points to the correct packages that I downloaded in npm?

How to import node library into webpage using CDN

So I've created a simple program using node.js and a couple of libraries using puppeteer and kijiji-scraper from npm and I want to run it on a webpage like Github pages. In the past, I've had success using a CDN to import the node library I needed to do so by following the instructions on the readme. But for these packages, there aren't any instructions for importing using CDN. Is it just not possible to do so or am I missing something?
Packages:
https://www.jsdelivr.com/package/npm/kijiji-scraper
https://www.npmjs.com/package/puppeteer
NodeJS and the web have fundamentally different moduling systems. You won't be able to import libraries written for Node in the web. If the libraries are pure JavaScript libraries (not relying on the standard library or native modules) or are browser-based libraries relying on the DOM, then you can use Browserify to compile the library's source code into a single file and include that on the web page with a <script>. Otherwise, you'll need to restructure your application around this limitation.
In your case however, it looks like Kijiji is a client-side library and Browserify will be your solution here.
You can come to this conclusion by skimming some of its source code. You'll notice that there's a require call in it. The require function doesn't exist on the DOM API and hence will throw the error you're getting.
The solution I would use in your case would be a) Grunt or Gulp or b) compiling the code and import them statically.
If you have a more complex build chain, I would suggest including the browserify stage in it. I would also not use the CDN based library, rather use the NPM library. The browserify stage will bundle the library and all required dependencies into a single file that can be used in HTML
<script src="/static/kijiji.js"></script>
<script src="/app/index.js"></script>
I'm not sure what your file structure looks like but you get the idea.

How to only concatenate JS files with webpack

I used to use gulp for merge few static linked JS libraries files into one.
I've installed webpack and add react and few libraries as npm module. It works fine.
Now I want to completely remove gulp so I need to ONLY concatenate JS libraries (lot of jquery plugins and old 1.8 jquery itself). I don't want to install these JS libraries via npm, because it will be too much work.
When I use webpack to bundle these libraries it doesn't work, because webpack wrap these libraries and I can't use these without add requires.
Could you please tell me how to ONLY concatenate JS files into one with webpack?
Thank you.
Webpack is module bundler and that is how it works. If you just want to merge many js file into one then just use another tools like gulp. Webpack is much more.

How do I include jQuery in a project with babel, Node.js, and webpack?

Looking at the jQuery documentation on npm, I'm confused as to what I have to do to use it. I know that I can just include the script tag in my index.html to use it, but how does everything else work?
If I choose to not use the script tag, I understand that I can install with node and then import it with Babel into any file that I want to use jQuery in. But where does webpack come into play? I only have to use webpack's require if I'm not using Babel, correct? Is webpack's require an alternative to Babel's import?
It seems like either I can use Babel and Node.js or webpack and Node.js? I thought Babel and wepback serves separate purposes though, with Babel trans-compiling ECMAScript 6 to ECMAScript 5 and webpack bundling all your files into one. If I'm currently using webpack, Babel, and Node.js. What is the best way to include and use jQuery?
If you plan on working anywhere without an Internet connection, go ahead and npm install the minified version of jQuery into your modules.
Otherwise, I would use the CDN in the HTML file for easy global jQuery access. It doesn't really make a difference how you include it in your project in terms of webpack/babel methods; just be sure to stay consistent with how you import them. The only difference is that require is ECMAScript 5 and import is ECMAScript 6.

Browserify: take minified file from node module

I installed bootstrap via npm and i'd like to require it via browserify, so I use:
require('bootstrap');
But there are 2 problems here:
It takes the non minified version of bootstrap
I would also like to include the bootstrap.tpl.min file
How can i do it?
Unfortunately browserify won't solve either of those problems for you. NPM packages are meant to be small and solve one problem well and browserify's domain is resolving all the dependencies you require and packaging them up into one file for the browser.
Minification of your bundle should happen as part of your build step using gulp or grunt using a package like uglify.
Including a template file will also require some additional work if it's not included in what's exported from bootstrap. You can either require the specific file from the module if you need access to it in code, or you could copy it to the directory that you're serving up either with your build tool or using bower

Categories