1. 首页
  2. IT资讯

19年你应该关注这50款前端热门工具(上)

“u003Cdivu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp3.pstatp.comu002Flargeu002Fpgc-imageu002Fd0ee6cc89bcd46f39b45d8a8eca02342″ img_width=”900″ img_height=”383″ alt=”19年你应该关注这50款前端热门工具(上)” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E19年,又是新的一年,“前端届”,又出了哪些新的“玩意”?今天小编向你推荐目前比较热门新鲜度靠前的50款前端工具,希望在新的一年里,对你有所帮助。u003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003E一、构建工具u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003E01u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003Eparcelu003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003Ehttps:u002Fu002Fparceljs.orgu002F u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp9.pstatp.comu002Flargeu002Fpgc-imageu002F040db9975c2c4f099dccfc48a1805458″ img_width=”1080″ img_height=”681″ alt=”19年你应该关注这50款前端热门工具(上)” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003EParcel是一款极速零配置WEB应用打包工具,快速、几乎零配置是它最大的特点,开箱即用。相比webpack,Parcel对于新手来是一个很好的选择。u003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003E02u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003ECrittersu003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003Ehttps:u002Fu002Fgithub.comu002FGoogleChromeLabsu002Fcrittersu003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002F6755baab08ba4106999d28f2c59739f6″ img_width=”512″ img_height=”512″ alt=”19年你应该关注这50款前端热门工具(上)” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E一款webpack的插件,它可以很方便的配置内联关键css( critical CSS ),其余的css部分则会异步加载,由于它不使用无头浏览器(headless browser)呈现内容,因此快速轻巧。u003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003E03u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003E sucraseu003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003Ehttps:u002Fu002Fsucrase.iou002F u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002Fc475fe4fdd9d421698c0ece438822dc6″ img_width=”1080″ img_height=”624″ alt=”19年你应该关注这50款前端热门工具(上)” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E如果你用typscript构建React项目,sucrase将是一个不错的选择,它的编译速度将是Babel的20倍。sucrase——一款ES6+编译器,重点关注非标准语言,例如Typescript,JSX和Flow。u003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003E04u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003EWebpack Config Toolu003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003Ehttps:u002Fu002Fwebpack.jakoblind.nou002F u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002F931552d87b3c4482aaad8c1061e46d98″ img_width=”1080″ img_height=”604″ alt=”19年你应该关注这50款前端热门工具(上)” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E一款可视化的在线工具网站,你只需要选择前端项目运用到的技术和相关配置,就能一键帮你生成webpack.config.js文件,省去你不少的麻烦。u003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003E05u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003EJSUIu003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003Ehttps:u002Fu002Fgithub.comu002Fkitzeu002FJSUI u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp3.pstatp.comu002Flargeu002Fpgc-imageu002F58f78e99afae46b6bf005740a62822b3″ img_width=”1080″ img_height=”759″ alt=”19年你应该关注这50款前端热门工具(上)” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003EJSUI 是一个可视化分类、构建和管理 JavaScript 项目的工具。不管是前端应用还是后端应用,也不论使用的是哪种框架,只要项目有一个 package.json ,即可进行管理。u003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003E06u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003EPWA Universal Builderu003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003Ehttps:u002Fu002Fpwa.cafeu002Fu003Cu002Fstrongu003E u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002F07b1be12fe1e4f588542add5c9129a79″ img_width=”1080″ img_height=”537″ alt=”19年你应该关注这50款前端热门工具(上)” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E一款脚手架构建工具,方便创建基于Preact,React,Vue和Svelte的项目,开箱及支持Babel,Bublé,Browserlist,TypeScript,PostCSS,ESLint,Prettier和Service Workers!u003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003E07u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003EVuePressu003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003Ehttps:u002Fu002Fvuepress.vuejs.orgu002F u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003EVuePress 由两部分组成:第一部分是一个极简静态网站生成器,它包含由 Vue 驱动的主题系统和插件 API,另一个部分是为书写技术文档而优化的默认主题,它的诞生初衷是为了支持 Vue 及其子项目的文档需求。u003Cu002Fpu003Eu003Cpu003E每一个由 VuePress 生成的页面都带有预渲染好的 HTML,也因此具有非常好的加载性能和搜索引擎优化(SEO)。同时,一旦页面被加载,Vue 将接管这些静态内容,并将其转换成一个完整的单页应用(SPA),其他的页面则会只在用户浏览到的时候才按需加载。u003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003E二、框架和库u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003E08u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003EPWA Starter Kitu003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003Ehttps:u002Fu002Fpwa-starter-kit.polymer-project.orgu002Fu003Cu002Fstrongu003E u003Cu002Fpu003Eu003Cpu003E通过功能丰富的WEB组件快速帮你构建功能齐全的PWA网站项目,几乎零配置,完成了构建、测试和快速部署等相关工作。u003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003E09u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003EPaperCSSu003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003Ehttps:u002Fu002Fwww.getpapercss.comu002F u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002F417376e80c1442eab371dad99060b495″ img_width=”1080″ img_height=”563″ alt=”19年你应该关注这50款前端热门工具(上)” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E一个不太常规的CSS框架,如果你希望你的网站具有手绘风格的感觉,选择它准没错。u003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003E10u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003Eboardgame.iou003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003Ehttps:u002Fu002Fboardgame.iou003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003EBOARDGAME.IO是 Google 开源的一个游戏框架,旨在允许游戏作者将游戏规则从本质上转化为一系列简单的函数,这些函数用于描述当一个指定动作发生时游戏的状态变化,框架负责处理表述性状态传递。 无需再手动编写任何网络或后端代码。功能特性:u003Cu002Fpu003Eu003Culu003Eu003Cliu003E状态管理:自动跨浏览器、服务器和存储器无缝管理游戏状态;u003Cu002Fliu003Eu003Cliu003E快速成型:在渲染游戏之前调试界面以模拟更改。u003Cu002Fliu003Eu003Cliu003E多人游戏:所有连接到同一游戏的浏览器都实时同步,无需刷新。u003Cu002Fliu003Eu003Cliu003E私密状态:私密信息可从客户端隐藏。u003Cu002Fliu003Eu003Cliu003E日志:游戏日志可查看任意时间的信息。u003Cu002Fliu003Eu003Cliu003EUI 工具包:常用于游戏中的 React 组件。u003Cu002Fliu003Eu003Cu002Fulu003Eu003Cpu003Eu003Cstrongu003E11u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003EStimulusu003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003Ehttps:u002Fu002Fstimulusjs.org u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002Fe69e78f41910408897b0506edacbfe74″ img_width=”1080″ img_height=”616″ alt=”19年你应该关注这50款前端热门工具(上)” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003EStimulus是一个适度的前端框架,它并不试图接管整个前端的方方面面,不关心如何渲染HTML,相反用来增强HTML的相关行为。如果你的团队规模较小,但又想要和那些使用比较费力的主流方案的较大团队竞争,那么这是一个比较适合的前端框架方案。u003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003E12u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003Esapperu003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003Ehttps:u002Fu002Fsapper.svelte.technologyu002Fu003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003ESapper是一个类似Next.js的框架,具有极高的性能和内存效率,具备代码分割,服务端渲染等现代前端框架功能的特点,是一款军工级别的框架。u003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003E13u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003EReakitu003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003Ehttps:u002Fu002Freakit.iou002F u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002F8d301c701c6e43319591f8701af0544c” img_width=”1080″ img_height=”417″ alt=”19年你应该关注这50款前端热门工具(上)” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E使用这个框架能让你快速搭建漂亮的React UI 交互站点。u003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003E14u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003EEvergreenu003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003Ehttps:u002Fu002Fevergreen.segment.comu002Fu003Cu002Fstrongu003E u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp3.pstatp.comu002Flargeu002Fpgc-imageu002F2767fdb7e78f46819d8c4f679a7024e4″ img_width=”1080″ img_height=”471″ alt=”19年你应该关注这50款前端热门工具(上)” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E更为强大的React UI 框架,有一套非常标准的UI设计语言帮你构建企业级的具有国际范设计风格的WEB应用,这个框架类似我们国内的ant.design(https:u002Fu002Fant.designu002Fdocsu002Fspecu002Fcolors-cn)。u003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003E结束语u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003E今天的分享就到这里,剩下的内容,小编将会在下篇文章进行分享,敬请期待,更多精彩内容请关注“前端达人”公众号u003Cu002Fpu003Eu003Cu002Fdivu003E”

原文始发于:19年你应该关注这50款前端热门工具(上)

主题测试文章,只做测试使用。发布者:杀手梦三刀,转转请注明出处:http://www.cxybcw.com/10808.html

联系我们

13687733322

在线咨询:点击这里给我发消息

邮件:1877088071@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code