50+款前端高效开发辅助工具总结
前端开发高效辅助工具
1. 兼容性查询 Can I Use
Caniuse用于查看浏览器对各种新特性的兼容情况。可以查询一个 js api 或者 css 属性的在各个浏览器的各个版本下的兼容性。
2. Bootstrap
是一个流行的前端开发框架，它提供了一组CSS样式和JavaScript组件，可以帮助开发者快速构建响应式的网站和应用程序。
3. TailwindCSS
是一个CSS框架，它提供了一组可重用的CSS类，可以帮助开发者快速构建自定义的UI组件和设计系统。
4. React.js
是一个流行的JavaScript库，用于构建用户界面。它使用组件化的开发模式，可以使开发者更高效地构建复杂的UI。
5. Vue.js
是一个流行的JavaScript框架，用于构建用户界面。它也使用组件化的开发模式，可以帮助开发者更高效地构建响应式的应用程序。
6. Svelte.js
是一个新兴的JavaScript框架，用于构建用户界面。它使用编译时技术，可以将组件转换为高效的JavaScript代码，提高应用程序的性能和响应速度。
7. jQuery
是一个流行的JavaScript库，提供了一组方便的API，可以帮助开发者更轻松地操作DOM、处理事件和执行动画等任务。
8. Babel.js
是一个JavaScript编译器，可以将新版本的JavaScript代码转换为向后兼容的代码，以便在旧版浏览器上运行。
9. Lodash
是一个JavaScript实用工具库，提供了一组常用的函数，可以帮助开发者更高效地处理数据和执行常见的操作。
10. Node.js
是一个流行的JavaScript运行时环境，可以在服务器端运行JavaScript代码，开发者可以使用它来构建高性能的网络应用程序。
11. Grunt
是一个流行的JavaScript任务运行器，可以帮助开发者自动化构建、测试和部署等任务。
12. Gulp
是另一个流行的JavaScript任务运行器，也可以帮助开发者自动化构建、测试和部署等任务。
13. npm
是JavaScript的包管理器，开发者可以使用它来安装、管理和发布JavaScript的包和依赖。
14. pnpm
是另一个JavaScript的包管理器，它使用硬链接技术，可以更高效地管理依赖。
15. Yarn
是另一个JavaScript的包管理器，它提供了更快的安装速度和更好的缓存机制，可以帮助开发者更高效地管理依赖。
16. webpack
是一个流行的JavaScript模块打包工具，可以将多个JavaScript文件打包成单个文件，以便在浏览器中加载。
- webpack-dev-server可用于快速开发应用程序。
- webpack 用于编译JavaScript模块。一旦完成安装，就可以通过webpack CLI或API与其配合交互。
- wepback优势在于loader和plugin非常丰富。
核心概念
- Entry：入口，Webpack 执行构建的第一步将从 Entry 开始，可抽象成输入。
- Module：模块，在 Webpack 里一切皆模块，一个模块对应着一个文件。Webpack 会从配置的 Entry 开始递归找出所有依赖的模块。
- Chunk：代码块，一个 Chunk 由多个模块组合而成的抽象概念，用于代码合并与分割。
- Loader：模块转换器，用于把模块原内容按照需求转换成新内容。
- Plugin：扩展插件，在 Webpack 构建流程中的特定时机注入扩展逻辑来改变构建结果或做你想要的事情。
- Output：输出结果，在 Webpack 经过一系列处理并得出最终想要的代码后输出结果。
工具对比
运行webpack 5 的 Node.js最低版本是 10.13.0 (LTS)。
不要使用 webpack 编译不可信的代码。它可能会在你的计算机，远程服务器或者在你 web 应用程序使用者的浏览器中执行恶意代码。
17. Rollup.js
是另一个JavaScript模块打包工具，它专注于打包库和组件，可以生成更小的文件大小。
18. Parcel
是另一个JavaScript模块打包工具，它提供了零配置的开发体验，可以更快地构建应用程序。
19. PostCSS
是一个流行的CSS后处理器，可以帮助开发者自动化处理CSS代码，例如添加浏览器前缀、压缩代码等。
20. Next.js
是一个流行的React框架，它提供了一组服务端渲染和静态网站生成的功能，可以帮助开发者更高效地构建响应式的应用程序。
21. Nuxt.js
是一个流行的Vue框架，它也提供了服务端渲染和静态网站生成的功能，可以帮助开发者更高效地构建响应式的应用程序。
22. Docusaurus
是一个流行的文档网站生成器，可以帮助开发者更高效地构建美观的文档网站。
23. Gatsby.js
另一个流行的静态网站生成器，可以帮助开发者更高效地构建快速的静态网站。
24. Gridsome
是另一个静态网站生成器，专注于使用Vue.js构建静态网站。
25. VuePress
是一个基于Vue.js的静态网站生成器，可以帮助开发者更高效地构建文档网站和博客等。
26. SASS
是一个流行的CSS预处理器，提供了更多的语法和功能，可以帮助开发者更高效地编写CSS代码。
27. Less.js
是另一个CSS预处理器，也提供了更多的语法和功能，可以帮助开发者更高效地编写CSS代码。
28. PurgeCSS
是一个流行的工具，可以自动删除未使用的CSS代码，减小文件大小。
29. cssnano
是另一个流行的CSS优化工具，可以帮助开发者自动化压缩和优化CSS代码。
30. WebAssembly
WebAssembly是一种可移植、高性能的二进制格式，可以在浏览器中运行，也可以在其他环境中运行。它可以将其他语言编写的代码编译成WebAssembly模块，从而在Web上运行。它的作用是提高Web应用程序的性能，使得开发者可以使用不同的编程语言来编写Web应用程序。
31. Redux.js
Redux.js是一个JavaScript状态管理库，它可以用于管理应用程序的状态。它的作用是使得状态管理更加简单、可控，从而提高应用程序的可维护性和可扩展性。
32. Markdown
Markdown是一种轻量级标记语言，它可以用于快速地编写格式化的文本。它的作用是使得文本格式化更加简单、快速，从而提高文本编写的效率。
33. MDX
MDX是一种将Markdown和React结合起来的语言，它可以用于编写交互式的文档和演示文稿。它的作用是使得文档和演示文稿更加生动、有趣，从而提高用户的参与度。
34. Fastify
Fastify是一个快速、低开销、可扩展的Web框架，它可以用于构建高性能的Web应用程序。它的作用是提高Web应用程序的性能和可扩展性，从而满足高并发的需求。
35. Rome
Rome是一个JavaScript工具链，它可以用于构建现代的Web应用程序。它的作用是提供一系列工具，使得开发者可以更加高效地构建Web应用程序。
36. Mirage
Mirage是一个JavaScript库，它可以用于模拟服务器端的行为，从而帮助开发者进行前端开发。它的作用是使得前端开发更加简单、快速，从而提高开发效率和可维护性。
37. goHugo
goHugo是一个静态网站生成器，它可以用于快速地生成静态网站。它的作用是使得网站生成更加简单、快速，从而提高网站开发的效率。
38. Deno
Deno是一个现代的JavaScript和TypeScript运行时环境，它可以用于构建高性能的Web应用程序。它的作用是提高Web应用程序的性能和可维护性，从而满足高并发的需求。
39. Sapper
Sapper是一个基于Svelte的Web应用程序框架，它可以用于构建快速、高性能的Web应用程序。它的作用是提高Web应用程序的性能和可维护性，从而满足高并发的需求。
40. Sequelize
Sequelize是一个基于Node.js的ORM框架，它可以用于管理关系型数据库。它的作用是简化数据库管理过程，从而提高开发效率和可维护性。
41. ProGit
ProGit是一本关于Git版本控制系统的书籍，它可以帮助开发者更加深入地了解Git。它的作用是提高开发者的Git技能，从而使得版本控制更加简单、可控。
42. TypeScript
TypeScript是一种静态类型检查的JavaScript超集，它可以用于编写更加可靠的代码。它的作用是提高代码的可维护性、可读性和可扩展性。
43. Preact
Preact是一个轻量级的React替代品，它可以用于构建快速、高性能的Web应用程序。它的作用是提高Web应用程序的性能和可维护性，从而满足高并发的需求。
44. Recoil
Recoil是一个状态管理库，它可以用于管理React应用程序的状态。它的作用是使得状态管理更加简单、可控，从而提高应用程序的可维护性和可扩展性。
45. Handlebars
Handlebars是一个JavaScript模板引擎，它可以用于生成HTML代码。它的作用是使得HTML代码生成更加简单、可控，从而提高Web应用程序的可维护性。
46. Pug
Pug是一个HTML模板引擎，它可以用于生成HTML代码。它的作用是使得HTML代码生成更加简单、可控，从而提高Web应用程序的可维护性。
47. Express
Express是一个基于Node.js的Web应用程序框架，它可以用于构建快速、高性能的Web应用程序。它的作用是提高Web应用程序的性能和可维护性，从而满足高并发的需求。
48. Jest
Jest是一个JavaScript测试框架，它可以用于编写和运行单元测试和集成测试。它的作用是提高代码的可靠性和可维护性，从而减少代码错误和缺陷。
49. Nginx
是一个高性能的Web服务器和反向代理服务器，它可以用于处理高并发的Web请求。它的作用是提高Web应用程序的性能和可靠性，从而满足高并发的需求。
50. Blitz
Blitz是一个全栈React框架，它可以用于构建快速、高性能的Web应用程序。它的作用是提高Web应用程序的性能和可维护性，从而满足高并发的需求。
51. Alpine.js
Alpine.js是一个轻量级的JavaScript框架，它可以用于构建交互式的Web应用程序。它的作用是提高Web应用程序的交互性和可维护性，从而增加用户的参与度。
52. Lerna
Lerna是一个JavaScript多包管理工具，它可以用于管理多个包之间的依赖关系和版本控制。它的作用是使得包管理更加简单、可控，从而提高代码的可维护性和可扩展性。
53. Axios
Axios是一个基于Promise的HTTP客户端，它可以用于发送HTTP请求和处理响应。它的作用是提高Web应用程序的网络通信效率和可靠性，从而满足高并发的需求。
54. Strapi
是一个开源的Headless CMS（内容管理系统），它可以用于管理Web应用程序的内容。它的作用是简化内容管理过程，从而提高开发效率和可维护性。
55. codekit
CodeKit是一款被誉为前端开发“神器”的Web前端开发工具，功能非常强大，支持最流行的框架技术，如支持Less, Sass, Stylus, CoffeeScript, Typescript, Jade, Haml, Slim,
Markdown & Javascript 等语言的编译，具有浏览器自动刷新、各种前端开发框架自动安装 (Bootstrap, jQuery）等等功能。
56. vite
点击访问GitHub地址
vite是下一代前端开发与构建工具。Vite意在提供开箱即用的配置，同时它的插件API和JavaScript API 带来了高度的可扩展性，并有完整的类型支持。
构建
Vite提供了一套原生ESM的HMR API。 具有HMR功能的框架可以利用该API提供即时、准确的更新，而无需重新加载页面或清除应用程序状态。Vite 内置了HMR到Vue.js单文件组件（SFC）和React Fast Refresh 中。
组成
一个开发服务器，它基于原生ES模块 提供了丰富的内建功能，速度快模块热更新（HMR）。
一套构建指令，它使用Rollup打包代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。
vite和webpack的区别
- webpack是先打包再启动开发服务器，vite是直接启动开发服务器，然后按需编译依赖文件。
- vite服务器启动速度比webpack快，由于vite启动的时候不需要打包，也就无需分析模块依赖、编译，所以启动速度非常快。当浏览器请求需要模块时，再对模块进行编译，这种按需动态编译的模式，极大缩短了编译时间，当项目越大，文件越多时，vite的开发优势越明显。
- vite热更新比webpack快，vite在HRM方面，当某个模块内容改变时，让浏览器去重新请求该模块即可，而不是像webpack重新将该模块的所有依赖重新编译。
- vite的使用简单，只需执行初始化命令，就可以得到一个预设好的开发环境，开箱即获得一堆功能，包括：CSS预处理、html预处理、异步加载、分包、压缩、HMR等。
- vite使用复杂度介于Parcel和Webpack的中间，只是暴露了极少数的配置项和pluging接口，既不会像Parcel一样配置不灵活，又不会像Webpack一样需要了解庞大的loader、plugin生态，灵活适中、复杂度适中。
最新的收录地址参考：
- 前端开发高效辅助工具
- 前端常用插件库合集 400+
持续更新中…
微信公众号搜索【CTO Plus】关注后，获取更多，我们一起学习交流。