看源碼的第一步,我猜很多人搞錯了~

大家好,我是若川。

今天在江西人的前端群里,有個小伙伴問,vueusevitepress (也就是官方文檔倉庫)怎么搭建的,怎么都沒有 index.json(引用的一個文件)。

本文簡單記錄下流程,供大家學習參考。

我當時用 github1s.com 打開 https://github1s.com/vueuse/vueuse 看了下,推薦TA看 README.md貢獻文檔。果然,然后我在 package.json 等文件中找到命令。會生成 index.json 文件。

a95c8c954247745b27b77ec7e6dd48b8.png
貢獻文檔 pnpm install && pnpm dev
7b6a7d268439d2ae2902b9d9f1ae57f2.png
命令
ab5f27e3e1582e35ba0309c4f5b405c5.png
update 命令
8b989f4b52e5beb6e40787261daa8cd5.png
生成 index.json

相對開源項目寫源碼來說,看其源碼其實不算難。

如果把學習看做是爬山,爬山并沒有我們想象中的那么難。

但可能:

  • 難在我們徘徊不前,找不到山的入口。

  • 難在我們爬山路上沒有同伴。

  • 難在可能沒有相對好走的路。

  • 難在我們不能堅持爬到山頂。

  • 難在我們不知道為何要爬山。

  • 等等。

假設我們要把某個項目跑起來,第一步肯定是看 README.md貢獻文檔。然后看 package.json 相應的命令和文件結構,把項目跑起來。后續再調試等。再根據情況查閱搜索資料等,這一系列操作下來就學到不少東西。而這些基本操作,我在源碼共讀中的輔助文章都基本寫過。只是學的人比較少,或者說遲遲沒有踏出第一步。又或者說因為不知道為啥要“爬山”,所以不“爬山”。

比如可能很多小伙伴對于上面的截圖。monoreponr 是啥,esno 又是啥等等。

關于 nr 之前我寫過文章《尤雨溪推薦神器 ni ,能替代 npm/yarn/pnpm ?簡單好用!源碼揭秘!》。其實就是 @antfu/ni 庫,其實就是 npm/yarn/pnpm run 一種簡寫,也是源碼共讀中的一期。

esno?簡單來說是跑 ts 文件的。

感興趣的小伙伴,可以找個比較有名自己常用的,比如vue-cli、create-vite、create-vite、create-react-app、vue、react、taro、element、vant 等。看看TA的README.md 、貢獻文檔和 package.json一些依賴的庫、命令和入口文件等,你可能會發現多學幾個之后發現都類似。學習的過程中有問題可以在各種交流群提問討論,而不是利用交流群劃水聊太多無關的。學完可以輸出一篇文章。

總結,今天主要分享了如何找到爬山的入口,真正去爬山。第一步肯定是看 README.md貢獻文檔。然后看 package.json 相應的命令和文件結構,把項目跑起來。

希望今天的分享對你有所收獲。

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/274512.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/274512.shtml
英文地址,請注明出處:http://en.pswp.cn/news/274512.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

序列化說明(轉)

序列化是用來通信的,服務端把數據序列化,發送到客戶端,客戶端把接收到的數據反序列化后對數據進行操作,完成后再序列化發送到服務端,服務端再反序列化數據后對數據進行操作。說白了,數據需要序列化以后才能…

1.1編寫目的_1.目的

1.1編寫目的A friend of mine recently founded Secta Leagues. A company that organises sports leagues for working professionals, where companies play sports against one another in the same industry. The vision is to provide an app that allows interested comp…

Web 應用架構的下一個轉變

Web 技術大概 25 年前開始萌芽,HTTP、HTML、CSS 和 JS 都是在九十年代中期首次被標準化的。直到如今,Web 演變成一個無處不在的應用平臺。隨著 Web 的發展,Web 應用程序的開發架構也在不斷發展。現在有許多用于構建 Web 應用程序的核心架構&a…

生命在于運動?

我有兩個朋友,一個喜歡運動,經常打球騎單車,一個就喜歡宅在家里,最多大家玩的時候去旁觀。兩人常常爭執,一個說:生命在于運動,你看我多健康!一個說:生命在于靜止&#xf…

C++ 學習筆記----類篇

(一)基本概念: 1、類與對象: 1 //聲明類 2 class Human { 3 4 //... Data members and methods go here 5 6 }; 7 8 //定義對象 9 Human human; 2、通常用class聲明類,struct也可以,只不過在信…

ux和ui_設計社交餐廳策展應用程序— UX / UI案例研究

ux和uiSabor, which translates from “taste” or “flavor” in Spanish, is a concept for an iOS app designed to provide users with honest, reliable and relatable restaurant recommendations from friends and family. It is a social restaurant curation applicat…

