成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

lylwyy2016 / 1392人閱讀

摘要：第一步創(chuàng)建兩個項(xiàng)目這個是腳手架項(xiàng)目，腳手架說白點(diǎn)就是項(xiàng)目了，但要時時看效果，總不能一直到，所以需要。但因?yàn)槭情_發(fā)腳手架啊，這一步可以放到最后來弄，先把打包構(gòu)建的步驟弄好。

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

腳手架不難，但是涉及到源碼解讀，可能會分為幾個章節(jié)，反正最后能實(shí)現(xiàn)create-react-app一模一樣的效果，并且支持服務(wù)器端渲染。

第一步 創(chuàng)建兩個項(xiàng)目

kkk-react 這個是腳手架項(xiàng)目，腳手架說白點(diǎn)就是node項(xiàng)目了，但要時時看效果，總不能一直publish到npm，所以需要npm link。
cli-view，這個項(xiàng)目理論上應(yīng)該是由kkk-react創(chuàng)建出來的，包含一些基本的文件和文件夾，并且
package.json的scripts包含了start,build等構(gòu)建命令。但因?yàn)槭情_發(fā)腳手架啊，這一步可以放到最后來弄，先把打包構(gòu)建的步驟弄好。

詳細(xì)步驟
在kkk-react目錄下, 執(zhí)行npm init ,編輯package.json中的name為"kkk-react"，最后在項(xiàng)目根目錄中 執(zhí)行npm link命令。還有一些細(xì)節(jié)看截圖

更改package.json中的main，指向lib目錄，開發(fā)階段先這么玩，真正發(fā)布的時候，應(yīng)該是新建一個bin字段，里面可以包含命令，當(dāng)npm install這個腳手架的時候，這些命令生成對應(yīng)的執(zhí)行命令到node_modules的bin目錄中，這樣我們在項(xiàng)目中就執(zhí)行了。
開發(fā)的時候我們npm run dev，就能時時編譯到lib目錄了。

至于cli-view一樣的，先npm init,然后執(zhí)行npm link kkk-react。創(chuàng)建一個cs.js
引入kkk-react，就能看到效果了。


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

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/103017.html

相關(guān)文章

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

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

    Y3G 評論0 收藏0

  • 從零開始開發(fā)一個react腳手架（三）

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

    wums 評論0 收藏0

  • 從零開始開發(fā)一個react腳手架（五）

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

    gekylin 評論0 收藏0

  • 從零開始開發(fā)一個react腳手架（四）

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

    Kosmos 評論0 收藏0

  • 前端之從零開始系列

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

    Youngdze 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<