以太坊開發測試（6） 運行《區塊鏈技術進階與實戰》Score 電子積分系統

原項目地址：https://github.com/Blockchain-book/Ethereum-Score-Hella

配置運行過程：

首先下載一個最新的truffle webpack 框架小樣

truffle unbox webpack

因爲truffle 一直在進步，各種目錄結構一直在變化，所以我們下載最新的web框架結構, 然後將原來的代碼移動入新的目錄編譯運行。

最新的目錄結構如下：

我們一個目錄一個目錄演示：

app 目錄當前如下：

將原項目app中所有的html css js 三種文件全部移動到/src 下

並修改 webpack.config.js 不然無法運行web

const path = require("path");
const CopyWebpackPlugin = require("copy-webpack-plugin");

module.exports = {
  mode: 'development',
  entry: "./src/app.js",
  output: {
    filename: "app.js",
    path: path.resolve(__dirname, "dist"),
  },

  module:{
     rules:[
	     {
		 test:/\.css$/,
		 use:['style-loader','css-loader'],
             },
     ],
  },


  plugins: [
    new CopyWebpackPlugin([{ from: "./src/index.html", to: "index.html" }]),
    new CopyWebpackPlugin([{ from: "./src/customer.html", to: "customer.html" }]),
    new CopyWebpackPlugin([{ from: "./src/bank.html", to: "bank.html" }]),
    new CopyWebpackPlugin([{ from: "./src/merchant.html", to: "merchant.html" }])
  ],
  devServer: { contentBase: path.join(__dirname, "dist"), compress: true },
	
};

注意因爲項目中需要加載css 所以我們還需要安裝style-loader;css-loader

npm install css-loader style-loader --save-dev

修改app.js文件中的這三句

import '../stylesheets/app.css'  // 改爲 import './app.css';
import { default as Web3 } from 'web3'  // import Web3 from "web3";
import { default as contract } from 'truffle-contract' //刪除這句

 

接着刪除當前contracts migrations 中的文件
接着將所有的原項目中contracts 中的所有智能合約文件 移動到當前contracts 中

接着將所有的原項目中migrations 中的文件移動到當前 migrations 中

最後返回 app 目錄下：

npm run dev