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

lylwyy2016 發布于2019-08-23 16:25 / 1385人閱讀

摘要：第一步創建兩個項目這個是腳手架項目，腳手架說白點就是項目了，但要時時看效果，總不能一直到，所以需要。但因為是開發腳手架啊，這一步可以放到最后來弄，先把打包構建的步驟弄好。

前沿： 腳手架工具一大堆，但如果全部用第三方的腳手架，項目做起來肯定束手束腳，想來點差異化的東西都很難，所以最好是整一份自己的腳手架工具，想咋玩咋玩。
閱讀了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命令。還有一些細節看截圖

更改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，就能看到效果了。

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

第一篇先這么著了，還只是試試水，爭取明天出第二篇

第二篇，粗略解讀下create-react-app

云服務器 GPU云服務器從零開始android開發 android開發從零開始從零開始 linux從零開始

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/103017.html

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

摘要：弄清之后，就去腳手架源代碼里面找。這樣更加靈活，而且復用性高，起新項目，如果差別不大，幾乎可以做到零配置，這樣開發者壓根就不需要關心業務之外的東西從零開始開發一個腳手架三上一篇已經初步整了個kkk-react，這一篇不寫代碼，粗略講解下create-react-app的部分源碼。前沿：科普下看源碼的思路。以本人看過N多源碼的經驗總結，想要看這種腳手架或者npm包的源碼，第一步就是看...

Y3G 2019-08-26 13:39 評論0 收藏0
從零開始開發一個react腳手架（三）

摘要：前面兩篇文都只是鋪墊，今天至少要實現一個簡單的開始之前再說一下墊片和。我一開始以為會在引入，但并不是。這是我的，當然以后會拆出來，作為目錄下的一個執行文件。里面就配置了一個。下一篇從零開始開發一個腳手架四前面兩篇文都只是鋪墊，今天至少要實現一個簡單react的hello word 開始之前再說一下墊片和presets。前幾天突發疑問，create-react-app是怎么做的墊片，...

wums 2019-08-23 16:47 評論0 收藏0
從零開始開發一個react腳手架（五）

摘要：關于和，其實單純問兩者的區別，大家都知道，一個是開發依賴，一個是線上依賴。因為一開始的開發不規范，導致我隨意亂裝。。一個包可以再大點。腳手架已經實現了三分之一，現在是直接來作為腳手架，到最后效果應該是的形式，不過命令內容已經實現和。前言：最近天天加班做新項目，Taro版的小程序，還要實現富文本加海報，踩了不少坑，下次專門開個坑說一下。回到腳手架，說實話從頭寫一個，即便是參考crea...

gekylin 2019-08-23 17:15 評論0 收藏0
從零開始開發一個react腳手架（四）

摘要：根據配置經驗，還需要配置一個，根據我實際的測試結果，不用手動加入這個也可以實現熱更新。我們公司的腳手架沒用這個結果，導致自己額外增添了很多配置。，走到這里，我們會發現只實現了第一步頁面自動刷新。很細，很有意思從零開始開發一個腳手架五這一篇可能主要講的是熱更新，寫的很細，遇到很多有意思的地方，一一和大家講解下。前沿：webpack-dev-server支持熱更新，簡單的說就是你修改...

Kosmos 2019-08-23 16:54 評論0 收藏0
前端之從零開始系列

摘要：只有動手，你才能真的理解作者的構思的巧妙只有動手，你才能真正掌握一門技術持續更新中項目地址求求求源碼系列跟一起學如何寫函數庫中高級前端面試手寫代碼無敵秘籍如何用不到行代碼寫一款屬于自己的類庫原理講解實現一個對象遵循規范實戰手摸手，帶你用擼 Do it yourself!!! 只有動手，你才能真的理解作者的構思的巧妙只有動手，你才能真正掌握一門技術持續更新中…… 項目地址 https...

Youngdze 2019-08-26 10:57 評論0 收藏0