從零開始開發一個react腳手架(一)

前沿: 腳手架工具一大堆,但如果全部用第三方的腳手架,項目做起來肯定束手束腳,想來點差異化的東西都很難,所以最好是整一份自己的腳手架工具,想咋玩咋玩。
閱讀了next腳手架和create-react-app腳手架源碼,next腳手架太重,create-react-app好像沒有服務器端渲染的內容,心血來潮自己寫一個,中途會夾雜着兩個腳手架工作的源碼解讀,只要理解了思想,就算照搬過來也是自己東西。哈哈(必然是會參考的)


腳手架不難,但是涉及到源碼解讀,可能會分爲幾個章節,反正最後能實現create-react-app一模一樣的效果,並且支持服務器端渲染。

第一步 創建兩個項目

kkk-react 這個是腳手架項目,腳手架說白點就是node項目了,但要時時看效果,總不能一直publish到npm,所以需要npm link。
cli-view,這個項目理論上應該是由kkk-react創建出來的,包含一些基本的文件和文件夾,並且
package.json的scripts包含了start,build等構建命令。但因爲是開發腳手架啊,這一步可以放到最後來弄,先把打包構建的步驟弄好。

詳細步驟
在kkk-react目錄下, 執行npm init ,編輯package.json中的name爲'kkk-react',最後在項目根目錄中 執行npm link命令。還有一些細節看截圖

clipboard.png

更改package.json中的main,指向lib目錄,開發階段先這麼玩,真正發佈的時候,應該是新建一個bin字段,裏面可以包含命令,當npm install這個腳手架的時候,這些命令生成對應的執行命令到node_modules的bin目錄中,這樣我們在項目中就執行了。
開發的時候我們npm run dev,就能時時編譯到lib目錄了。

至於cli-view一樣的,先npm init,然後執行npm link kkk-react。創建一個cs.js
引入kkk-react,就能看到效果了。

clipboard.png
可以看到引入後,通過node執行 就打印了我們在kkk-react輸出的測試字段。同樣的只是開發階段這麼玩,等一切都搞定了,就是通過npm run xxx,來執行對應的操作了。

第一篇先這麼着了,還只是試試水,爭取明天出第二篇

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章