关于truffle react框架的使用-CSDN博客

本文链接：https://blog.csdn.net/zyc_123456/article/details/82988550

关于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命令下载该框架。下载完后，文件结构如下：
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。链接在此