19 年, 又是新的一年,"前端届", 又出了哪些新的 "玩意", 今天向你推荐目前比较热门新鲜度靠前的 50 款前端工具, 希望在新的一年里, 对你有所帮助.
一, 构建工具
- 1, Parcel
- https://parceljs.org/ https://parceljs.org/
Parcel 是一款极速零配置 web 应用打包工具, 快速, 几乎零配置是它最大的特点, 开箱即用. 相比 webpack,Parcel 对于新手来说未尝不是一个很好的选择.
- 2, Critters
- https://github.com/GoogleChromeLabs/critters
一款 webpack 的插件, 它可以很方便的配置内联关键 CSS( critical CSS ), 其余的 CSS 部分则会异步加载, 由于它不使用无头浏览器 (headless browser) 呈现内容, 因此快速轻巧.
3,sucrase
https://sucrase.io/ 如果你用 typscript 构建 React 项目, sucrase 将是一个不错的选着, 它的编译速度将是 Babel 的 20 倍. sucrase-- 一款 ES6 + 编译器, 重点关注非标准语言, 例如 Typescript,JSX 和 Flow.
- 4,Webpack Config Tool
- https://webpack.jakoblind.no/
一款可视化的在线工具网站, 你只需要选择前端项目运用到技术和相关配置, 就能一键帮你生成 webpack.config.JS, 省去你不少的麻烦.
- 5,JSUI
- https://github.com/kitze/JSUI
JSUI 是一个可视化分类, 构建和管理 JavaScript 项目的工具. 不管是前端应用还是后端应用, 也不论使用的是哪种框架, 只要项目有一个 package.JSON , 即可进行管理.
- 6,PWA Universal Builder
- https://pwa.cafe/
一款脚手架构建工具, 方便创建基于 Preact,React,vue 和 Svelte 的项目, 开箱及支持 Babel,Bublé,Browserlist,TypeScript,PostCSS,ESLint,Prettier 和 Service Workers!
- 7,VuePress
- https://vuepress.vuejs.org/
VuePress 由两部分组成: 第一部分是一个极简静态网站生成器, 它包含由 Vue 驱动的主题系统和插件 API, 另一个部分是为书写技术文档而优化的默认主题, 它的诞生初衷是为了支持 Vue 及其子项目的文档需求.
每一个由 VuePress 生成的页面都带有预渲染好的 html, 也因此具有非常好的加载性能和搜索引擎优化(SEO). 同时, 一旦页面被加载, Vue 将接管这些静态内容, 并将其转换成一个完整的单页应用(SPA), 其他的页面则会只在用户浏览到的时候才按需加载.
二, 框架和库
- 8, PWA Starter Kit
- https://pwa-starter-kit.polymer-project.org/
通过功能丰富的 Web 组件快速帮你构建功能齐全的 PWA 网站项目, 几乎零配置, 完成了构建, 测试和快速部署.
- 9,PaperCSS
- https://www.getpapercss.com/
一个不太常规的 CSS 框架, 如果你希望你的网站有手绘风格感觉, 选择它准没错.
- 10,boardgame.io
- https://boardgame.io/
BOARDGAME.IO 是 Google 开源的一个游戏框架, 旨在允许游戏作者将游戏规则从本质上转化为一系列简单的函数, 这些函数用于描述当一个指定动作发生时游戏的状态变化, 框架负责处理表述性状态传递. 无需再手动编写任何网络或后端代码. 功能特性:
状态管理: 自动跨浏览器, 服务器和存储器无缝管理游戏状态;
快速成型: 在渲染游戏之前调试界面以模拟更改.
多人游戏: 所有连接到同一游戏的浏览器都实时同步, 无需刷新.
私密状态: 私密信息可从客户端隐藏.
日志: 游戏日志可查看任意时间的信息.
UI 工具包: 常用于游戏中的 React 组件.
- 11,Stimulus
- https://stimulusjs.org/
Stimulus 是一个适度的前端框架, 它并不试图接管整个前端的方方面面, 不关心如何渲染 HTML, 相反用来增强 HTML 的相关行为. 如果你的团队规模较小, 但又想要和那些使用比较费力的主流方案的较大团队竞争, 那么这是一个比较适合的前端框架方案.
- 12,sapper
- https://sapper.svelte.technology/
Sapper 是一个类似 Next.JS 的框架, 具有极高的性能和内存效率, 具备代码分割, 服务端渲染的现代框架功能, 是一款军工级别的框架.
- 13,Reakit
- https://reakit.io/
使用这个框架能让你快速搭建漂亮的 React UI 交互站点.
- 14,Evergreen
- https://evergreen.segment.com/
更为强大的 React UI 框架, 有一套非常标准的 UI 设计语言帮你构建企业级的具有国际范设计风格的 Web 应用, 这个框架类似我们国内的 ant.design( https://ant.design/docs/spec/colors-cn https://ant.design/docs/spec/colors-cn )
自己是从事了五年的前端工程师, 不少人私下问我, 2019 年前端该怎么学, 方法有没有?
没错, 年初我花了一个多月的时间整理出来的学习资料, 希望能帮助你快速学习前端, 拿高薪 offer!
这里推荐一下我的前端学习交流群: 731771211, 里面都是学习前端的从最基础的 HTML+CSS+JS[炫酷特效, 游戏, 插件封装, 设计模式] 到移动端 HTML5 的项目实战的学习资料都有整理, 送给每一位前端小伙伴. 2019 最新技术, 与企业需求同步. 好友都在里面学习交流, 每天都会有大牛定时讲解前端技术!
点击: 加入 http://u6.gg/ek2NA
来源: http://www.qdfuns.com/article/51714/3f675b705ad3d58e5a599741367126f6.html