reactjs - 使用 Reactjs 和 webpack 运行gunjs会在控制台中抛出引用错误

Question

我正在尝试安装gun.js并在Reactjs webpack捆绑应用程序中运行它

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

module.exports = {
    devtool: 'source-map',
    target: 'node',
    node: {
        fs: 'empty'
    },
    entry: {
        workboard: './src/workboard/main.js'
    },
    output: {
        path: __dirname, filename: '/public/[name]/js/bundle.js'
    },
    module: {
        loaders: [
            {
                test: /.js?$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                query: {
                    presets: ['es2015', 'react', 'stage-2', 'stage-1']
                }
            }
        ],
        noParse: [/aws-sdk/]
    },
    plugins: [
        new webpack.DefinePlugin({ "global.GENTLY": false })
    ]
};

package.json 看起来像这样

{
  "name": "workbench",
  "version": "1.0.0",
  "description": "My local workbench",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "cd public && serve"
  },
  "author": "kn@unisport.dk",
  "license": "ISC",
  "dependencies": {
    "babel-core": "^6.7.7",
    "babel-preset-stage-1": "^6.5.0",
    "babel-preset-stage-2": "^6.5.0",
    "fetch": "^1.0.1",
    "react": "^0.14.8",
    "react-dom": "^0.14.8",
    "react-router": "^2.3.0"
  },
  "devDependencies": {
    "babel-core": "^6.5.2",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.5.0",
    "babel-preset-react": "^6.5.0",
    "bufferutil": "^1.2.1",
    "gun": "^0.3.992",
    "loader-utils": "^0.2.15",
    "url": "^0.11.0",
    "utf-8-validate": "^1.2.1",
    "webpack": "^2.1.0-beta.5"
  }
}

main.js 中的 js 测试代码如下所示

/**
 * Main.js
 */
'use strict';

/**
 * Setup Gun
 * TODO: add peers
 */
var Gun = require('gun');
var gun = Gun();

var React = require('react');
var ReactDom = require('react-dom');

var App = React.createClass({
    render() {
        return <div>Hello</div>
    }
});

var ROOT = document.getElementById('appmount');

ReactDom.render(
    <App />,
    ROOT
);

但是当我加载包含bundle.js的index.html时，我在控制台中收到此错误

Uncaught ReferenceError: require is not defined

module.exports = require("url");


/*****************
 ** WEBPACK FOOTER
 ** external "url"
 ** module id = 21
 ** module chunks = 0
 **/

我错过了什么？

更新按照建议将节点更改为“web”，但这给了我

ERROR in ./~/ws/lib/WebSocketServer.js
Module not found: Error: Can't resolve 'tls' in '/Users/kn/Documents/workbench/node_modules/ws/lib'
 @ ./~/ws/lib/WebSocketServer.js 15:10-24

