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, , 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 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 , , , 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. "Browser based bundler" codesandbox issue BrowserFS memfs rollup-plugin-node-builtins After trying a different approach, I successfully ran webpack4 in the browser ! To be precise, you can run use to run Node.js library in your browser. nodebowl Simple: https://nodebowl.com/static/examples/simple.html < = > script src "../../dist/nodebowl.js" </ > script < > script { fs, run } = .nodebowl;
  fs.writeFileSync( , );
  fs.writeFileSync( , );
  run( ); const window '/foo.js' `
    module.exports = 1;
  ` '/index.js' `
    const num = require('./foo');
    alert(num);
  ` '/index.js' </ > script Webpack: In this example, the browser will download a webpack node_modules and then run webpack' compiler in the browser. https://nodebowl.com/static/examples/webpack.html install webpack node_modules... please wait... click, compile webpack /app/src/index.js import foo from './foo';
console.log(foo); /app/src/foo.js import foo from './foo';
console.log(foo); /app/webpack.js const path = require('path');
const fs = require('fs');
const webpack = require('webpack');

webpack({
  mode: 'development',
  entry: path.join(__dirname, 'src', 'index.js'),
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js'
  },
}, (err, stats) => {

  if (err || stats.hasErrors()) {
    console.log('error');
    return;
  }

  console.log('success');

  const bundlePath = path.join(__dirname, 'dist', 'bundle.js');
  const data = fs.readFileSync(bundlePath, 'utf8');
  document.getElementById('bundle').value = data;
  
}); /app/dist/bundle.js < = > script src "../../dist/nodebowl.js" </ > script < = > h1 id "loading" </ > h1 < = = = > button onclick "compile()" id "compile" style "display: none;" </ > button < > div < > p </ > p < = = > textarea id "index" style "width: 600px;height: 100px;" </ > textarea </ > div < > div < > p </ > p < = = > textarea id "foo" style "width: 600px;height: 100px;" </ > textarea </ > div < > div < > p </ > p < = = > textarea id "webpack" style "width: 600px;height: 100px;" </ > textarea </ > div < > div < > p </ > p < = = > textarea id "bundle" style "width: 600px;height: 100px;" </ > textarea </ > div < > script { fs, run, helpers } = nodebowl; fs.mkdirSync( );
  fs.mkdirSync( ); helpers.installFromZip( ).then( { .getElementById( ).style.display = ; .getElementById( ).style.display = ;
  }); {
    fs.writeFileSync( , .getElementById( ).value);
    fs.writeFileSync( , .getElementById( ).value);
    fs.writeFileSync( , .getElementById( ).value);
    
    run( );
  } const /*
    -- app
    ----- src
    -------- index.js
    -------- foo.js
    ----- webpack.js
    ----- node_modules
  */ '/app' '/app/src' // install node_modules 'node_modules.zip' => () document 'loading' 'none' document 'compile' 'block' ( ) function compile '/app/src/index.js' document 'index' '/app/src/foo.js' document 'foo' '/app/webpack.js' document 'webpack' '/app/webpack.js' </ > script You can also visit to see more code and examples. https://github.com/nodebowl/nodebowl

Different

Too Long; Didn't Read

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

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

Too Long; Didn't Read

Company Mentioned

JIACHENG

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

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

Too Long; Didn't Read

Company Mentioned

JIACHENG

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES