关于前端:我的学习方法是每天看-10-个-NPM-模块

本文首发公众号「前端从进阶到入院」，欢送关注！

最近看到阿里前端技术专家狼叔在 17 年的这篇《迷茫时学习 Node.js 最好的办法》提到：

明天小弟过去找我，说迷茫，我通知他一个密法：一天看 10 个 npm 模块，保持一年就是 3000+，按失常工作须要，超过 200 个都很厉害了。

第一次看到的时候感觉 有点鸡汤，但静下心来认真想想却不无道理，以 Vite 来举例子，我在看它代码的时候，印象很深的一个点就是各种开源模块信手拈来，恰到好处的解决了需要，这种能力是肯定须要大量的开源模块浏览量的。

比方 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
})

再比方用 fast-glob 去实现 Vite 中好用的 Glob Import 批量导入语法

好，当初咱们晓得有 fast-glob 这么好用的库了，顺带读一读文档看看它的用法，那么之后咱们在本人的工作中，写诸如脚手架的工具时，就能够用这个库对外提供一些好用的批量导入 API，这就成为了咱们本人常识体系中的一部分。

我最近始终比拟关注的小哥 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-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 文件。

尽管代码看似简短，但这背地体现的是对 Vue3 生态的相熟，更具体的说就是对 Vue3 公布的每个 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 陪你一起度过。

关于前端:我的学习方法是每天看-10-个-NPM-模块

Vite magic-string

Vite fast-glob

Vite SSG

只是 npm 库吗？

工作太忙？

总结

感激大家