以太坊开发测试（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