ERROR in ./~/diffie-hellman/lib/primes.json
Module parse failed: /Users/kn/Documents/workbench/node_modules/diffie-hellman/lib/primes.json Unexpected token (2:11)
You may need an appropriate loader to handle this file type.
| {
|     "modp1": {
|         "gen": "02",
|         "prime": "ffffffffffffffffc90fdaa22168c234c4c6628b80dc1cd129024e088a67cc74020bbea63b139b22514a08798e3404ddef9519b3cd3a431b302b0a6df25f14374fe1356d6d51c245e485b576625e7ec6f44c42e9a63a3620ffffffffffffffff"
 @ ./~/diffie-hellman/browser.js 2:13-41

ERROR in ./~/elliptic/package.json
Module parse failed: /Users/kn/Documents/workbench/node_modules/elliptic/package.json Unexpected token (2:9)
You may need an appropriate loader to handle this file type.
| {
|   "_args": [
|     [
|       {
 @ ./~/elliptic/lib/elliptic.js 5:19-45

ERROR in ./~/parse-asn1/aesid.json
Module parse failed: /Users/kn/Documents/workbench/node_modules/parse-asn1/aesid.json Unexpected token (1:25)
You may need an appropriate loader to handle this file type.
| {"2.16.840.1.101.3.4.1.1": "aes-128-ecb",
| "2.16.840.1.101.3.4.1.2": "aes-128-cbc",
| "2.16.840.1.101.3.4.1.3": "aes-128-ofb",
 @ ./~/parse-asn1/index.js 2:12-35

安装 tls 会导致此错误

    ERROR in ./~/diffie-hellman/lib/primes.json
    Module parse failed: /Users/kn/Documents/workbench/node_modules/diffie-hellman/lib/primes.json Unexpected token (2:11)
    You may need an appropriate loader to handle this file type.
    | {
    |     "modp1": {
    |         "gen": "02",
    |         "prime": "ffffffffffffffffc90fdaa22168c234c4c6628b80dc1cd129024e088a67cc74020bbea63b139b22514a08798e3404ddef9519b3cd3a431b302b0a6df25f14374fe1356d6d51c245e485b576625e7ec6f44c42e9a63a3620ffffffffffffffff"
     @ ./~/diffie-hellman/browser.js 2:13-41

    ERROR in ./~/elliptic/package.json
    Module parse failed: /Users/kn/Documents/workbench/node_modules/elliptic/package.json Unexpected token (2:9)
    You may need an appropriate loader to handle this file type.
    | {
    |   "_args": [
    |     [
    |       {
     @ ./~/elliptic/lib/elliptic.js 5:19-45

    ERROR in ./~/parse-asn1/aesid.json
    Module parse failed: /Users/kn/Documents/workbench/node_modules/parse-asn1/aesid.json Unexpected token (1:25)
    You may need an appropriate loader to handle this file type.
    | {"2.16.840.1.101.3.4.1.1": "aes-128-ecb",
    | "2.16.840.1.101.3.4.1.2": "aes-128-cbc",
    | "2.16.840.1.101.3.4.1.3": "aes-128-ofb",
     @ ./~/parse-asn1/index.js 2:12-35

I tried to install primes, but Im getting

ERROR in ./~/diffie-hellman/lib/primes.json
Module parse failed: /Users/kn/Documents/workbench/node_modules/diffie-hellman/lib/primes.json Unexpected token (2:11)
You may need an appropriate loader to handle this file type.
| {
|     "modp1": {
|         "gen": "02",
|         "prime": "ffffffffffffffffc90fdaa22168c234c4c6628b80dc1cd129024e088a67cc74020bbea63b139b22514a08798e3404ddef9519b3cd3a431b302b0a6df25f14374fe1356d6d51c245e485b576625e7ec6f44c42e9a63a3620ffffffffffffffff"
 @ ./~/diffie-hellman/browser.js 2:13-41

ERROR in ./~/elliptic/package.json
Module parse failed: /Users/kn/Documents/workbench/node_modules/elliptic/package.json Unexpected token (2:9)
You may need an appropriate loader to handle this file type.
| {
|   "_args": [
|     [
|       {
 @ ./~/elliptic/lib/elliptic.js 5:19-45

ERROR in ./~/parse-asn1/aesid.json
Module parse failed: /Users/kn/Documents/workbench/node_modules/parse-asn1/aesid.json Unexpected token (1:25)
You may need an appropriate loader to handle this file type.
| {"2.16.840.1.101.3.4.1.1": "aes-128-ecb",
| "2.16.840.1.101.3.4.1.2": "aes-128-cbc",
| "2.16.840.1.101.3.4.1.3": "aes-128-ofb",
 @ ./~/parse-asn1/index.js 2:12-35

更改main.js内的代码后再次更新@marknadal 的建议奏效了

main.js

/**
 * Main.js
 */
'use strict';

/**
 * Setup Gun
 * TODO: add peers
 */
var Gun = require('gun/gun');
var peers = [
    'http://localhost:8080/gun'
];
var gun = Gun(peers);

var React = require('react');
var ReactDom = require('react-dom');

var App = React.createClass({
    render() {
        return <div>Hello</div>
    }
});

var ROOT = document.getElementById('appmount');

ReactDom.render(
    <App />,
    ROOT
);

和 webpack.config

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

module.exports = {
    devtool: 'source-map',
    target: 'web',
    node: {
        fs: 'empty'
    },
    entry: {
        workboard: './src/workboard/main.js'
    },
    output: {
        path: __dirname, filename: '/public/[name]/js/bundle.js'
    },
    module: {
        loaders: [
            {
                test: /.js?$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                query: {
                    presets: ['es2015', 'react', 'stage-2', 'stage-1']
                }
            },
            {
                test: /\.json$/,
                loader: 'json',
                include: [
                        /node_modules/
                    ]
            }
        ],
        noParse: [/aws-sdk/]
    },
    plugins: [
        new webpack.DefinePlugin({ "global.GENTLY": false })
    ]
};

和 package.json - 它确实包含了比该项目所需的更多内容，如果您想尝试自己运行它，请忽略它

{
  "name": "workbench",
  "version": "1.0.0",
  "description": "My local workbench",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "cd public && serve"
  },
  "author": "kn@unisport.dk",
  "license": "ISC",
  "dependencies": {
    "babel-core": "^6.7.7",
    "babel-preset-stage-1": "^6.5.0",
    "babel-preset-stage-2": "^6.5.0",
    "express": "^4.14.0",
    "fetch": "^1.0.1",
    "react": "^0.14.8",
    "react-dom": "^0.14.8",
    "react-router": "^2.3.0"
  },
  "devDependencies": {
    "babel-core": "^6.5.2",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.5.0",
    "babel-preset-react": "^6.5.0",
    "bufferutil": "^1.2.1",
    "gun": "^0.3.992",
    "json-loader": "^0.5.4",
    "loader-utils": "^0.2.15",
    "prime": "^0.5.0",
    "primes": "0.0.1",
    "tls": "0.0.1",
    "url": "^0.11.0",
    "utf-8-validate": "^1.2.1",
    "webpack": "^2.1.0-beta.5"
  }
}

现在，当我使用 webpack --watch 时，不会显示任何警告或错误。转到 public/workboad 并运行服务，我看到 react 应用程序运行时没有错误

Answer 1

@riscarrott 的答案有效吗？我是枪的作者，看起来其中一个错误与枪有关。但是我不是 webpack 专家，所以我不确定问题是什么。

我确实知道 require('gun') 实际上加载了 ./index.js ，而 ./index.js 又加载了服务器端特定逻辑(这在浏览器)。如果 riscarrott 的答案不起作用，请尝试将 require('gun') 替换为 require('gun/gun') 并查看它是否有效。如果是这种情况，请在 https://github.com/amark/gun 上提交错误报告。这样我们就可以为 future 的人们解决这个问题。

如果这没有帮助，团队和社区中的其他几个人也经常使用 webpack 和 Gun。我看看能否让他们在这里回复。

编辑:它看起来像其他项目的事实上的方式，比如 jquery/angular/etc。 ( https://www.npmjs.com/package/angular ) 是让您将它们包含在 < script > 标记中。因此，我们也建议您也这样做，因为它可以避免所有这些构建问题。

<script src="/node_modules/gun/gun.js"></script>