This content originally appeared on Level Up Coding - Medium and was authored by John C. Lokman
Software Engineering
With this zero-config method, you can convert any Node.js module to a .js file that you can include in your HTML file
TL;DR
Using Browserify — and a zero-config procedure — you can convert any node.js module to a .js file which you can use in a browser. You can also routinely include Node.js’s require statements in your .js files and let them work in both Node.js and web browsers. Here's how.
Install Browserify
First, install Browserify:
Convert a Node Module to a JS File You can Include in Your HTML File
Browserify allows you to use Node.js’s require keyword in web browsers (next section). But, sometimes, you may want to keep your JS files vanilla and not mix any require statements in them. Instead of complicating your workflow, you might want to merely convert a node module (e.g., from NPM) to a .js file you can use in your browser and not have anything to do with Browserify after you're done with the conversion.
You can convert a node module to its web-browser-compatible version with this single shell command:
(Of course, you need to have myNodeModule already installed).
Then you can include it in your HTML file:
This works on multi-file modules, by the way. So, if you noticed that the node module you want to convert has multiple JS files in it, you don’t need to worry about it — Browserify includes them all.
There may come a time where you no longer can stay with vanilla JS and need to include require statements in your own .js files. Those files need to work in both node.js and web browsers. Browserify can help there and do it more efficiently than this one-liner method. Read on if you would like to know how.
Make Your Scripts Run in a Browser
Assume you have a js file in which there is a Node module required.
If you try to run this file in your web browser, you’ll get an error:
That’s exactly where Browserify comes in. It makes Node’s require function work with browsers. It achieves this by converting require to something that browsers can work with.
(More specifically, Browserify copy-pastes the contents of the modules you required in myFile.js intomyBundle.js, along with the original content of myFile.js. That's why it's apt to call the resulting file a bundle.)
You can convert your .js file to one that is compatible with a web browser by using:
Then you can run the resulting myBundle.js in your browser by adding this into your HTML file:
(Above, ./ stands for 'current folder'. You can also use an absolute path.)
Automate the Process
Repeat it enough times, and even the smallest effort can become cumbersome. Although what we learned is useful, it’s not fun if you have to convert your files with Browserify each time you make a change to them. This is why, as a next step, you might want to use watchify to auto-run Browserify when your code changes. If you’d like to take it one step further, you can also refresh your browser automatically on changes using beefy, and achieve live-reload. I may cover this in another story.
In Conclusion
Using Browserify, you can now convert a node module to run in a web browser and not look back. You can also include .js files in your workflow that can run in both Node and web browsers. If you do the latter, automation will likely increase your quality of life considerably, so you may want to invest some of your time to set it up by checking the links above.
I hope you enjoyed reading and found this useful.
Happy coding!
Use this One-Liner to Make any Node.js Module Run in a Web Browser was originally published in Level Up Coding on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Level Up Coding - Medium and was authored by John C. Lokman
John C. Lokman | Sciencx (2021-08-26T13:30:17+00:00) Use this One-Liner to Make any Node.js Module Run in a Web Browser. Retrieved from https://www.scien.cx/2021/08/26/use-this-one-liner-to-make-any-node-js-module-run-in-a-web-browser/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.