如何在浏览器中运行 Node.js [教程]

“基于浏览器的捆绑程序”是一个非常有趣的主题。

例如，我们可以在浏览器而不是服务器的nod​​ejs环境中编译Webpack代码吗？ 这样做的好处是我们不需要服务器的资源来进行编译。

对于此问题有不同的解决方案。 例如， codesandbox定义了基于浏览器的编译策略，可用于在浏览器中打包react 、vue等。 也可以很容易地理解，codeandbox是webpack的浏览器版本。

但是问题是，我们可以在浏览器中执行webpack而不是做一个新的webpack吗？ 甚至实现一些基于Webpack的库？

有一个非常早期的WebPack 问题讨论它。 但是此演示太旧了，无法运行最新版本的webpack。

我想知道我们是否可以做一个浏览器环境来模拟正在运行的Node.js。 Node.js和Chrome均为v8，并且许多Node.js库代码都可以在Chrome中执行。 此外，我发现了一些很酷的库，例如 BrowserFS 、 memfs 、 rollup-plugin-node- builtins等。这些库可以帮助我们构建此环境。 但是有一个关键模块，Node.js“模块”不可用，我们需要从Node.js对其进行修改。 Node.js支持cjs和esm，但是为了简化问题，我暂时仅开发cjs模块。 接下来，组合所有模块并尝试运行最简单的Node.js演示。

在尝试了其他方法之后，我成功在浏览器中运行了webpack4！ 确切地说，您可以在浏览器中运行使用nodebowl运行Node.js库。

简单： https ： //nodebowl.com/static/examples/simple.html

< script src = "../../dist/nodebowl.js" > 
< script > 
  const { fs, run } = window .nodebowl;
  fs.writeFileSync( '/foo.js' , `
    module.exports = 1;
  ` );
  fs.writeFileSync( '/index.js' , `
    const num = require('./foo');
    alert(num);
  ` );
  run( '/index.js' );
 

Webpack： https ://nodebowl.com/static/examples/webpack.html在此示例中，浏览器将下载一个webpack node_modules，然后在浏览器中运行webpack的编译器。

< script src = "../../dist/nodebowl.js" > 

< h1 id = "loading" > install webpack node_modules... please wait... 
< button onclick = "compile()" id = "compile" style = "display: none;" > click, compile webpack 
< div >
  < p > /app/src/index.js 
  < textarea id = "index" style = "width: 600px;height: 100px;" >
import foo from './foo';
console.log(foo);
  


< div >
  < p > /app/src/foo.js 
  < textarea id = "foo" style = "width: 600px;height: 100px;" >
import foo from './foo';
console.log(foo);
  


< div >
  < p > /app/webpack.js 
  < textarea id = "webpack" style = "width: 600px;height: 100px;" >
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;
  
});
  


< div >
    < p > /app/dist/bundle.js 
    < textarea id = "bundle" style = "width: 600px;height: 100px;" > 
  

< script > 
  const { fs, run, helpers } = nodebowl;
  /*
    -- app
    ----- src
    -------- index.js
    -------- foo.js
    ----- webpack.js
    ----- node_modules
  */
  fs.mkdirSync( '/app' );
  fs.mkdirSync( '/app/src' );
  // install node_modules
  helpers.installFromZip( 'node_modules.zip' ).then( () => {
    document .getElementById( 'loading' ).style.display = 'none' ;
    document .getElementById( 'compile' ).style.display = 'block' ;
  });
  function compile ( )  {
    fs.writeFileSync( '/app/src/index.js' , document .getElementById( 'index' ).value);
    fs.writeFileSync( '/app/src/foo.js' , document .getElementById( 'foo' ).value);
    fs.writeFileSync( '/app/webpack.js' , document .getElementById( 'webpack' ).value);
    
    run( '/app/webpack.js' );
  }
 

您也可以访问https://github.com/nodebowl/nodebowl以查看更多代码和示例。

原文链接: https://hackernoon.com/how-to-run-nodejs-in-a-browser-wc4s32by