你不知道的 script 標簽的 defer 與 async 屬性

我持續組織了近一年的源碼共讀活動,感興趣的可以 點此掃碼加我微信 ruochuan12 參與,每周大家一起學習200行左右的源碼,共同進步。同時極力推薦訂閱我寫的《學習源碼整體架構系列》 包含20余篇源碼文章。歷史面試系列。另外:目前建…

我是怎么調試 Element UI 源碼的

我持續組織了近一年的源碼共讀活動,感興趣的可以 點此掃碼加我微信 ruochuan12 參與,每周大家一起學習200行左右的源碼,共同進步。同時極力推薦訂閱我寫的《學習源碼整體架構系列》 包含20余篇源碼文章。歷史面試系列。另外:目前建…

java對象的理解

1、看生成幾個對象,就看new了幾次, Stu s1new Stu(“張三”); Stu s2s1;-這里也是生成了一個對象,只不過s1和s2指向了同一個對象 2、Stu s1new Stu(“張三”); Stu s2 new Stu(“李四”); s1s2;這里生成了兩個對象,但是…

模板緩沖_模板緩沖以及如何使用它可視化體積相交

模板緩沖介紹 (Introduction) The trendy thing in real-time rendering these days is ray-tracing. However, traditional rasterization hasn’t disappeared, and it won’t in the near future. I recommend this blog post on the subject: A hybrid rendering pipeline …

重磅!哈啰 Quark Design 正式開源,下一代跨技術棧前端組件庫

大家好,我是若川。我持續組織了近一年的源碼共讀活動,感興趣的可以 點此掃碼加我微信 ruochuan12 參與,每周大家一起學習200行左右的源碼,共同進步。同時極力推薦訂閱我寫的《學習源碼整體架構系列》 包含20余篇源碼文章。歷史面試…

對lua協程的一點理解

讀《Programming In Lua》協程那一章,比較困惑的還是procuer-consumer那個例子: function consumer(prod)while true dolocal x receive(prod)print(x)end endfunction receive(prod)local status, value coroutine.resume(prod)return value endfunct…

b端 ux 設計思維_借助系統思維從視覺設計過渡到UX

b端 ux 設計思維“How can I switch to UX?” This is a common question from visual designers because there’s a lot of overlap on the surface. But it can also be a difficult transition since UX encompasses much more below the surface.“如何切換到UX&#xff…

三面面試官:運行 npm run xxx 的時候發生了什么?

大家好,我是若川。近期發現好些小伙伴工作有2-3年了,基本不會寫腳手架,或者說沒學過腳手架。對腳手架大致是如何執行的基本不太知道。其實這類學習資料真的挺多的。而且我們基本天天 npm run dev,應該學習內部實現。不知道的小伙伴…

figma下載_Figma的自動版式實用

figma下載Figma’s Auto Layout has been around for a while, but not everyone’s aware of the benefits it brings. It doesn’t replace constraints, they’re still very much needed. The trick is to use the right feature where necessary. I want to show you how …

Qt通過ODBC讀取excel文件

之前替學校考試科用C Builder做過一個小的數據庫工具,處理excel表格用的,現在想轉換到Qt平臺下來,在網上搜了搜有一些利用OBDC讀取xls文件的教程: http://hi.baidu.com/kxw102/item/770c496d5736470ca0cf0f1d http://blog.sina.co…

真 · 三面面試官:運行 npm run xxx 的時候發生了什么?

昨晚沒權限我只放了鏈接,今天聯系開了白名單。昨天推文主要是為了投票,表明 Node.js 的重要性,有人評論是水文。今天重新轉載下。歡迎繼續點此去投票。投票顯示有高達近80% 表示不太會開發腳手架,看來大多數人確實沒有應用場景。可…

ovo svm_反思我在OVO擔任遠程產品設計實習生的時間

ovo svmIn a quiet bedroom accompanied only by the low humming of my laptop fan, I sat before a Google Hangouts meeting, and got to know my colleagues for the first time, unaware of the joy of a ride that was waiting for me at OVO Design.在一個安靜的臥室里&…

native的Socket向Android的LocalSocketServer發送漢字亂碼的問題

native的Socket發送字節流默認是GB2312的,所以在Java方面需要指定GB2312 byte[] buffer new byte[50]; StringBuffer strBuf new StringBuffer(); InputStream input receiver.getInputStream(); while((len input.read(buffer)) ! -1) {String newStr new Str…

最受讀者喜愛的前端書 Top 15【留言送書】

最受讀者喜愛的前端書Top 15JavaScript高級程序設計(第4版)| 中文版累計銷量32萬冊,JavaScript“紅寶書”全新升級 | 涵蓋ECMAScript 2019,全面深入,入門和進階俱佳 | 結合視頻講解配套編程環境,助你輕松掌…