反応でスマート契約をコンパイルする方法
12707 ワード
私はSolidityでSolidity Compiler JSでbrowsers supported WebWorkerプログラムをコンパイルするつもりです.
ツールとプラグイン
[email protected]
[email protected]
[email protected]
webpack@4 (included in NX)
プロジェクトの設定ツールはNXです.これは素晴らしいツールmonosリポジトリを作成することです.
NWXのためのWebWorkerの設定
NXはWebpack Underhoodを使用しています.このポストではWebWorkerでWebPackを使用するためにworker-pluginを使用します.Config
worker-pluginには、NX内のWebPackのデフォルト設定を拡張する必要があります.frontendモジュールのルートフォルダにwebpack.jsonを作成します.const WorkerPlugin = require('worker-plugin');
const nrwlConfig = require('@nrwl/react/plugins/webpack.js');
module.exports = (config, context) => {
nrwlConfig(config);
return {
...config,
node: {
Buffer: true,
module: 'empty',
},
plugins: [new WorkerPlugin(), ...config.plugins],
};
};
workspace.jsonファイルに
webpack.jsonを加えました."webpackConfig": "apps/frontend/webpack.config.js"
WebWorkerを使用したコンパイルの信頼性の高いスマート契約
[email protected]は、まだtypescript宣言を持っていません、手動で型宣言を加えなければなりません.単にプロジェクトでdeclare module 'solc/wrapper';ファイルに*.d.tsを追加します.ワーカーズSolcJs.worker.tsファイルの作成.
/* eslint-disable no-restricted-globals */
import * as wrapper from 'solc/wrapper';
const ctx: Worker = self as any;
importScripts(
'https://solc-bin.ethereum.org/bin/soljson-v0.8.6+commit.11564f7e.js'
);
ctx.addEventListener('message', ({ data }) => {
const solc = wrapper((ctx as any).Module);
const compileResult = solc.compile(
createCompileInput(data.contractFileName, data.content)
);
ctx.postMessage(compileResult);
});
function createCompileInput(
fileName = 'storage.sol',
fileContent: string
): string {
const CompileInput = {
language: 'Solidity',
sources: {
[fileName]: {
content: fileContent,
},
},
settings: {
outputSelection: {
'*': {
'*': ['*'],
},
},
},
};
return JSON.stringify(CompileInput);
}
SolcJs.worker.tsを呼び出し、コンパイルが終了するまで待機します.const compileWithWorker = async (data: any) => {
return new Promise((resolve, reject) => {
const worker = new Worker('../../SolcJs.worker.ts', {
type: 'module',
});
worker.postMessage(data);
worker.onmessage = function (event: any) {
resolve(event.data);
};
worker.onerror = reject;
});
};
今、我々はWebWorkerを使用して簡単なSollienceスマート契約をコンパイルする準備が整いました.
const handleCompile = async () => {
setCompiling(true);
const result = await compileWithWorker({
content: SimpleStorageContact,
});
setCompileResult(result as string);
setCompiling(false);
};
Reference
この問題について(反応でスマート契約をコンパイルする方法), 我々は、より多くの情報をここで見つけました https://dev.to/vanduc1102/how-to-compile-smart-contract-in-react-11i1テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol