看了九个开源的 Vue3 组件库，发现了这些前端的流行趋势

参考了如下组件库，因为有些设计是多个版本和框架的，这里只讨论 Vue3 版本。,流行度：100%,这个流行趋势已经成必然了，现在面试也有越来越多的 TS 相关。,rollbar 是一个异常监控平台，rollbar 于 2018 年统计了 前端项目中Top10 的错误类型 [12] ：,这里有很多错误都是空的或未定义的。如果使用 TypeScript 就可以简单的避免这些错误。,使用 TypeScript 可以避免 80% 的相关错误，当然 anyScript 不行。。,另外 TypeScript 的优势不止于此，比如 IDE 的智能提示，项目更容易维护等等。如果你还没有用 过 TS，那最好现在开始尝试使用。,流行度：55%,包括 vue、Reac、Babel 等越来越多的项目都开始使用 Monorepo,Monorepo，就是指将所有代码放到一个代码仓库中的项目管理策略。,Monorepo 绝对不是银弹，Monorepo 策略也不完美，但某些方面来说确实解决了一些项目的维护和开发体验。,如果你的项目有多个关联仓库，或者还在用 submodule 方式管理多个仓库，那可以试一试 Monorepo 。,有 55% 使用 非npm ，剩下 45% 看不出来使用什么包管理工具，最主要的是居然都没有 lock 文件，这个是真没看懂，作为开源项目不需要统一依赖版本的吗？,从 npm3 和 yarn 开始，都来通过扁平化依赖的方式来解决上面的这个问题。,所有的依赖都被拍平到 node_modules 目录下，不再有很深层次的嵌套关系。这样在安装新的包时，根据 node require 机制，会不停往上级的 node_modules 当中去找，如果找到相同版本的包就不会重新安装，解决了大量包重复安装的问题，而且依赖层级也不会太深。,但同时，这样也带来了新的问题,该版本引入了一个 lock 文件，以解决 node_modules 安装中的不确定因素。这使得无论你安装多少次，都能有一个一样结构的 node_modules 。,然而，平铺式的算法的复杂性，幽灵依赖之类的问题还是没有解决。,在 yarn 的 2.x 版本重点推出了 Plug’n’Play（PnP） 零安装模式，放弃了 node_modules ，更加保证依赖的可靠性，构建速度也得到更大的提升。,yarn 2.x 摆脱 node_modules ，安装、模块速度加载快；所有 npm 模块都会存放在全局的缓存目录下，避免多重依赖；严格模式下子依赖不会提升，也避免了幽灵依赖。,但是，自建 resolver 处理 Node require 方法，脱离Node现存生态，兼容性不太好。,pnpm 具有安装速度快、节约磁盘空间、安全性好等优点，它的出现也是为了解决 npm 和 yarn 存在的问题。,1. pnpm 通过硬链接与符号链接结合的方式，来解决 yarn 和 npm 的问题。,比如 A 依赖 B，A 下面是没有 node_modules 的，而是一个软链接。实际真正的文件位于 .pnpm 中对应的 A@1.0.0/node_modules/A 目录并硬链接到全局 store 中。,而 B 的依赖存在于 .pnpm/B@1.0.0/node_modules/B 。,而 A 依赖的 B，用软链接链到 上面的地址 ，也就是 B \--> ../../B@1.0.0/node_modules/B,--> 代表软链接， ==》 代表硬链接,而这种嵌套 node_modules 结构的好处在于只有真正在依赖项中的包才能访问，很好地解决了幽灵依赖的问题。此外，因为依赖始终都是存在 store 目录下的硬链接，相同的依赖始终只会被安装一次，多重依赖的问题也得到了解决。,虽然还有种种问题，但总体来说瑕不掩瑜。,ni可以理解为包管理器的管理器， ni 假设您使用锁文件（并且您应该），在它运行之前，它会检测你的 yarn.lock / pnpm-lock.yaml / package-lock.json 以了解当前的包管理器，并运行相应的命令。,cnpm cnpm 和 npm 以及 yarn 之间最大的区别就在于生成的 node_modules 目录结构不同，这在某些场景下可能会引发一些问题。此外也不会生成 lock 文件。但是 cnpm 保持了 node_modules 的目录结构清晰，可以说是在嵌套模式和扁平模式之间找到了一个平衡。,很多面试会问 pnpm 为啥快，除了上面的 store 保证全局只安装一次，还有 软连接 保证不重复安装之外。还有一个，当安装同一依赖的不同版本时，只有不同的部分会被重新保存。,建议不管用什么包管理工具，都要加上 lock 文件，在版本更新期间去升级依赖。以便能获得更好的安全性。,流行度：89%,esbuild 是一个用 go 语言写的 javascript、typescript 打包工具，速度比 webpack 快 100 倍以上。,虽然打包工具用的各不相同，有 vite 、 webpack 、 Rollup ，但最终都用到了 esbuild 打包。只有一个 vuetify 没用，不过 vuetify 还没有正式发布，后面也说不定会换。,未来 ESM 标准会越来越流行，所以相对应的工具链也会越来越流行。,vite 严格来说不是打包工具，而是一个前端构建工具，vite 实际使用 Rollup 和 esbuild 打包。,流行度：55%,关于 Icon Font 的缺陷，可以看这篇 Inline SVG vs Icon Fonts [13] 文章。主要有以下几方面：,SVG Icon 的优势可以用组件文档的描述,SVG Icon 的劣势，比如兼容性。（IE：啥？）,当然总体来说， Icon Font 对性能的影响没有那么大。这也可能是没那么流行的原因？,流行度：88%,虽然编写还是使用的预处理语言，但是最后都想办法转成了 CSS var 。就性能来说，肯定是浏览器支持的 W3C 规范更好。,但是目前很多预处理语言的函数之类的功能，原生还不是很好的支持。所以预处理语言还很有存在的必要的。,好了，这就是本篇文章的全部内容了，感谢大家的观看。,我是一个努力成长的前端菜狗子。