Server-X：一款可能提高你十倍工做效率的工具

时间 2019-11-05

标签 server 一款可能提高十倍效率工具繁體版

原文原文链接

本文将介绍一款全新的前端开发工具，但愿它能给你的前端开发带来看起来和如今同样但其实又不那么同样的体验。css

你可能会说，你们都是 ~~秃头的~~ 成熟的前端程序员了，每一台电脑上都有几套本身辛辛苦苦装好的全家桶，为何还要新换一个开发工具？html

对，盲生，你可能发现了华点。前端

数一数你电脑上目前为前端本地开发安装了多少小工具、小插件？这其中仅仅是为代码开发阶段，就可能有本地服务器、远程调试工具、代理工具、浏览器插件等等。它们也许是你一个个尝试无数同款后最终肯定安装的，也多是被各种『震惊！超好用前端开发工具大全』安利的，而且其中不乏全局安装、全局配置的「重器」。node

试想如今你要换一台新电脑或者重装新系统了，你还得一个个把它们从新安装回来。何况大部分这样的工具是没法根据工程进行独立配置的，也就是说你在不一样项目之间切换时还须要手动修改你的开发工具配置。这些都是一些强迫症患者如做者本人没法忍受的。react

总结一下平时搞开发的时候一些习觉得常但仔细一想又挺麻烦的场景：webpack

你必须手动安装各种工具软件以丰富你的本地开发环境
这样的本地开发环境没法拷贝或者很难拷贝，没法分享
每种工具都要单独配置，且配置基本不是按照项目隔离的，切换项目时常常须要修改配置
有时候你的需求并无合适的工具来知足，本身写一个又太麻烦
写一个项目要同时打开 N 种工具：本地服务器、mock 服务器等
常常还须要不断重启这些工具以刷新配置
……

基于以上以及一些其它痛点，便有了下文将介绍的 server-x。git

什么是 server-x

如同它名字的前半部分，server，你能够简单地说，server-x（缩写为 svrx）就是一个本地服务器，而且它仍是一个功能丰富、使用便捷的轻量级服务器。程序员

先来看下最简单的使用场景：github

首先你须要安装 svrx 的 CLI 工具，web

npm install -g @svrx/cli
复制代码

而后新建一个简单的页面，在项目根目录启动 svrx，

mkdir example && cd example
echo '<html><body>Hello svrx!</body></html>' > index.html
svrx
复制代码

访问 http://localhost:8000 便可看到你的前端页面。

安装便捷，启动迅速，独立使用，除了 node ，不依赖任何别的环境。固然，这是任何一个独立的、基础的 dev server 都能作到的最必不可少的功能。

除此以外还有什么？svrx 还自带了诸如自动打开浏览器、监听代码变更自动刷新（livereload）、proxy 等实用性很是强的功能。是的，你也能够说，部分 dev server 也是能作到的。

svrx 和其它本地服务器最大的区别，实际上是它名字 server-x 的后半部分：x。咱们都知道，x 能够表明「未知和无限」，即 svrx 是一个有着无限可能的服务器。为何说它有无限的可能？由于 svrx 最大的特色：它是一个插件平台。

经过插件，理论上你的 svrx 确实能够拥有任意的功能。每个小功能在这里就是一个独立的插件，你只须要声明就能使用它，就像这样：

svrx --webpack --qrcode --markdown
复制代码

很清晰直观，没有冗余的配置，在你声明插件之后，svrx 会自动帮你下载安装插件，而后直接启动。

因此你能够说，svrx 是一个聚合了众多功能插件的平台，它自己就是一个全家桶。不过不一样的是，你丝毫不须要关心插件的安装过程。除了 svrx 的 CLI，你无需安装其它任何工具。

另外，全部插件都不是全局安装，而是直接安装到你工程的node_modules目录中。因此工程开发是真正独立隔离的，你能够自由给每个项目定制一套开发环境，不用考虑安装卸载，彻底不担忧环境污染问题，同时系统也能够保持干净清爽。

事实上，业内目前可用的本地 dev server 有不少，但像 svrx 这样，轻量易用的、具备完备插件机制的、彻底不依赖工程环境的，几乎是没有的。接下来，咱们经过建立一个简单的前端工程，继续探索一下使用 svrx 进行开发的全新体验，带你深刻了解一些进阶用法和黑科技，这些才是 svrx 真正有趣的地方。

