This content originally appeared on Zell Liew and was authored by Zell Liew
(Hey, we're having problems showing images in RSS right now, so if you want a better reading experience, consider viewing this article online [here](https://zellwk.com//blog/node-modules-in-frontend-without-bundlers. We hope to fix this soon!).
It's possible to use npm packages on your frontend without any bundlers today.
This is amazing because we don't need to create complicated workflows to reuse code — we can simply retrieve the library from npm. This makes our projects simpler, more straightforward, and more welcoming for newcomers in our industry!
In this article I'm going to show you two ways to include npm packages without any bundlers. They are:
- Import the library from a CDN
- Serve up your
node_modulesfolder
Prerequisites
You can only use these methods if the library you're using uses ES Modules (ESM).
The methods I'm mentioning here do not work with Common JS modules.
Method 1: Import the packgae from a CDN
When authors push their library onto npm, CDNs like JSDelivr and unpkg updates their servers with teh latest version of these libraries immediately.
We can import these libraries in our JavaScript file. When you do this, you want to specify the version number — so the CDN can deliver the right version every time.
Here's an example where I import zlFetch.
import zlFetch from 'https://cdn.jsdelivr.net/npm/zl-fetch@4.0.1/src/index.js'
Importing libraries directly from CDNs can be unwieldy especially if you need to import the same library in many files.
A good workaround is to import all the libraries you need into a lib.js file. This will be your central place to manage dependencies.
You can then export the libraries and import them from elsewhere.
// lib.js
export const zlFetch = (
await import('https://cdn.jsdelivr.net/npm/zl-fetch@4.0.1/src/index.js')
).default
// fileOne.js
import { zlFetch } from './lib.js'
// fileTwo.js
import { zlFetch } from './lib.js'
Method 2: Serve it up from your node_modules folder
This can only be done if your server lets you serve up the node_modules folder.
Let's assume you have this project structure.
- project
|- index.html
|- js
|- main.js
|- node_modules
If your server can serve the node_modules folder, importing the library is easy — you simply traverse into the node_modulesfolder and grab the correct javascript file.
import zlFetch from '../node_modules/zl-fetch/src/index.js'
http-server is an example of a server that lets you serve up the node_modules folder. You can this method working by running the serer.
npx http-server
Sadly, you won't be able to use this method if you use Express because Express doesn't expose the node_modules folder.
That's it!
This content originally appeared on Zell Liew and was authored by Zell Liew
Zell Liew | Sciencx (2022-02-21T00:00:00+00:00) Using npm packages in the frontend without any bundlers. Retrieved from https://www.scien.cx/2022/02/21/using-node_modules-in-the-frontend-without-bundlers/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.