前端研发常用哪些器具软件？
<h2 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">1、</span>构建<span style="color: black;">工具</span></h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">1、 Parcel</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><a style="color: black;">https://parceljs.org/</a></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">Parcel是一款极速零配置WEB应用打包<span style="color: black;">工具</span>，快速、几乎零配置是它最大的特点，开箱即用。相比webpack，Parcel<span style="color: black;">针对</span>新手<span style="color: black;">来讲</span>未尝不是一个很好的<span style="color: black;">选取</span>。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">2、 Critters</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><a style="color: black;">github.com/GoogleChrom…</a></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">一款webpack的插件，它<span style="color: black;">能够</span>很方便的配置内联<span style="color: black;">重要</span>css( critical CSS ),其余的css部分则会异步加载，<span style="color: black;">因为</span>它不<span style="color: black;">运用</span><span style="color: black;">没</span>头浏览器(headless browser)呈现内容，<span style="color: black;">因此呢</span>快速轻巧。=</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">3、sucrase</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><a style="color: black;">sucrase.io/</a><span style="color: black;">倘若</span>你用typscript构建React项目，sucrase将是一个不错的选着，它的编译速度将是Babel的20倍。sucrase——一款ES6+编译器，重点关注非标准语言，例如<a style="color: black;">Typescript</a>，JSX和Flow。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">4、Webpack Config Tool</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><a style="color: black;">webpack.jakoblind.no/</a></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">一款可视化的在线<span style="color: black;">工具</span>网站，你只<span style="color: black;">必须</span><span style="color: black;">选取</span>前端项目运用到技术和<span style="color: black;">关联</span>配置，就能一键帮你生成webpack.config.js，省去你不少的麻烦。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">5、JSUI</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><a style="color: black;">github.com/kitze/JSUI</a></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">JSUI 是一个可视化<span style="color: black;">归类</span>、构建和管理 JavaScript 项目的<span style="color: black;">工具</span>。不管是前端应用还是后端应用，<span style="color: black;">亦</span>不论<span style="color: black;">运用</span>的是哪种框架，只要项目有一个 package.json ，<span style="color: black;">就可</span>进行管理。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">6、PWA Universal Builder</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><a style="color: black;">pwa.cafe/</a></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">一款脚手架构建<span style="color: black;">工具</span>，方便创建基于Preact，React，Vue和Svelte的项目，开箱及支持Babel，Bublé，Browserlist，TypeScript，PostCSS，ESLint，Prettier和Service Workers！</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">7、VuePress</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><a style="color: black;">vuepress.vuejs.org/</a></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">VuePress 由两部分<span style="color: black;">构成</span>：<span style="color: black;">第1</span>部分是一个极简静态网站生成器，它<span style="color: black;">包括</span>由 Vue 驱动的主题系统和插件 API，另一个部分是为书写技术文档而优化的默认主题，它的诞生初衷是为了支持 Vue 及其子项目的文档需求。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">每一个由 VuePress 生成的页面都带有预渲染好的 HTML，<span style="color: black;">亦</span><span style="color: black;">因此呢</span><span style="color: black;">拥有</span>非常好的加载性能和搜索引擎优化（SEO）。<span style="color: black;">同期</span>，一旦页面被加载，Vue 将接管这些静态内容，并将其转换成一个完整的单页应用（SPA），其他的页面则会<span style="color: black;">仅在</span>用户浏览到的时候才按需加载。</p>
<h2 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">2、</span>框架和库</h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">8、 PWA Starter Kit</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><a style="color: black;">pwa-starter-kit.polymer-project.org/</a></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">经过</span>功能丰富的WEB组件快速帮你构建功能齐全的PWA网站项目，几乎零配置，完<span style="color: black;">成为了</span>构建、测试和快速<span style="color: black;">安排</span>。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">9、PaperCSS</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><a style="color: black;">www.getpapercss.com/</a></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">一个不太常规的CSS框架，<span style="color: black;">倘若</span>你<span style="color: black;">期盼</span>你的网站有手绘风格感觉，<span style="color: black;">选取</span>它准没错。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">十、</span><a style="color: black;">boardgame.io</a></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><a style="color: black;">boardgame.io/</a></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><a style="color: black;"><span style="color: black;">http://</span><span style="color: black;">BOARDGAME.IO</span></a>是 Google 开源的一个游戏框架，旨在<span style="color: black;">准许</span>游戏作者将游戏规则从本质上转化为一系列简单的函数，这些函数用于描述当一个指定动作<span style="color: black;">出现</span>时游戏的状态变化，框架负责处理表述性状态传递。 <span style="color: black;">没</span>需再手动编写任何网络或后端代码。 功能特性：</p>状态管理：自动跨浏览器、服务器和存储器<span style="color: black;">没</span>缝管理游戏状态；快速成型：在渲染游戏之前调试界面以模拟更改。<a style="color: black;">多人游戏</a>：所有连接到同一游戏的浏览器都实时同步，<span style="color: black;">没</span>需刷新。私密状态：私密信息可从客户端<span style="color: black;">隐匿</span>。日志：游戏日志可查看任意时间的信息。UI <span style="color: black;">工具</span>包：常用于游戏中的 React 组件。<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">11、Stimulus</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><a style="color: black;">stimulusjs.org</a></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">Stimulus是一个适度的前端框架，它并不试图接管<span style="color: black;">全部</span>前端的方方面面，不关心<span style="color: black;">怎样</span>渲染HTML，相反用来<span style="color: black;">加强</span>HTML的<span style="color: black;">关联</span><span style="color: black;">行径</span>。<span style="color: black;">倘若</span>你的团队规模较小，但又想要和<span style="color: black;">哪些</span><span style="color: black;">运用</span>比较费力的主流<span style="color: black;">方法</span>的<span style="color: black;">很强</span>团队竞争，<span style="color: black;">那样</span>这是一个比较适合的前端框架</p>
页:
[1]