关于truffle react框架的使用

前言

由于需要构建智能合约并进行可视化的使用。因此我选择使用truffle react框架来实现我的目的。但是由于初次使用该框架，运行的并不顺利，在进过2个小时的查询资料后发现，现有的大部分资料都是比较老旧的。而且官网上的一些信息也出现了一些错误。最后通过查询github上官方库的issue后发现了解决办法。这样告诉我以后要多在github上多看看官方issue啊。废话不多说了现在开始具体讲解如下正确使用truffle react框架库的姿势。（注意本文使用的环境为win7 环境下。 linux环境下应该没有多少特殊的问题）

1 前期准备

truffle 本身使用来快速测试开发以太坊智能合约的一个框架库，在这里面包含了很多打包好的测试框架。这里使用的truffle react框架库就是一个使用react 构建前端，使用truffle构建构建编译、迁移功能以及测试框架的框架库。React是一个写前端比较方便的库，语法简单，只要会一些简单的js语法就可以顺利的使用。

在windows下安装truffle react框架的第一步需要使用npm. npm 是node.js自带的一个包管理工具。大家可以到node官网下载该管理工具. 下载完成后使用命令node -v以及npm -v 查看其版本

在下载完node后，我们使用npm 下载truffle 下载方法为:

	npm install -g truffle

通过该方法可以将truffle 下载在windows全局环境中。以后直接使用truffle unbox xxx就可以下载truffle框架下其他具体框架了

之后，我们需要下载testrpc。testrpc是区块链自动化运行环境。其使用npm下载方式为:

npm install -g ethereumjs-testrpc

使用testrpc的方法为在powershell中运行testrpc命令即可。

2 下载truffle react

新建一个文件夹，进入该文件夹内使用命令 truffle unbox react命令下载该框架。下载完后，文件结构如下：

3 修改框架中的一些内容。

3.1 修改truffle.js中的配置问题

由于安装好的目录结构中，truffle.js中的模板配置为空，因此我们需要将红框中的内容粘贴进truffle.js中保证可以完成对测试环境的链接。 这里8545端口是testrpc默认的启动端口。

3.2 修改client/src/utils/getWeb3.js中的测试环境端口信息为 8545。

这里的8545端口是指testrpc释放给web3.js调用的端口信息。这里原来为9545端口。因此我们需要进行进一步的修改。

3.3 修改 client/package.json中的scripts:信息。

修改红框处的命令为现在红框显示的内容。 原来红框内容为 \D ,而在cmd中我们使用的命令为/D 因此在这里进行修改。 这里参考的是github上有关truffle react的issue。链接在此

3.4 在powershell中配置使用mklink命令

在这里需要注意的是，在windows的powershell中我们无法使用mklink命令。因此我们在这里需要向powershell中写一个mklink函数。

具体方案如下。
我们在机器上新建一个文件夹称为WINDOWSBAT。在这里面新建一个mklink.bat文件。
在windows中bat文件可以直接运行cmd中的命令。我们在mklink.bat中输入如下命令：

之后配置环境变量，将WINDOWSBAT文件夹放在windows的path路径下即可。

3.5 添加bignumber.js文件到本地环境

由于truffle-contract环境缺少bigbumber.js 文件因此我们需要在本地环境下载该文件。具体方法如下：
npm install --production bignumber.js 该命令在client文件下操作
这里参考的是github上有关truffle react的issue。链接在此

4 运行框架

4.0 开启测试环境

新开一个终端，在其中运行命令 testrpc即可。效果如下：

4.1 编译合约

使用命令truffle compile编译合约。该命令在主文件夹而不是client文件下运行，结果如下：

这里，主文件为test2.

4.2 迁移合约到testrpc

使用命令truffle migrate 将合约迁移到testrpc中

该命令仍在主文件夹test2中运行

4.3 转移到client客户端并运行文件夹软连接

依次使用命令cd client 和npm run link-contracts:win32。 这个是用来在src目录下完成对编译好的合约的json格式文件进行链接，在src目录下对build/contracts目录的链接。这样就不会报错无法找到正确的合约解析格式

4.4 运行框架

使用命令 npm run start运行整个框架。这里其实就是运行react前端内容。效果如下