Настройка среды разработки для Dapps с Ethereum на этой ранней стадии технологии не всегда тривиальна. Но с этой инструкцией вы сможете работать над своим Dapp, и все, что вам нужно, это установить Node.js и NPM.
Мы будем использовать веб-пакет для обслуживания вашего Dapp и ganache-cli для запуска вашей частной цепочки блоков за считанные секунды. Web3.js используется для подключения вашего децентрализованного приложения к нашей частной цепочке блоков Эфириума. Чтобы создать наш проект и установить все пакеты, просто запустите эти команды.
npm init
npm install --save [email protected] webpack webpack-dev-server
html-webpack-plugin ganache-cli
Я использую версию 1.0.0-beta.31, потому что в версии 0.x.y есть критические изменения.
Вебпак
Webpack — отличный инструмент, который можно использовать как в небольших приложениях, так и в крупных производственных конвейерах. Я буду настраивать только то, что необходимо для обслуживания простого приложения.
const path = require('path'); module.exports = { entry: './src/index.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist') }, plugins: [ new HtmlWebpackPlugin({ template: 'src/index.html' }) ] };
Вы должны назвать этот файл webpack.config.js, чтобы запустить команду webpack без дополнительной настройки.
NPM-скрипты
Давайте отредактируем package.json и добавим два простых скрипта, которые предоставят нам полноценную среду разработки Dapp.
{ // ... "scripts": { "dapp": "webpack-dev-server --mode=development", "ethereum": "ganache-cli" }, // ... }
Если мы запустим обе команды, Dapp будет скомпилирован и запущен на http://localhost:8080/, а Ganache предоставит локальную тестовую среду с достаточным количеством эфира для экспериментов.
Доступ к Ganache из index.js
В файле src/index.js загрузим web3.js и подключим к нему Ganache. В этом примере я покажу вам, как получить доступ к учетным записям.
const Web3 = require('web3'); const web3 = new Web3(Web3.givenProvider || "ws://localhost:8545"); web3.eth.getAccounts().then(console.log);
index.html
Базовый HTML-шаблон для нашего децентрализованного приложения
<!doctype html> <html> <head> <title>My awesome Dapp</title> </head> <body> Your body here </body> </html>
Запуск скриптов
Теперь запустите сценарии npm, и вы увидите учетные записи из ganache в журнале браузера, если вы посетите http://localhost:8080/. Убедитесь, что оба скрипта продолжают работать во время разработки!
npm run dapp npm run ethereum
Дальнейшая информация
github-репозиторий: https://github.com/wagner-daniel/simple-dapp-environment
ганаш-кли: https://github.com/trufflesuite/ganache-cli
веб-пакет: https://webpack.js.org/
web3: https://web3js.readthedocs.io/en/1.0/
0x8CD43A3D3bceA97cc2972F9F2C3BdB9b6A965576 — Если хотите оставить чаевые :)