This is a continuation of my . Refer it to learn how to publish code to npm previous guide This article focuses on publishing code for use in a . browser There will be 2 sections to this guide : Publishing browser-native code 🌐 Converting an npm module for use in a browser 🔃 For both cases, we will eventually deploy the code to to leverage the power of the free CDN npm unpkg 1. Publishing browser-native code 🌐 This one is easier. As the code is already in browser-usable format, it just needs to be included in the HTML code via the tags. <script> This will make its variables and functions available to the browser automatically. To publish it to a CDN : Use to initialize a for the repository. npm init -y package.json Publish it to npm via the steps given here : Steps to Publish Navigate to according to the repository name provided by you while publishing to . This is the CDN auto-generated from npm. unpkg.com/repository-name npm If you get your desired file, you can use it in the browser via tags. If you get a file directory structure, simply navigate to the desired file and include it in your frontend via tags. <script> <script> Access your variables and functions directly by name 2. Converting an npm module for use in a browser 🔃 bundles all the dependencies of your js file into a single file, and exports a to for use within the browser. Browserify variable window Install Browserify . npm add browserify -g To generate your browser usable file, do browserify ./main.js -o ./bundle.js -s variableName Here, is the file you want to use in browser, main.js flag is used to define the location of the output file, and -o flag is used to define the variable name exported to the browser -s Publish to npm including your bundled JS file. Navigate to to access the CDN generated for your repo. unpkg.com/repository-name If you get your desired file, you can use it in the browser via tags. If you get a file directory structure, simply navigate to the desired file and include it in your frontend via tags. <script> <script> Access your code via the variable name that you exported. That’s it, you successfully published your JS library 🎉 ! Pat yourself on the back, you earned it 😁 ! Get in touch !! Github LinkedIn Twitter

Twitter

Building a Minimum Viable PWA [A Step by Step Guide]

Converting Your JS Boiler-Plate into NPM Modules : The Definitive Guide

Book a call

Read My Stories

Too Long; Didn't Read

Make resilience your competitive advantage

Publishing a JavaScript Library Online: The Definitive Guide

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Building React Applications with Deno and AlephJS

The Noonification: Reduce Javascript: Master the Basics (1/11/2023)

The Noonification: Satoshi Might Be a Bitcoin ETF Skeptic (1/13/2024)

The Noonification: Small Puddle of Freedom (11/25/2022)

The Noonification: How to Use AI for Your B2B Marketing (11/11/2022)

Building React Applications with Deno and AlephJS

The Noonification: Reduce Javascript: Master the Basics (1/11/2023)

The Noonification: Satoshi Might Be a Bitcoin ETF Skeptic (1/13/2024)

The Noonification: Small Puddle of Freedom (11/25/2022)

The Noonification: How to Use AI for Your B2B Marketing (11/11/2022)

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps