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

1,963 阅读2分钟

在React源码(版本:16.8.6)中有一个fixtures目录,在该目录中放着的是作者写的一些测试demo。在这篇文章中我们探索一些如何执行这些demo。

fixtures-普通翻译:n. 固定装置(fixture的复数形式);卡具;固定附物,固定附着物;固定财产

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

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

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

执行过程

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

(1) 进入React/fixtures/art目录下,读一下README.md文件,文件告诉我们执行两个命令分别是yarnyarn 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成功执行。该目录下的其他项目大家有兴趣的可以自行研究。遇到报错切记不要慌乱不要轻易放弃,如果做什么事情对你来说都是顺顺利利,那么这些事情对你的成长也就没有任何的帮助了