建立工程及启动

方便起见，咱们选用前端经常使用的 Create React App 进行示例工程建立（前面提到，svrx 不依赖任何工程环境，选取 CRA 仅仅为了示例方便）。

npm init react-app svrx-example
cd svrx-example
复制代码

因为新工程默认使用 webpack 打包，想要启动这样的工程，咱们须要使用插件 svrx-plugin-webpack。这个插件的做用就是读取项目配置，调用 webpack-dev-middleware，使你的 webpack 项目能够无缝接入到 svrx 服务中。

不过因为新工程并无暴露出 webpack 配置项，因此咱们须要先在根目录建立一个 webpack.config.js：

// webpack.config.js
module.exports = require('react-scripts/config/webpack.config')('development');
复制代码

而后咱们就能够顺利启动项目了：

svrx --webpack
复制代码

浏览器会自动弹出 http://localhost:8000/ 页面：

这时能够尝试编辑下 src/App.css，看看页面是否是实时变化了？

进阶 1：添加配置项

默认地，svrx 会在启动时自动开启一些内置的基础插件，如静态伺服（serve）、转发服务（proxy）、页面自动刷新（livereload）等。它们都有一些默认行为以保证用户能够快速启动 svrx，固然，若是你须要对这些内置配置项作一些自定义修改，svrx 也提供了两种方式。

你能够在命令行启动 svrx 时传入参数进行配置：

svrx --port 3000 --https --no-livereload
复制代码

也能够在你的工程目录下创建.svrxrc.js或svrx.config.js文件，将上面的命令行参数持久化下来：

// .svrxrc.js
module.exports = {
  port: 3000,
  https: true,
  livereload: false
};
复制代码

svrx 的所有配置项及描述能够在官方文档-内置项中查看。

进阶 2：开始尝试使用其它插件

除了内置插件之外，svrx 还有不少独立插件，好比前面提到的 svrx-plugin-webpack。在你须要别的开发功能（如远程调试、mock 等）时，只须要简单地在 svrx 配置中声明这些独立功能插件的名字便可正常使用。正是这些独立插件，为 svrx 项目提供了丰富多彩的功能体验。下面先介绍几个好用的好玩的插件：

localtunnel - 把本地服务暴露出去

试想你正紧张有序地在进行页面开发，这个时候你领导的消息弹了出来：

让我看看你的页面写得怎么样了

这个时候你怎么办？你是否是得先检查进度，把能用的代码先提交，而后你灵机一动，部署了一个本地服务，准备甩给你领导一串本机 IP。可是你忽然想起来，领导不是在出差吗？（太敬业了，还在时刻检查你的开发进度）领导访问不了内网啊。这时你只能慌忙找服务器再部署一个测试环境给领导，部署得还贼慢，领导飞机都要起飞了！

这个时候，你就须要 svrx 的 localtunnel 插件了！它能够将你的本地服务暴露到localtunnel.me，从而方便地进行本地代码的测试和分享。你再也无需为了测试你的一点代码变更就专门部署一次测试服务了。

启动 localtunnel 只需在以前的启动命令后添加声明便可：

svrx --webpack --localtunnel
复制代码

上面的命令将会自动安装 localtunnel 插件并启动 svrx，其余人（是的，大家甚至不须要在同一个内网）此时访问终端打印的 https://*.localtunnel.me 也将看到你的本地服务：

而且，你的每次本地页面变更均可以被别人实时看到，不再用担忧领导忽然检查做业了！

weinre - 远程调试移动端代码

如今通常都是如何进行移动端代码调试的？你可能会说，“这题我会！”很简单，先在手机上打开设置里的开发者模式（可能要找一下），容许USB 链接，再找一根 USB 链接线，把手机和电脑链接起来，而后你打开你电脑上的浏览器开发者工具，开启一些东西，找到远程设备，而后Inspect……

万一有更简便的方法呢？你能够试试 svrx 的 weinre 插件，它用于方便地远程调试移动端的页面，并且是“无线”的。

咱们再次回到刚才的 example 工程，此次咱们在启动命令后面添加两个新的插件：

svrx --open=external --webpack --weinre --qrcode 
复制代码

