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

Book a call

Read My Stories

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Publishing a JavaScript Library Online: The Definitive Guide

Too Long; Didn't Read

Company Mentioned

Akash Joshi

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Publishing a JavaScript Library Online: The Definitive Guide

Too Long; Didn't Read

Company Mentioned

Akash Joshi

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES