共计 2619 个字符，预计需要花费 7 分钟才能阅读完成。
本文首发公众号「前端从进阶到入院」，欢送关注！
最近看到阿里前端技术专家狼叔在 17 年的这篇《迷茫时学习 Node.js 最好的办法》提到：
明天小弟过去找我，说迷茫，我通知他一个密法：一天看 10 个 npm 模块，保持一年就是 3000+，按失常工作须要，超过 200 个都很厉害了。
第一次看到的时候感觉 有点鸡汤，但静下心来认真想想却不无道理，以 Vite 来举例子，我在看它代码的时候，印象很深的一个点就是各种开源模块信手拈来，恰到好处的解决了需要，这种能力是肯定须要大量的开源模块浏览量的。
Vite magic-string
比方 Vite 中大量使用 magic-string 这个库做一些字符串的魔术替换，这个库的目标就是在一些轻量级替换源代码的场景中代替 AST 这种过于宏大的解决方案。
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 批量导入语法
好，当初咱们晓得有 fast-glob 这么好用的库了，顺带读一读文档看看它的用法，那么之后咱们在本人的工作中，写诸如脚手架的工具时，就能够用这个库对外提供一些好用的批量导入 API，这就成为了咱们本人常识体系中的一部分。
Vite SSG
我最近始终比拟关注的小哥 Anthony Fu，最近刚加入完 2021 年的 VueConf 大会，带来了对日常开发十分实用的一场演讲。
他最近在开源方面十分沉闷，很大一部分精力投入在 Vite 相干的生态建设中，他开发的 vite-ssg 插件反对把 Vite 我的项目构建为动态网站。
SSG，全称是 Static-Site-Generators，动态站点生成器。在 构建时 就把你的 Web 利用构建为 HTML 格局，对 SEO 和性能都有十分显著的帮忙。
他当然不是从零实现这么宏大的工作量，@vue/server-renderer 这个包自身是为 Vue 构建 SSR 利用
而生的，他奇妙利用这个库把 Vue 组件渲染为 HTML 字符串的能力，节俭了十分多的工作量。
在他的博客中也有提到：
The idea here is fairly simple: bundle the app entry, then for each route, dump the app using APIs from the
@vue/server-rendererpackage. 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 文件。
尽管代码看似简短，但这背地体现的是对 Vue3 生态的相熟，更具体的说就是对 Vue3 公布的每个 npm 包所具备的能力的相熟。
只是 npm 库吗？
当然不是，比方最近咱们工作中的我的项目接入了微软开源的 Rush，Rush 是为 Monorepo 工程设计的一体化解决方案。
在我浏览文档的过程中，我就学习到了很多包治理方面的常识：
- NPM vs PNPM vs Yarn
- 幽灵依赖(Phantom Dependencies)
- NPM 分身(NPM doppelgangers)
在浏览 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 陪你一起度过。
