运行带有 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 - 它确实包含了比这个项目所需的更多的东西，如果你想尝试自己获得这个运行ning

，请忽略它

{
  "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 和运行ning 服务，我看到反应应用程序运行没有错误

Answer 1

看起来你是运行浏览器中的代码，但你的目标是 'node' 因此 Webpack 在引用 'url' 等内置模块时将保持 require 语句不变。

要解决此问题，请删除 target: 'node'。

Answer 2

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

我知道 require('gun') 实际上会加载 ./index.js，后者又会加载特定于服务器端的逻辑（这在浏览器中不起作用）。如果 riscarrott 的答案不起作用，请尝试将 require('gun') 替换为 require('gun/gun') 并查看是否有效。如果是这种情况，请在 https://github.com/amark/gun 上提交错误报告，以便我们为未来的人修复此问题。

如果这没有帮助，团队和社区中的其他几个人会大量使用 webpack 和 gun。我看看能不能让他们在这里回复。

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

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

Answer 3

我的第一直觉是也许你可以添加一个可以在构建时检测到的变量来解决问题...... 在 https://github.com/petehunt/webpack-howto 第 6 节（我知道有一些方法可以像 'ws' 那样定义不被拉取，因为这将由浏览器目标提供；我只是在该页面上看不到它）

在我自己的项目中，由于可选的 require( 'ws' ) 和其他东西，gun 无法进行 browserify，所以我将其排除在打包之外，直接提供它。我还提取了 require.js，这样我就可以在 javascript 级别要求（'gun'），就在包之外，更多在库包的应用程序中。

也可以退回到使用脚本标签进一步拉枪...

运行带有 Reactjs 和 webpack 的 gunjs 在控制台中抛出引用错误

Running gunjs with Reactjs and webpack throws Reference Error in console

reactjs

webpack

gun

运行 带有 Reactjs 和 webpack 的 gunjs 在控制台中抛出引用错误

Running gunjs with Reactjs and webpack throws Reference Error in console

reactjs

webpack

gun

运行带有 Reactjs 和 webpack 的 gunjs 在控制台中抛出引用错误