无法从浏览器运行节点模块。

Question

过去两天尝试在浏览器中使用require（'modules'）和webpack，当我在5分钟内在browserify中做同样的事情时......

这是我的 webpack.config.js

var webpack = require('webpack');
var path = require('path');
var fs = require('fs');

var nodeModules = {};
fs.readdirSync('node_modules')
  .filter(function(x) {
    return ['.bin'].indexOf(x) === -1;
  })
  .forEach(function(mod) {
    nodeModules[mod] = 'commonjs ' + mod;
  });

module.exports = {
    entry: "./main.js",
    output: {
        filename: "bundle.js"
    }
}

然而，无论我做什么，我都会遇到某种错误。目前我正在：

bundle.js:390 Uncaught Error: Cannot find module "net"

当我运行webpack时会抛出这些错误：http://pastebin.com/RgFN3uYm

我关注https://webpack.github.io/docs/tutorials/getting-started/和http://www.pauleveritt.org/articles/pylyglot/webpack/但我仍然遇到这些错误。

我试图用它来运行它：webpack ./main.js -o bundle.js但它仍然不起作用。

如何解决这个问题？

Answer 1

您应该添加目录以解决问题。

 resolve: {
        modulesDirectories: ['./app/', './node_modules']
 }

<强>更新添加json loader

npm install --save-dev json-loader

module: {
    loaders: [
      { test: /\.json$/, loader: 'json-loader' }
    ]
  }

fs，net，tls也是node.js的库，不适用于浏览器内使用。你应该添加：

node: {
    fs: 'empty',
    net: 'empty',
    tls: 'empty'
  }

Answer 2

您的文件夹结构是什么？

你应该：

packages.json
node_modules/net/
webpack.config.js
src/main.js

然后在main.js上添加

var net = require('net');

在webpack.config.js上：

const path = require('path');

const PATHS = {
    src: path.join(__dirname, 'src'),
    dist: path.join(__dirname, 'dist')
};

module.exports = {
    entry: path.join(PATHS.src, 'main.js'),
    output: {
        path: PATHS.dist,
        filename: 'bundle.js'
    }
}

运行webpack，这一点很重要，在index.html上，指向捆绑文件，而不是main.js！

Answer 3

无法从浏览器运行节点模块。

可悲的是，它就这么简单。让我们退后一步。来自official website：

Node.js®是基于Chrome的V8 JavaScript引擎构建的JavaScript运行时。

它看起来像是一个细节，但不是本身，它是浏览器中的JavaScript运行时。但是，作为JavaScript运行时，它可以解释和运行javascript代码，并具有不同于我们在浏览器中可以执行的功能，例如require()函数。它是在Node中构建的，但不是在V8中构建的。

节点还允许编写模块。您可以用c ++编写一个节点模块，对其进行编译并将其导入Node上下文中。这是令人难以置信的优势，因为它允许javascript访问较低级别的功能，从而使服务器可以用javascript编写。

浏览器中没有低级功能。

让我们考虑一下：

const fs = require('fs');

如果在浏览器中运行，它甚至意味着什么？什么文件系统？我敢说，无论如何，我绝对不希望我访问的任何随机网站都可以访问运行它的计算机的文件系统。对于服务器，在Node环境中，必须访问文件系统。

节点模块（例如fs，tls或net）使用的低级功能在浏览器中没有等效功能，无论是用于逻辑（“什么文件系统？”）还是用于安全性（“否，您的JavaScript代码都不应该是能够创建原始TCP连接”）。

使用webpack在浏览器

3 个答案:

无法从浏览器运行节点模块。

浏览器中没有低级功能。