首先经过上面的命令快速安装 weinre 和二维码插件并启动 svrx，此时试着拿手机访问启动好的项目页面，这里推荐配合 qrcode 二维码插件让手机轻松扫码访问页面地址:

紧接着电脑打开 weinre 的调试器页面 http://${your_ip}:8001（默认），找到手机的访问记录，就能够在调试器上对手机页面进行远程调试了。

定制你的插件

除了上述的，svrx 还有不少有趣好用的插件，你能够在svrx 的官网查询目前全部的插件，并从中挑选使用。经过不一样插件的组合，你就能够自由定制你的开发环境啦！

固然，若是没找到你想要的功能插件，你还能够尝试本身写一个。

你能够用插件实现哪些功能呢？拿前面的 qrcode 二维码插件来讲，为了把二维码显示到页面上，你能够往前端页面注入一些 js 脚本，css 样式；也能够像 webpack 插件那样，日后端逻辑中注入一些 koa 风格的中间件，拦截请求作数据处理，好比这里的 webpack-dev-middleware。

有了强大的先后端注入能力，几乎全部的本地开发需求，均可以经过建立一个 svrx 插件来解决。并且插件的开发异常简单！刚刚介绍的一些插件的核心代码几乎都只有 50 行左右！此外，svrx 还提供了快速建立插件的脚手架工具，能够去官方文档-如何写一个插件查看更多插件开发的细节，在这里就不赘述了。

进阶 3：能够热更新的快捷路由

在先后端分离的开发场景中，前端常常会碰到须要进行数据 mock 的状况。因而你可能会经历：

修改 mock 数据，重启 mock 服务器
打开、关闭接口转发，重启
修改工程代码，重启
……

就算你说如今的 mock 服务都很智能，不须要重启了，可是你仍是须要在本地服务外手动再开启一个 mock 服务，要么就是狠一点，把 mock 数据写到工程代码里。太不优雅了！

因而 svrx 的动态路由就派上用场了。是的，除了丰富的插件体系，svrx 其实还有一个功能强大、使用便捷的动态路由功能。仍是回到咱们的 example 工程，你能够经过如下命令开启快速尝试：

touch route.js # create empty routing file
svrx --webpack --route route.js
复制代码

在route.js中：

get('/blog').to.json({ title: 'svrx' });
复制代码

此时打开/blog，你将看到{ title: 'svrx' }的 json 输出。

有了这个路由功能，你将能够在不侵入项目代码的前提下快速直观地建立你的 mock 数据。而且它是支持 hot reload 的，即每次编辑 route.js 后，无需重启 svrx 服务，路由数据会自动更新。

固然，除了用于本地开发数据 mock 外，svrx 路由还能够作不少。下面是一些路由示例：

get('/index.html').to.sendFile('./index.html');
get('/blog').to.redirect('/user');
get('/old/rewrite:path(.*)').to.rewrite('/svrx/{path}');
get('/api(.*)').to.proxy('http://mock.server.com/');
get('/blog')
  .to.header({ 'X-Engine': 'svrx' })
  .json({ code: 200 });
复制代码

如你所见，svrx 的路由语法很是简单，你能够清晰直观地阅读出每一条规则，好比发送文件、重定向、路由重写、proxy 等等。而且除了官方提供的一些路由操做外，你也能够经过插件来对路由操做进行扩展。关于 svrx 路由的语法规则、扩展等详情能够参阅官方文档-路由的使用。

写在最后

一个渐进且易于使用的、插件化的前端开发平台。

这是 svrx 的 slogan，同时也很是准确地描述了 svrx 的定位：

svrx 是面向前端开发者的一个强大的本地 dev server，它由本地服务、proxy、livereload 等功能插件组成
svrx 有着丰富强大的插件系统，你能够自由使用或者定制想要的功能

在致力于为前端开发者提供更为优雅便捷的本地开发体验的同时，svrx 也为你们提供了一个能够快速进行自定义功能开发的平台。做为用户，你能够挑选合适的插件组合来知足你的本地服务需求，一键启动，省时省力，易拔插的功能设计，也不用担忧环境污染。若是没有找到合适的插件，你能够变身开发者，自给自足，快速实现想要的功能。做为开发者，你还能够大开脑洞，经过你写的插件提高更多人的本地开发体验。

以后，svrx 也将继续推出更多优质功能或插件，持续为前端开发服务。