個人學習方法是天天看 10 個 NPM 模塊？

時間 2021-06-10 標籤 html 前端 vue git github 面試 npm app ssh async

本文首發公衆號「前端從進階到入院」，歡迎關注！

最近看到阿里前端技術專家狼叔在 17 年的這篇《迷茫時學習 Node.js 最好的方法》提到：html

今天小弟過來找我，說迷茫，我告訴他一個密法：一天看 10 個 npm 模塊，堅持一年就是 3000+，按正常工做須要，超過 200 個都很厲害了。

第一次看到的時候感受有點雞湯，但靜下心來仔細想一想卻不無道理，以 Vite 來舉例子，我在看它代碼的時候，印象很深的一個點就是各類開源模塊信手拈來，恰到好處的解決了需求，這種能力是必定須要大量的開源模塊閱讀量的。前端

Vite magic-string

好比 Vite 中大量運用 magic-string 這個庫作一些字符串的魔術替換，這個庫的目的就是在一些輕量級替換源代碼的場景中替代 AST 這種過於龐大的解決方案。vue

var MagicString = require('magic-string')
var s = new MagicString('problems = 99')

// 替換 problems -> answer
s.overwrite(0, 8, 'answer')
s.toString() // 'answer = 99'

// 生成 sourcemap
var map = s.generateMap({
  source: 'source.js',
  file: 'converted.js.map',
  includeContent: true
})

Vite fast-glob

再好比用 fast-glob 去實現 Vite 中好用的 Glob Import 批量導入語法git

好，如今咱們知道有 fast-glob 這麼好用的庫了，順帶讀一讀文檔看看它的用法，那麼以後咱們在本身的工做中，寫諸如腳手架的工具時，就能夠用這個庫對外提供一些好用的批量導入 API，這就成爲了咱們本身知識體系中的一部分。github

Vite SSG

我最近一直比較關注的小哥 Anthony Fu，最近剛參加完 2021 年的 VueConf 大會，帶來了對平常開發很是實用的一場演講。面試

他最近在開源方面很是活躍，很大一部分精力投入在 Vite 相關的生態建設中，他開發的 vite-ssg 插件支持把 Vite 項目構建爲靜態網站。npm

SSG，全稱是 Static-Site-Generators，靜態站點生成器。在 構建時就把你的 Web 應用構建爲 HTML 格式，對 SEO 和性能都有很是顯著的幫助。

他固然不是從零完成這麼龐大的工做量，@vue/server-renderer 這個包自己是爲 Vue 構建 SSR 應用
而生的，他巧妙利用這個庫把 Vue 組件渲染爲 HTML 字符串的能力，節省了很是多的工做量。app

在他的博客中也有提到：ssh

The idea here is fairly simple: bundle the app entry, then for each route, dump the app using APIs from the @vue/server-renderer package. Simplified code here:

import { renderToString } from '@vue/server-renderer'

const createApp = required('dist-ssr/app.js')

await Promise.all(
  routes.map(async (route) => {
    const { app, router, head } = createApp(false)

    router.push(route)
    await router.isReady()

    const appHTML = await renderToString(app)
    const renderedHTML = renderHTML(indexHTML, appHTML)

    await fs.writeFile(`${route}.html`, renderedHTML, 'utf-8')
  })
)

簡化後的思路就是，在 SSR 的環境下啓動應用後，對每一個路由用 @vue/server-renderer 生成靜態的 HTML 字符串，寫入爲 HTML 文件。async

雖然代碼看似簡短，但這背後體現的是對 Vue3 生態的熟悉，更具體的說就是對 Vue3 發佈的每一個 npm 包所具備的能力的熟悉。

只是 npm 庫嗎？

固然不是，好比最近咱們工做中的項目接入了微軟開源的 Rush，Rush 是爲 Monorepo 工程設計的一體化解決方案。

在我閱讀文檔的過程當中，我就學習到了不少包管理方面的知識：

在閱讀 Vue.js 文檔的時候，風格指南部分也給我留下了很深的印象，開源做者大佬在多年代碼生涯總結而成的實踐指南，必定是有很是多的精華。好比：

組件名稱應該以高階的 (一般是通常化描述的) 單詞開頭，以描述性的修飾詞結尾。

當你在現實中的維護場景下，假設你在想：「我要給搜索按鈕（SearchButton）的清除(Clear)功能換個圖標」。

那麼你在視線掃過這個文件夾的時候，關注點天然先集中到 SearchButton 這個部分，再去尋找後綴的 Clear、Run 描述性修飾詞，點進 Clear 組件進行維護。這樣組件關係就很是一目瞭然。

這些開源做者的心血常常在文檔中不起眼的部分靜靜等候你去發現。

工做太忙？

其實不少人第一反應多是：「一天看 10 個，我工做都那麼忙了，哪有空啊？」

關於這點，狼叔也在原文中提到了：

這裏的 10 個其實只是個虛數，看我的能力和決心，量力而行便可。

但請必定要能作到每日精進。

Node.js 模塊在 npm 上的統計數據代表，截止到今天 2017 年 9 月 24 日，共有 55.9 萬個模塊。單日下載在 1.5 億次。這麼大規模的模塊，天天學幾個，水平必定會增加的很是快的。

最難的不是下決心，而是堅持！這是最值得自豪的稱讚，沒有之一！

好比 VueConf 大會裏提到了某些新的技術，好比你的同事在聊天的時候提到了一些讓你感興趣的庫，你均可以去搜索看看，或許在未來工做中的某天就會不經意的幫助到你。

總結

不積硅步，無以致千里。保持好奇心、熱情和耐心，不要對任何東西都不求甚解，固然也不要對某些地方太鑽牛角尖。

「天天 10 個 NPM 模塊」更像是一種激勵，可能中間咱們會斷掉兩三天，甚至幾周都提不起精神，但只要在內心保持這個新年，期待一年、三年、五年之後不同的咱們。

感謝你們

歡迎關注 ssh，前端潮流趨勢、原創面試熱點文章應有盡有。

記得關注後加我好友，我會不按期分享前端知識，行業信息。2021 陪你一塊兒度過。