資訊專欄INFORMATION COLUMN
摘要：第一步創(chuàng)建兩個(gè)項(xiàng)目這個(gè)是腳手架項(xiàng)目，腳手架說(shuō)白點(diǎn)就是項(xiàng)目了，但要時(shí)時(shí)看效果，總不能一直到，所以需要。但因?yàn)槭情_(kāi)發(fā)腳手架啊，這一步可以放到最后來(lái)弄，先把打包構(gòu)建的步驟弄好。
前沿： 腳手架工具一大堆，但如果全部用第三方的腳手架，項(xiàng)目做起來(lái)肯定束手束腳，想來(lái)點(diǎn)差異化的東西都很難，所以最好是整一份自己的腳手架工具，想咋玩咋玩。
閱讀了next腳手架和create-react-app腳手架源碼，next腳手架太重，create-react-app好像沒(méi)有服務(wù)器端渲染的內(nèi)容，心血來(lái)潮自己寫(xiě)一個(gè)，中途會(huì)夾雜著兩個(gè)腳手架工作的源碼解讀，只要理解了思想，就算照搬過(guò)來(lái)也是自己東西。哈哈（必然是會(huì)參考的）
腳手架不難，但是涉及到源碼解讀，可能會(huì)分為幾個(gè)章節(jié)，反正最后能實(shí)現(xiàn)create-react-app一模一樣的效果，并且支持服務(wù)器端渲染。
第一步 創(chuàng)建兩個(gè)項(xiàng)目kkk-react 這個(gè)是腳手架項(xiàng)目，腳手架說(shuō)白點(diǎn)就是node項(xiàng)目了，但要時(shí)時(shí)看效果，總不能一直publish到npm，所以需要npm link。
cli-view，這個(gè)項(xiàng)目理論上應(yīng)該是由kkk-react創(chuàng)建出來(lái)的，包含一些基本的文件和文件夾，并且
package.json的scripts包含了start,build等構(gòu)建命令。但因?yàn)槭情_(kāi)發(fā)腳手架啊，這一步可以放到最后來(lái)弄，先把打包構(gòu)建的步驟弄好。
詳細(xì)步驟
在kkk-react目錄下, 執(zhí)行npm init ,編輯package.json中的name為"kkk-react"，最后在項(xiàng)目根目錄中 執(zhí)行npm link命令。還有一些細(xì)節(jié)看截圖
更改package.json中的main，指向lib目錄，開(kāi)發(fā)階段先這么玩，真正發(fā)布的時(shí)候，應(yīng)該是新建一個(gè)bin字段，里面可以包含命令，當(dāng)npm install這個(gè)腳手架的時(shí)候，這些命令生成對(duì)應(yīng)的執(zhí)行命令到node_modules的bin目錄中，這樣我們?cè)陧?xiàng)目中就執(zhí)行了。
開(kāi)發(fā)的時(shí)候我們npm run dev，就能時(shí)時(shí)編譯到lib目錄了。
至于cli-view一樣的，先npm init,然后執(zhí)行npm link kkk-react。創(chuàng)建一個(gè)cs.js
引入kkk-react，就能看到效果了。
可以看到引入后，通過(guò)node執(zhí)行 就打印了我們?cè)趉kk-react輸出的測(cè)試字段。同樣的只是開(kāi)發(fā)階段這么玩，等一切都搞定了，就是通過(guò)npm run xxx，來(lái)執(zhí)行對(duì)應(yīng)的操作了。
第一篇先這么著了，還只是試試水，爭(zhēng)取明天出第二篇
第二篇，粗略解讀下create-react-app
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/103017.html
摘要：弄清之后，就去腳手架源代碼里面找。這樣更加靈活，而且復(fù)用性高，起新項(xiàng)目，如果差別不大，幾乎可以做到零配置，這樣開(kāi)發(fā)者壓根就不需要關(guān)心業(yè)務(wù)之外的東西從零開(kāi)始開(kāi)發(fā)一個(gè)腳手架三 上一篇已經(jīng)初步整了個(gè)kkk-react，這一篇不寫(xiě)代碼，粗略講解下create-react-app的部分源碼。 前沿：科普下看源碼的思路。以本人看過(guò)N多源碼的經(jīng)驗(yàn)總結(jié)，想要看這種腳手架或者npm包的源碼，第一步就是看...
摘要：前面兩篇文都只是鋪墊，今天至少要實(shí)現(xiàn)一個(gè)簡(jiǎn)單的開(kāi)始之前再說(shuō)一下墊片和。我一開(kāi)始以為會(huì)在引入，但并不是。這是我的，當(dāng)然以后會(huì)拆出來(lái)，作為目錄下的一個(gè)執(zhí)行文件。里面就配置了一個(gè)。下一篇從零開(kāi)始開(kāi)發(fā)一個(gè)腳手架四 前面兩篇文都只是鋪墊，今天至少要實(shí)現(xiàn)一個(gè)簡(jiǎn)單react的hello word 開(kāi)始之前再說(shuō)一下墊片和presets。 前幾天突發(fā)疑問(wèn)，create-react-app是怎么做的墊片，...
摘要：關(guān)于和，其實(shí)單純問(wèn)兩者的區(qū)別，大家都知道，一個(gè)是開(kāi)發(fā)依賴，一個(gè)是線上依賴。因?yàn)橐婚_(kāi)始的開(kāi)發(fā)不規(guī)范，導(dǎo)致我隨意亂裝。。一個(gè)包可以再大點(diǎn)。腳手架已經(jīng)實(shí)現(xiàn)了三分之一，現(xiàn)在是直接來(lái)作為腳手架，到最后效果應(yīng)該是的形式，不過(guò)命令內(nèi)容已經(jīng)實(shí)現(xiàn)和。 前言：最近天天加班做新項(xiàng)目，Taro版的小程序，還要實(shí)現(xiàn)富文本加海報(bào)，踩了不少坑，下次專門開(kāi)個(gè)坑說(shuō)一下。 回到腳手架，說(shuō)實(shí)話從頭寫(xiě)一個(gè)，即便是參考crea...
摘要：根據(jù)配置經(jīng)驗(yàn)，還需要配置一個(gè)，根據(jù)我實(shí)際的測(cè)試結(jié)果，不用手動(dòng)加入這個(gè)也可以實(shí)現(xiàn)熱更新。我們公司的腳手架沒(méi)用這個(gè)結(jié)果，導(dǎo)致自己額外增添了很多配置。，走到這里，我們會(huì)發(fā)現(xiàn)只實(shí)現(xiàn)了第一步頁(yè)面自動(dòng)刷新。很細(xì)，很有意思從零開(kāi)始開(kāi)發(fā)一個(gè)腳手架五 這一篇可能主要講的是熱更新，寫(xiě)的很細(xì)，遇到很多有意思的地方，一一和大家講解下。 前沿：webpack-dev-server支持熱更新，簡(jiǎn)單的說(shuō)就是你修改...
摘要：只有動(dòng)手，你才能真的理解作者的構(gòu)思的巧妙只有動(dòng)手，你才能真正掌握一門技術(shù)持續(xù)更新中項(xiàng)目地址求求求源碼系列跟一起學(xué)如何寫(xiě)函數(shù)庫(kù)中高級(jí)前端面試手寫(xiě)代碼無(wú)敵秘籍如何用不到行代碼寫(xiě)一款屬于自己的類庫(kù)原理講解實(shí)現(xiàn)一個(gè)對(duì)象遵循規(guī)范實(shí)戰(zhàn)手摸手，帶你用擼 Do it yourself!!! 只有動(dòng)手，你才能真的理解作者的構(gòu)思的巧妙 只有動(dòng)手，你才能真正掌握一門技術(shù) 持續(xù)更新中…… 項(xiàng)目地址 https...
閱讀 2348·2021-08-23 09:46
閱讀 976·2019-08-29 18:31
閱讀 1935·2019-08-29 17:04
閱讀 2532·2019-08-29 12:23
閱讀 1906·2019-08-26 14:05
閱讀 1141·2019-08-26 13:44
閱讀 3278·2019-08-26 12:23
閱讀 2288·2019-08-26 10:46
