您如何通过Rails 6应用程序与本地Truffle Ganache区块链进行交互？我已经用香草javascript制作了FixedSupplyToken应用程序的原型，并且一切正常。接下来，我尝试将其移入Rails 6应用程序。我对使用Ruby gems感到紧张（ethereum.rb-寻找某人来接管维护工作，而其他人似乎被遗弃了）。我想知道是否可以使用Webpacker将web3.js直接导入Rails 6？我创建了一个新的Rails 6应用并添加了以下内容：
yarn add web3
yearn add truffle-contract
两者均已安装并显示在package.json中：
{
"name": "app",
"private": true,
"dependencies": {
"@fortawesome/fontawesome-free": "^5.12.0",
"@fortawesome/free-brands-svg-icons": "^5.12.0",
"@fortawesome/free-regular-svg-icons": "^5.12.0",
"@fortawesome/free-solid-svg-icons": "^5.12.0",
"@rails/actioncable": "^6.0.0",
"@rails/actiontext": "^6.0.2-1",
"@rails/activestorage": "^6.0.0",
"@rails/ujs": "^6.0.0",
"@rails/webpacker": "4.2.2",
"bootstrap": "^4.4.1",
"bootswatch": "^4.4.1",
"chart.js": "^2.9.3",
"chartkick": "^3.2.0",
"datatables.net-bs4": "^1.10.20",
"datatables.net-buttons-bs4": "^1.6.1",
"datatables.net-responsive-bs4": "^2.2.3",
"datatables.net-select-bs4": "^1.3.1",
"flatpickr": "^4.6.3",
"jquery": "^3.4.1",
"popper.js": "^1.16.0",
"trix": "^1.0.0",
"truffle-contract": "^4.0.31",
"turbolinks": "^5.2.0",
"vue": "^2.6.11",
"web3": "^1.2.5-rc.0"
},
"version": "0.1.0",
"devDependencies": {
"webpack-dev-server": "^3.10.1"
}
}
然后我将其添加到app / javascript / packs（web3 / index.js）：
// Import libraries we need.
import Web3 from 'web3';
import contract from 'truffle-contract';
// Import our contract artifacts and turn them into usable abstractions.
import token_artifacts from './FixedSupplyToken.json';
// TokenContract is our usable abstraction, which we'll use through the code below.
var TokenContract = contract(token_artifacts);
// The following code is to interact with contracts.
var accounts;
var account;
window.App = {
start: function() {
var self = this;
// Bootstrap the TokenContract abstraction for Use.
TokenContract.setProvider(web3.currentProvider);
// Get the initial account balance so it can be displayed.
web3.eth.getAccounts(function (err, accs) {
if (err != null) {
alert("There was an error fetching your accounts.");
return;
}
if (accs.length == 0) {
alert("Couldn't get any accounts! Make sure your Ethereum client is configured correctly.");
return;
}
accounts = accs;
account = accounts[0];
});
},
initManageToken: function() {
App.updateTokenBalance();
App.watchTokenEvents();
},
updateTokenBalance: function() {
var tokenInstance;
TokenContract.deployed().then(function (instance) {
tokenInstance = instance;
return tokenInstance.balanceOf.call(account);
}).then(function (value) {
console.log(value);
var balance_element = document.getElementById("balanceTokenInToken");
balance_element.innerHTML = value.valueOf();
}).catch(function (e) {
console.log(e);
App.setStatus("Error getting balance; see log.");
});
},
watchTokenEvents: function() {
var tokenInstance;
TokenContract.deployed().then(function (instance) {
tokenInstance = instance;
tokenInstance.allEvents({}, {fromBlock: 0, toBlock: 'latest'}).watch(function (error, result) {
var alertbox = document.createElement("div");
alertbox.setAttribute("class", "alert alert-info alert-dismissible");
var closeBtn = document.createElement("button");
closeBtn.setAttribute("type", "button");
closeBtn.setAttribute("class", "close");
closeBtn.setAttribute("data-dismiss", "alert");
closeBtn.innerHTML = "<span>×</span>";
alertbox.appendChild(closeBtn);
var eventTitle = document.createElement("div");
eventTitle.innerHTML = '<strong>New Event: ' + result.event + '</strong>';
alertbox.appendChild(eventTitle);
var argsBox = document.createElement("textarea");
argsBox.setAttribute("class", "form-control");
argsBox.innerText = JSON.stringify(result.args);
alertbox.appendChild(argsBox);
document.getElementById("tokenEvents").appendChild(alertbox);
//document.getElementById("tokenEvents").innerHTML += '<div class="alert alert-info alert-dismissible" role="alert"> <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button><div></div><div>Args: '+JSON.stringify(result.args) + '</div></div>';
});
}).catch(function (e) {
console.log(e);
App.setStatus("Error getting balance; see log.");
});
},
sendToken: function() {
var amount = parseInt(document.getElementById("inputAmountSendToken").value);
var receiver = document.getElementById("inputBeneficiarySendToken").value;
App.setStatus("Initiating transaction... (please wait)");
var tokenInstance;
return TokenContract.deployed().then(function (instance) {
tokenInstance = instance;
return tokenInstance.transfer(receiver, amount, {from: account});
}).then(function () {
App.setStatus("Transaction complete!");
App.updateTokenBalance();
}).catch(function (e) {
console.log(e);
self.setStatus("Error sending coin; see log.");
});
},
allowanceToken: function() {
var self = this;
var amount = parseInt(document.getElementById("inputAmountAllowanceToken").value);
var receiver = document.getElementById("inputBeneficiaryAllowanceToken").value;
this.setStatus("Initiating transaction... (please wait)");
var tokenInstance;
return TokenContract.deployed().then(function (instance) {
tokenInstance = instance;
return tokenInstance.approve(receiver, amount, {from: account});
}).then(function () {
self.setStatus("Transaction complete!");
App.updateTokenBalance();
}).catch(function (e) {
console.log(e);
self.setStatus("Error sending coin; see log.");
});
}
};
document.addEventListener('load', function() {
// Checking if Web3 has been injected by the browser (Mist/MetaMask)
if (typeof web3 !== 'undefined') {
console.warn("Using web3 detected from external source. If you find that your accounts don't appear or you have 0 MetaCoin, ensure you've configured that source properly. If using MetaMask, see the following link. Feel free to delete this warning. :) http://truffleframework.com/tutorials/truffle-and-metamask")
// Use Mist/MetaMask's provider
window.web3 = new Web3(web3.currentProvider);
} else {
console.warn("No web3 detected. Falling back to http://localhost:8545. You should remove this fallback when you deploy live, as it's inherently insecure. Consider switching to Metamask for development. More info here: http://truffleframework.com/tutorials/truffle-and-metamask");
// fallback - use your fallback strategy (local node / hosted node + in-dapp id mgmt / fail)
window.web3 = new Web3(new Web3.providers.HttpProvider("http://localhost:7545"));
}
});
然后，当我在Docker容器中启动Rails 6应用程序时，一切似乎都很好，直到webpack-dev-server尝试编译资产，并引发此错误：
webpack-dev-server | ℹ ｢wdm｣: Compiling...
webpack-dev-server | ✖ ｢wdm｣: Hash: 8531025c7b3abcc5d778
webpack-dev-server | Version: webpack 4.41.5
webpack-dev-server | Time: 1963ms
webpack-dev-server | Built at: 01/21/2020 4:46:26 PM
webpack-dev-server | Asset Size Chunks Chunk Names
webpack-dev-server | js/application-8df32eacba8ebdbf7444.js 6.49 MiB application [emitted] [immutable] application
webpack-dev-server | js/application-8df32eacba8ebdbf7444.js.map 6.93 MiB application [emitted] [dev] application
webpack-dev-server | manifest.json 1.9 KiB [emitted]
webpack-dev-server | media/images/Logo_medlarge-e2a09f85c0c6ed39d81ce70b3bd44e51.png 130 KiB
webpack-dev-server | media/images/pdf_icon-c00c8db0462b60773a72302f7b9d456b.png 1.36 KiB
webpack-dev-server | media/webfonts/fa-brands-400-088a34f7.eot 129 KiB
webpack-dev-server | media/webfonts/fa-brands-400-273dc9bf.ttf 129 KiB
webpack-dev-server | media/webfonts/fa-brands-400-822d94f1.woff2 74.2 KiB
webpack-dev-server | media/webfonts/fa-brands-400-d7229311.svg 692 KiB
webpack-dev-server | media/webfonts/fa-brands-400-f4920c94.woff 87 KiB
webpack-dev-server | media/webfonts/fa-regular-400-3ac49cb3.eot 33.6 KiB
webpack-dev-server | media/webfonts/fa-regular-400-9efb8697.woff2 13.3 KiB
webpack-dev-server | media/webfonts/fa-regular-400-a57bcf76.woff 16.4 KiB
webpack-dev-server | media/webfonts/fa-regular-400-d2e53334.svg 141 KiB
webpack-dev-server | media/webfonts/fa-regular-400-ece54318.ttf 33.3 KiB
webpack-dev-server | media/webfonts/fa-solid-900-2aa6edf8.ttf 189 KiB
webpack-dev-server | media/webfonts/fa-solid-900-7a5de9b0.svg 829 KiB
webpack-dev-server | media/webfonts/fa-solid-900-7fb1cdd9.eot 190 KiB
webpack-dev-server | media/webfonts/fa-solid-900-93f28454.woff 96.7 KiB
webpack-dev-server | media/webfonts/fa-solid-900-f6121be5.woff2 74.3 KiB
webpack-dev-server |
webpack-dev-server | ERROR in ./app/javascript/web3/index.js 126:22-26
webpack-dev-server | "export 'default' (imported as 'Web3') was not found in 'web3'
webpack-dev-server | at HarmonyImportSpecifierDependency._getErrors (/app/node_modules/webpack/lib/dependencies/HarmonyImportSpecifierDependency.js:109:11)
webpack-dev-server | at HarmonyImportSpecifierDependency.getErrors (/app/node_modules/webpack/lib/dependencies/HarmonyImportSpecifierDependency.js:68:16)
webpack-dev-server | at Compilation.reportDependencyErrorsAndWarnings (/app/node_modules/webpack/lib/Compilation.js:1463:22)
webpack-dev-server | at /app/node_modules/webpack/lib/Compilation.js:1258:10
webpack-dev-server | at AsyncSeriesHook.eval [as callAsync] (eval at create (/app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
webpack-dev-server | at AsyncSeriesHook.lazyCompileHook (/app/node_modules/tapable/lib/Hook.js:154:20)
webpack-dev-server | at Compilation.finish (/app/node_modules/webpack/lib/Compilation.js:1253:28)
webpack-dev-server | at /app/node_modules/webpack/lib/Compiler.js:672:17
webpack-dev-server | at _done (eval at create (/app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:9:1)
webpack-dev-server | at eval (eval at create (/app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:32:22)
webpack-dev-server |
webpack-dev-server | ERROR in ./app/javascript/web3/index.js 130:22-26
webpack-dev-server | "export 'default' (imported as 'Web3') was not found in 'web3'
webpack-dev-server | at HarmonyImportSpecifierDependency._getErrors (/app/node_modules/webpack/lib/dependencies/HarmonyImportSpecifierDependency.js:109:11)
webpack-dev-server | at HarmonyImportSpecifierDependency.getErrors (/app/node_modules/webpack/lib/dependencies/HarmonyImportSpecifierDependency.js:68:16)
webpack-dev-server | at Compilation.reportDependencyErrorsAndWarnings (/app/node_modules/webpack/lib/Compilation.js:1463:22)
webpack-dev-server | at /app/node_modules/webpack/lib/Compilation.js:1258:10
webpack-dev-server | at AsyncSeriesHook.eval [as callAsync] (eval at create (/app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
webpack-dev-server | at AsyncSeriesHook.lazyCompileHook (/app/node_modules/tapable/lib/Hook.js:154:20)
webpack-dev-server | at Compilation.finish (/app/node_modules/webpack/lib/Compilation.js:1253:28)
webpack-dev-server | at /app/node_modules/webpack/lib/Compiler.js:672:17
webpack-dev-server | at _done (eval at create (/app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:9:1)
webpack-dev-server | at eval (eval at create (/app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:32:22)
webpack-dev-server |
webpack-dev-server | ERROR in ./app/javascript/web3/index.js 130:31-35
webpack-dev-server | "export 'default' (imported as 'Web3') was not found in 'web3'
webpack-dev-server | at HarmonyImportSpecifierDependency._getErrors (/app/node_modules/webpack/lib/dependencies/HarmonyImportSpecifierDependency.js:109:11)
webpack-dev-server | at HarmonyImportSpecifierDependency.getErrors (/app/node_modules/webpack/lib/dependencies/HarmonyImportSpecifierDependency.js:68:16)
webpack-dev-server | at Compilation.reportDependencyErrorsAndWarnings (/app/node_modules/webpack/lib/Compilation.js:1463:22)
webpack-dev-server | at /app/node_modules/webpack/lib/Compilation.js:1258:10
webpack-dev-server | at AsyncSeriesHook.eval [as callAsync] (eval at create (/app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
webpack-dev-server | at AsyncSeriesHook.lazyCompileHook (/app/node_modules/tapable/lib/Hook.js:154:20)
webpack-dev-server | at Compilation.finish (/app/node_modules/webpack/lib/Compilation.js:1253:28)
webpack-dev-server | at /app/node_modules/webpack/lib/Compiler.js:672:17
webpack-dev-server | at _done (eval at create (/app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:9:1)
webpack-dev-server | at eval (eval at create (/app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:32:22)
webpack-dev-server | ℹ ｢wdm｣: Failed to compile.
Websearches尚未发现任何可能的解决方案，并且我也没有挖掘任何在Rails中使用Webpacker使用web3.js的示例。可能吗;有解决方案或示例吗？谢谢！
我思考这是一个命名冲突。您已经命名了自己的JavaScript文件web3/index.js，Webpack将其命名为web3；与您要导入的同名节点模块冲突。尝试将自己的javascript文件夹/文件重命名为其他名称。相关问题：https://github.com/webpack/webpack/issues/4817#issuecomment-316119100