How to Run Node.js in a Browser [Tutorial]

How to Run Node.js in a Browser [Tutorial]

“Browser based bundler” is a very interesting topic.

For example, can we compile the webpack code in the browser instead of the server’s nodejs environment? The advantage of this is that we don’t need the server’s resources for compilation.

There are different solutions to this problem. For example, codesandbox, which defines a browser-based compilation strategy, can be used to package reacts, vue, etc. in the browser. It can also be easily understood that codeandbox does a browser version of webpack.

But the question is, can we execute webpack in the browser instead of doing a new one? Even implementing some webpack-based libraries?

There is a very early webpack issue discussing it . But this demo is too old to run the latest version of webpack.

I am wondering if we can do a browser environment to simulate running Node.js. Node.js and Chrome is both v8, and many of the Node.js lib code can be executed in Chrome. In addition, I found some cool libraries, such as BrowserFS, memfs, rollup-plugin-node-builtins, etc. These libraries can help us build this environment. But there is a key module, Node.js “module” is not available, we need to modify it from Node.js. Node.js supports cjs and esm, but to simplify the problem, I only develop the cjs module for the time being. Next, combine all the modules and try to run the simplest Node.js demo.