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.sol與migrations/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代幣轉帳介面之後，連發代幣都變得簡單了！

參考資料​