在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
,初次执行以失败结束。得到了下图中的报错信息。

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


看到这里已经成功的完成了代码打包,这是在React根目录下面也会多了一个build文件夹,里面是刚打包的文件。
(6) 再次回到React/fixtures/art目录下,如果刚才执行yarn
命令成功的话只执行yarn build
命令即可,然后就能看到下图打包成功的信息。

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

到此,我们已经成功的将React源码中fixtures目录下的art成功执行。该目录下的其他项目大家有兴趣的可以自行研究。遇到报错切记不要慌乱不要轻易放弃,如果做什么事情对你来说都是顺顺利利,那么这些事情对你的成长也就没有任何的帮助了。