What is the best method to publish my npm package so that it can be easily accessed through JSDelivr by users?

I've been working on creating an NPM package in TypeScript for educational purposes. I have set up my parcel configuration to export both an ESM build and a CJS build. After publishing it on npm, I have successfully installed and used it in both ESM-module environment and cjs environment like:

const dsa = require('awesome-dsa');
//or
const {SinglyLinkedList} = require('awesome-dsa');

or,

import dsa from 'awesome-dsa';
//or
import {SinglyLinkedList} from 'awesome-dsa';

However, I am facing confusion on how to include this package with JSDelivr.

I have tried including both:

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ea8b9d8f9985878fc78e998baadac4dac4df">[email protected]</a>/dist/esm/index.min.js"></script>

and

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fb9a8c9e8894969ed69f889abbcbd5cbd5ca">[email protected]</a>/dist/cjs/index.min.js"></script>

Both of these files exist but I'm encountering errors in the console.

What should be my next steps?

typescriptnpmes6-modulescommonjsparceljs

Answer №1

Phew, that was a close call. The key is using type=module to import an ESM module:

<script type="module" src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c4a5b3a1b7aba9a1e9a0b7a584f4eaf4eaf1">[email protected]</a>/dist/esm/index.min.js"></script>

Interestingly, the above method doesn't work as expected. Instead, try this approach:

<script type="module">
  import dsa from "https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c4a5b3a1b7aba9a1e9a0b7a584f4eaf4eaf5">[email protected]</a>/dist/cjs/index.min.js"
  const q = new dsa.LinearQueue();
</script>

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

Steps for stopping the sass --watch function on a specific folder

Successfully got my SASS up and running with the help of fantastic documentation available everywhere. The guide I followed was http://sass-lang.com/guide. sass --watch myfolder/css Running a specific command worked like a charm, enabling every change in ...

cssmacosnpmsass

Troubleshooting issue with problemMatcher in VSCode TypeScript compiler not functioning

I am looking for a problem matcher that can detect two types of issues: compilation problems related to TypeScript issues flagged by tslint This feature seems to be causing trouble in one of my projects, although it functions properly in others. Below i ...

typescriptvisual-studio-codevscode-tasks

Steps to finding the electron sha256 hash

I'm in the process of setting up electron through the cache. After some digging, I managed to find the SHA256 hash for electron version v22.0.0: 675dc6eec89d1ddd1fa1f035915944bbec766951c6cd149c5ddcc3056471a91d. Now, my goal is to upgrade to the lates ...

node.jsnpmelectronnpm-install

Utilize an npm package or Python script to convert a .3ds file to either .obj, .collada, or .g

I have a collection of .3ds format files that I need to convert into gltf format. Are there any tools available to directly convert them into either .gltf format or collada/.obj format? I have already explored npm packages for converting collada/.obj to g ...

pythonnode.jsnpmcesiumjs3ds

Exploring the depths of useDispatch and dispatch in React-Redux

I am currently analyzing the code written by a former colleague of mine. Based on my understanding, useDispatch accepts an object containing the action type and payload, which is then compared to all reducers to update the state accordingly. However, in t ...

reactjstypescriptreduxreact-hooks

Is there a way to set up custom rules in eslint and prettier to specifically exclude the usage of 'of =>' and 'returns =>' in the decorators of a resolver? Let's find out how to implement this

Overview I am currently working with NestJS and @nestjs/graphql, using default eslint and prettier settings. However, I encountered some issues when creating a graphql resolver. Challenge Prettier is showing the following error: Replace returns with (r ...

typescriptgraphqlnestjseslintprettier

Is there a way to achieve this using a fresh and sleek typescript assertion function?

Presented below is the snippet of code: type Bot = BotActive | BotInactive; class BotActive { public readonly status = "active"; public interact() { console.log("Hello there!"); } } class BotInactive { public ...

typescripttypescript-types

Utilize the authenticated page across various tests in Playwright for efficient testing

Starting out fresh with playwright and node.js frameworks Currently in the process of developing a framework using playwright with typescript. Everything was smooth sailing until I reached the point where I needed to run my tests sequentially on the same ...

node.jstypescriptautomated-testsplaywrightplaywright-test

What is the best way to retrieve the values of a select element from LEVEL 4 within the form submission of LEVEL 3?

To enhance readability, the intricate code has been abstracted. Within our Angular 2 project, we are working with a component called <top-component> (LEVEL 1): <top-component> </top-component> This component includes a template known a ...

javascripthtmlangulartypescriptdataflow

Tips for executing a custom task during a gradle build?

I've encountered an issue with my Spring Boot web application that utilizes Gradle and NPM. I'm looking to streamline the process by having npm install automatically run when I execute gradle build. Below is a snippet of my build file: plugins { ...

gradlenpmbuild.gradlenpm-install

What could be causing routerLink to malfunction despite correct configuration?

Is routerLink properly placed in the view? <p><a routerLink="/registration" class="nav-link">Register</a></p> Checking my app.module import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular ...

angulartypescript

What are the best practices for maximizing the efficiency of bootstrap-sass?

Currently, I am exploring npm modules and came across bootstrap-sass. After downloading the modules, I was seeking a solution to compile scss into the static folder of my application, as well as the js bootstrap files. However, after checking the npmjs do ...

cssnode.jstwitter-bootstrapnpmsass

Angular2's ErrorHandler can cause code to malfunction when an error occurs

import { Injectable, ErrorHandler, Inject, Injector } from '@angular/core'; import { MessengerService } from '../services'; import { MessageTypeEnum } from '../../shared'; @Injectable() export class AppErrorHandler extends Er ...

angulartypescripterror-handling

A guide on setting up a countdown timer in Angular 4 for a daily recurring event with the help of Rxjs Observable and the Async Pipe

I'm currently working on developing a countdown timer for a daily recurring event using Angular 4, RxJS Observables, and the Async Pipe feature. Let's take a look at my component implementation: interface Time { hours: number; minutes: numbe ...

javascriptangulartypescripttimerrxjs

Error in InversifyJs exclusively occurring in Internet Explorer

I'm currently utilizing Typescript with webpack for the development of a web application. Recently, I made the transition to using the inversifyJs DI library. However, I am encountering a specific error only when testing on Internet Explorer (version ...

internet-explorertypescriptwebpackinversifyjs

Managing project dependencies using the npm and git protocols

I am currently facing an issue at my workplace where we are restricted by an HTTP Proxy that denies the git protocol on port 9418. This becomes a problem as my project has NPM dependencies, some of which rely on the git protocol. For example, in my package ...

gitnpm

What is the purpose of specifying an 'any' return type in TypeScript?

As an example: function retrieveUserInformation(input: any): any { return input } It may seem unnecessary to declare that "any data type can be returned". Is there a specific reason for this? ...

typescript

Expanding the current @types type definition to encompass additional properties that are currently absent

Currently, I am utilizing the most recent @types for leaflet in my project (v1.2.5), however, they do not align with the latest version of leaflet (1.3.x). Specifically, their LayerGroup interface lacks a setZIndex property which I need to include by exte ...

typescriptleaflettypescript-typings

Develop a child interface within Typescript

I am unsure if the term sub interface is correct, but my goal is to develop an interface that inherits all properties from the super interface except for some optional ones. Despite referring to the TypeScript documentation for interfaces, I was unable to ...

typescript

Tips for minimizing delay after user input with Material UI

Background I'm currently working on a website project that includes a carousel of MUI cards using a unique stack as the underlying component. However, I've encountered an issue where there is a noticeable 4-second delay whenever I try to scroll ...

reactjstypescriptnext.jsmaterial-ui