It’s my first time really using Node. I decided to try making a simple page that uses the node mersenne-twister package to generate a random number.
I have Node installed on my PC. I ran node init from the cli, and then installed the mersenne-twister package.
However I can’t get the following javascript to work.
<body>
<div id="app">
start
</div>
</body>
<script>
(function(){
var MersenneTwister = require('mersenne-twister');
var generator = new MersenneTwister();
let out = "got here.";
out = generator.random();
document.getElementById("app").textContent = out;
})();
</script>
When you say that you can’t get the JavaScript to work, what do you mean? Are you looking at a window in your browser and expecting to see something? If so, how is it being served up to the page you’re looking at?
The javascript seems to crash out before let out = "got here."; because when I run the page with the PHP Server extension from VS Code, the text in the app div doesn’t change from “start”. I am expecting the text in the app div to change to either a 1 or a zero.
You can’t require npm packages directly on code that runs on a browser. You might have to use something like webpack (which is a whole new slew of complex) to get that package to work on a web page.
Node is a runtime for JS code so that you can run code outside of a browser. The browser has absolutely no idea what require is, that is a Node-specific thing to make it easy to use Node’s built.in package manager (ie
NPM)
If you want to just use it in-browser, use unpkg.com and just link it as a normal script and use it that way, you cannot just use NPM + require like that (bar using a module bundler like @kevcomedia says, and +1 on that being a whole bunch of complex). Following link should work (untested):
Hey thanks for packaging that for me! I do have another question though. I thought Node was used both server side and client side? I take it if I wanted to use mersenne-twister server side I wouldn’t have to mess with webpack? Why is that?
Ah, so, Node is only used server side (that kinda meaning “just executes on a computer” rather than “executes in a browser”). It is used as a tool to build frontend code, and is very good at doing that, but when it’s used for that it just takes input code files, runs JavaScript script tools in various combinations, and spits out finished code (eg taking modules from NPM and gluing them all together into a single file that a browser can understand).
I also just tried linking directly to the js file that was installed when I ran npm install mersenne-twister and that works as well. I guess it was simple enough that UNPKG didn’t have to change anything?
Yep that’ll work as well. You can still use NPM locally if you link directly to the files, it’s just a faff (you need to figure out exactly which file you need, then do like ./node_modules/some-package/dist/index.js). I should have expanded a bit on that: what unpkg does is take advantage of how the files in an NPM package are structured to determine which file is the one you need (generally something that’s all the files used in the module bundled up into a single file that contains everything), and it means you can use NPM packages in a browser without any need to npm install anything locally, you just pop the link in a script tag.
Just re require, what it does: you install a package by npm installing it. That just searches the NPM directory for that package, and once found, uses Nodes ability to make network requests & read and write to your filesystem to copy the files from NPM into the node_modules folder in the directory you ran the command.
When you write require('mersenne-twister'), what that is going to do is, again, use Node’s ability to access the filesystem on your computer (which you do not have access to in-browser) to look in node_modules in your project, where it will look for a folder called “mersenne-twister”. If it finds that, it will look for the main file and load that (that file may then require more things, and so on).