React源码--执行fixtures中的项目

在React源码（版本：16.8.6）中有一个fixtures目录，在该目录中放着的是做者写的一些测试demo。在这篇文章中咱们探索一些如何执行这些demo。

fixtures-普通翻译：n. 固定装置（fixture的复数形式）；卡具；固定附物，固定附着物；固定财产

fixtures-计算机词汇：测试夹具

本文以fixtures目录下第一个项目art为例进行探索。

注：不对art内部代码逻辑展开讨论。

执行过程

若是想了解别人写的程序最好要先读一些README.md

(1) 进入React/fixtures/art目录下，读一下README.md文件，文件告诉咱们执行两个命令分别是yarn和yarn build。当咱们执行以后发现文件报错，这时咱们看一下art目录下的package.json文件。

(2) 在package.json文件中有"react": "link:../../build/node_modules/react",这样一种引入包的方式。link这种方式能够直接引入本地包文件，点击这里了解更多。

(3) React源码的根目录下并无build文件夹，那么咱们再看一看React根目录下面的package.json文件，发如今script里面有一个命令"build": "node ./scripts/rollup/build.js"，相信你们已经猜到这个命令是作什么的了。

(4) 在React根目录下面执行npm run build，初次执行以失败结束。获得了下图中的报错信息。

错误提示咱们当前电脑没有安装jdk。OK，那咱们就把jdk安装了。

(5) jdk安装成功后，在React根目录下面再次执行npm run build，咱们看到下图中执行信息。

静静的等待程序执行···，几分钟后程序执行结束获得下图输出信息。

看到这里已经成功的完成了代码打包，这是在React根目录下面也会多了一个build文件夹，里面是刚打包的文件。

(6) 再次回到React/fixtures/art目录下，若是刚才执行yarn命令成功的话只执行yarn build命令便可，而后就能看到下图打包成功的信息。

(7) 在浏览器中打开React/fixtures/art目录下的的index.html文件，能够看到下面的效果图。

到此，咱们已经成功的将React源码中fixtures目录下的art成功执行。该目录下的其余项目你们有兴趣的能够自行研究。遇到报错切记不要慌乱不要轻易放弃，若是作什么事情对你来讲都是顺顺利利，那么这些事情对你的成长也就没有任何的帮助了。