如何配置前端工程师开发环境

首先我默认你使用的是mac电脑,windows电脑可以自行研究一下,原理基本相同。

针对前端工程师,我们离不开几个工具(terminal、vscode、chrome),而proxy工具是可选的。有人会说把软件都装一遍就完事。其实我们可以玩出一些花样,提高大家开发效率(防止不断切换mac桌面)。

配置开发环境

VSCode Server

参考VSCode Server官方文档,这里我们采用的是微软最新推出的VSCode的web server版本,该版本有别于desktop版本。它可以通过远程模式和本地模式来启动服务。远程模式利用 vscode.dev (无需借助codespace)进行远程开发访问。本文更多介绍的是本地模式。

首先安装依赖:

wget -O- https://aka.ms/install-vscode-server/setup.sh | sh

我这里主要采用的是它的本地服务模式,利用以下命令本地启动:

code-server serve-local

在安装额外依赖包后,服务启动成功。你可以通过默认端口localhost:8000访问。此时你可以登陆的Github或者Microsoft账号来同步你的编辑器偏好设置。

VSCode Server

VSCode Server是自带Web terminal,所以我的开发经验就是打开localhost:8000,快捷键打开terminal。该编辑器已经将code命令设置好了,当你想启动一个项目,你可以毫不犹豫地敲上code .,即可新开窗口打开当前目录。

这样好处在于,我把前面所说三大工具terminal、vscode、chrome揉合在一起,都放在chrome里面。我只需要关注chrome这个窗口即可,调试页面会更加得心应手,不需要切换窗口。所以内存消耗都交给chrome处理,有效避免electron的性能担忧(虽然vscode已经优化得非常好)。你一天的工作基本上离不开Chrome浏览器,除非你在摸鱼。

进程守护

VSCode Server是经常使用的,希望它进程常驻在后台,这里我们采用supervisor来守护进程。首先安装supervisor:

brew install supervisor

默认在初始目录/usr/local/etc/supervisor.d下配置一个vs-code-server.ini。利用以下配置文件确保你的项目是能够开机启动且自动重启的,并将日志放置在指定位置,确保报错信息有迹可循。

[program:code-server]
directory = /usr/local/bin
command = /usr/local/bin/code-server serve-local
autostart = true
startsecs = 5
autorestart = true
startretries = 3
user = weipingxiang
redirect_stderr = true
stdout_logfile_backups = 20
stdout_logfile=/usr/local/var/log/vs-code-server.log
stdout_logfile_maxbytes=10MB
stderr_logfile=/usr/local/var/log/vs-code-server-err.log
stderr_logfile_maxbytes=10MB

配置完成后,记得supervisorctl reload重新加载配置文件,配置文件才会生效。supervisorctl是可交互命令,可以查看当前服务运行状态。如果你的nodejs服务开启过多导致卡死,直接采用killall node杀死所有nodejs进程,该vscode server也将会自动重启。

VSCode Server和Code Server

讲了很多VSCode Server的使用,大家肯定会拿它和Code Server进行比较,他们俩不是同一个东西,其中一个是官方工具,一个是第三方工具。Code Server同样是利用VScode源码改造的BS模式工具,有很多博文都已经介绍过了,这里不再赘述。而VSCode Server的远程模式则比较麻烦,它启动,注册,并通过secure tunnel与微软官方进行通信,需要你的机器命名。简而言之,就是它多了一层tunnel,将你的vscode web和服务器相连接。

为了体验VScode Server的远程模式,你还需要填写signup form,等待微软官方审批方可使用。我有幸等到了它的许可,远程模式的体验还是比较慢,开发体验算不上流畅。效果远不如本地模式,大家可以自行试用。

架构

以下是它与Code Server的对比,Code Server更适合在自己搭建服务器使用。VSCode Server还在发展的过程中,本地模式则是相对友好,希望它未来会发展得更好。

VSCode ServerCode Server
官方(亲儿子)第三方
远程模式要经过官方注册远程模式只需登陆
github验证密码验证
自带code命令

配置代理工具

proxy工具是可选的,部分web项目会采用开发工具 webpack-dev-server 或者 vite 的 proxy 工具。这种方式是比较推荐的,因为它没有依赖代理工具的配置,做到了较好的开发体验(DX)。

当我们遇到登陆模块页面等调试的时候,由于域名有限制,我们想将远端域名代理到本地,我们可以采用whistle(由这款nodejs开发的工具),全局安装npm install -g whistle即可。利用chrome的SwitchyOmega将设备的服务映射到端口上,方可利用 local.whistlejs.com 界面来管理代理规则。

w2 start --init

代理规则也极其简单,我们可以通过简单的规则让快速满足开发需求,通配符规则可以参考官方文档匹配模式。whistle服务是否常驻在后台,以你的开发需求习惯而定。

原创文章,作者:admin,如若转载,请注明出处:http://aprain.cn/index.php/2022/02/08/%e5%a6%82%e4%bd%95%e9%85%8d%e7%bd%ae%e5%89%8d%e7%ab%af%e5%b7%a5%e7%a8%8b%e5%b8%88%e5%bc%80%e5%8f%91%e7%8e%af%e5%a2%83/

(0)
上一篇 2021年 11月 10日 上午12:48
下一篇 2022年 3月 8日 下午11:35

相关推荐

  • JavaScript 必须学会的11 个工具方法

    前俩天也是更新了俩篇 JavaScript 的文章,当时由于时间问题,所以就是想到哪里写到哪里,因为对于技术文章只有三五句,几分钟就阅读完,属实无趣,这次趁着周六日有时间好好整理下…

    2022年 3月 8日
  • Github上5.3k的游戏!异形工厂的制作思路

    前言 很早之前,我就关注到了Github上一款叫做shapez的高星游戏,主要玩法就和他的名字一样,是个需要利用开采器,传送带等各种工具来完成每个关卡所需要收集的开采物的游戏(游戏…

    2022年 5月 8日
  • Vue DevUI 1.0 正式发布🎉

    Vue DevUI 1.0 已经发布。2021年1月9日,Vue DevUI 作为一个开源项目公开亮相。如今,它已经包含了55个简单、易用、灵活的高质量组件。 Vue DevUI …

    2022年 4月 8日

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注