Skip to main content

使用 Webpack 編譯 DApp

用純HTML5手刻DApp固然可行,但更多的網頁開發者會選擇使用諸如Webpack等編譯工具來提昇開發體驗。使用truffle unbox webpack命令可以建立一個可運作的Weboack DApp。本書後續的DApp架構並不會再直接使用Webpack/web3.js,而會改用create-react-app(React)和Ethjs。因為手工維護Webpack設定的缺點,就是當Webpack和相關模組版本更新時需要跟著去手動更新和調整設定。因此本文只會專注在DApp相關部份,不會介紹Webpack的使用與設定細節,有興趣的讀者可另行找到許多Webpack相關參考資料。

設定環境

首先確保已啟動ganache/ganache-cli。若尚未啟動,可以使用以下命令啟動:

ganache-cli --seed apple banana cherry

建立專案

開啟一個命令列視窗,輸入以下命令以建立專案:

$ mkdir hello_webpack
$ cd hello_webpack
$ truffle unbox webpack

truffle unbox webpack命令會指定truffle下載webpack模板(box)1來初始化專案。

專案建立好後,將truffle.js中的port設定修改為和之前專案一樣的8545,執行truffle migrate命令,將專案部署到ganache本地測試網路上。

接著我們用npm install來安裝專案所需的套件,再透過npm run dev命令啟動Webpack測試伺服器:

$ npm run dev
> [email protected] dev ...
> webpack-dev-server

Project is running at http://localhost:8080/
webpack output is served from /
...

啟動後可以到瀏覽器中開啟http://localhost:8080/連結,可以看到Truffle預設範例的MetaCoin操作介面。

Imgur

試試看配合MetaMask操作看看吧,當你在網頁介面上填入目的帳戶地址MetaCoin轉出數目後,MetaMask會被呼叫起來,在MetaMask上選擇同意交易後,這個帳戶所擁有的MetaCoin數目就改變了。

支援 HelloToken

接著我們來將MetaCoin合約的DApp改成支援HelloToken合約的DApp。只需要加入HelloToken合約,並對app/index.html網頁做相應的修改。

首先從之前範例中複製contracts/HelloToken.solmigrations/4_deploy_hellotoken.js到對應資料夾中,並執行npm install zeppelin-solidity --save以在package.json中加入相應的函式庫。

接著需修改app/javascripts/app.js。參考前面的單元測試,有三個修改重點:

  1. 修改匯入合約,將匯入MetaCoin的地方改為匯入HelloToken
  2. 修改取得代幣餘額的函式為balanceOf
  3. 修改傳送代幣的函式為transfer

存取合約

將程式碼

import metacoin_artifacts from '../../build/contracts/MetaCoin.json'

修改為

import metacoin_artifacts from '../../build/contracts/HelloToken.json'

要在DApp中引用合約,需要匯入編譯好的合約介面檔案(.json),然後使用truffle-contract匯入。接下來的操作就跟在truffle console中的操作一樣了。

import { default as contract } from 'truffle-contract'
import metacoin_artifacts from '../../build/contracts/HelloToken.json'

var MetaCoin = contract(metacoin_artifacts);

本章選擇盡量減少修改行數以便讀者依循,因此並未將變數名稱一併修改。讀者在確定DApp運作正常後,可以自行嘗試修改變數名稱。

修改取得代幣餘額的函式

將程式碼

return meta.getBalance.call(account, {from: account});

修改為

return meta.balanceOf(account, {from: account});

修改傳送代幣的函式

將程式碼

return meta.sendCoin(receiver, amount, {from: account});

修改為

return meta.transfer(receiver, amount, {from: account});

執行truffle migrate將新的合約部署上本地測試網路,然後執行npm run dev運行網站。

可以看到修改後的網頁

Imgur

我們可以在MetaMask中切換不同測試帳戶,然後在網頁上查看HelloToken代幣餘額。

接著我們可以嘗試從第一個帳戶(預設)轉一些HelloToken到第二個帳戶。

在按下頁面上的Send Token按鈕後,記得在MetaMask中確認送出。 Imgur

轉帳完成後,刷新頁面可以看到代幣餘額也更新了。

Imgur

有了DApp代幣轉帳介面之後,連發代幣都變得簡單了!

參考資料