javascript - Electron:使用 `executeJavaScript` 加载文件

Question

我需要将 NPM 包注入(inject) BrowserView通过使用 executeJavaScript .包裹是Web3这是我迄今为止尝试过的。

import Web3 from 'web3'

const web3 = '' + Web3; // stringify the Web3 class

view.webContents.executeJavaScript(`
  const provider = // ... provider got injected successfully because it doesn't have dependencies.
  const web3 = new ${web3}(provider);
`)

但这会引发以下错误。

Uncaught ReferenceError: core is not defined
    at new Web3 (<anonymous>:45:5)
    at <anonymous>:41:16

Web3 正在尝试加载其 core dependency不幸的是，它没有被字符串化。

所以我的问题是，如何将整个包加载到 BrowserView ?如果您无法控制 <script />，那么如何在浏览器中加载 npm 包？标签(至少我不知道如何在 Electron 中注入(inject)这些标签)？

更新:

由于 OJ Kwon 在评论中的建议，我尝试将 Web3 与 Browserify 捆绑在一起。通过运行

browserify packages/web3/src/index.js -o web3-bundle.js

.它似乎奏效了，因为在捆绑文件的最后( web3-bundle.js )它说:

// ... 50k+ lines long file

var version = require('../package.json').version;
var core = require('web3-core');
var Eth = require('web3-eth');
var Net = require('web3-net');
var Personal = require('web3-eth-personal');
var Shh = require('web3-shh');
var Bzz = require('web3-bzz');
var utils = require('web3-utils');

var Web3 = function Web3() {
    var _this = this;

    // sets _requestmanager etc
    core.packageInit(this, arguments);

    this.version = version;
    this.utils = utils;

    this.eth = new Eth(this);
    this.shh = new Shh(this);
    this.bzz = new Bzz(this);

    // overwrite package setProvider
    var setProvider = this.setProvider;
    this.setProvider = function (provider, net) {
        setProvider.apply(_this, arguments);

        this.eth.setProvider(provider, net);
        this.shh.setProvider(provider, net);
        this.bzz.setProvider(provider);

        return true;
    };
};

Web3.version = version;
Web3.utils = utils;
Web3.modules = {
    Eth: Eth,
    Net: Net,
    Personal: Personal,
    Shh: Shh,
    Bzz: Bzz
};

core.addProviders(Web3);

module.exports = Web3;

现在，我正在尝试像这样导入并包含它:

const Web3 = require('./web3-bundle.js');

这是行不通的。它说 undefined不是构造函数。

const Web3 = require('./web3-bundle.js').Web3;

和

const Web3 = require('./web3-bundle.js').default;

两者都没有工作，要么。应该如何做到这一点？

更新 2:
进一步检查捆绑包，它使用了 exports.和 module.exports = .我的编辑只建议使用 exports. 导出的方法和对象作为进口🤔

Answer 1

我建议您使用这个样板文件或包含良好 webpack 配置的样板文件 (suggested boilerplate)。

跟着这些步骤:

克隆存储库

运行yarn install

运行yarn add web3

添加 import Web3 from 'web3';进入app/containers/HomePage.js文件( react 渲染 View )。

享受