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成功執行。該目錄下的其餘項目你們有興趣的能夠自行研究。遇到報錯切記不要慌亂不要輕易放棄，若是作什麼事情對你來講都是順順利利，那麼這些事情對你的成長也就沒有任何的幫助了。