搭建基于PC的web开发环境

最近一段时间，我将开发机器从Mac换成了PC，也就需要重新搭建一遍开发环境。我在这个过程中，尝试了多种方案，在这里和大家分享一下。

第一步是选择操作系统。

操作系统对比

Windows（公司是企业版，自用家庭版）
Linux（各种桌面发行版，如Ubuntu）
黑苹果

这里是我总结的一个差异表。

首先排除黑苹果，既有版权问题，又有兼容性问题，下下之选。

Linux在开发方面表现优秀，但是有个致命短板是常用软件的兼容性和桌面系统的稳定性不佳。比较容易给开发者带来较多的无谓干扰。

Windows则恰恰相反，在兼容性和稳定性上一流，但是在开发套件、命令行上支持不足（但是也可以通过安装一些工具，达到基本可用的状态）。

综上我认为最合适的方式是 Windows + Linux，你中有我，我中有你，做到有效互补。

Windows + Linux

Windows和Linux结合方式有主要有如下几种：

1. Linux中安装Windows虚拟机（使用VirtualBox）。
2. Windows中安装Linux虚拟机（使用VirtualBox）。
3. Windows中安装Docker，在Docker中运行Linux。
4. Windows中安装WSL，并安装对应的Linux发行版。
5. Windows中安装WSL2，并安装对应的Linux发行版。

虚拟机

Linux中安装Windows虚拟机有个较大的缺点，是我们一般需要在Windows中的是办公软件，或聊天软件，而在虚拟机内，聊天软件的提醒功能和办公软件的编辑性能都会受影响。且它没有解决掉Linux桌面不稳定的问题，因此暂不考虑它。

使用虚拟机运行Linux，则需要配置网卡，同时性能上也有较大的损耗，使用起来不够方便，也是暂不考虑的选项。

Docker

Docker能提供完整可用的Linux环境，同时在VSCode中也有较好的支持，但是它也有一些限制和不足。

1. 必须要使用专业版及以上，才能运行最新版的Docker。如果现存使用的是家庭版，可以考虑加入Insider计划，使用Insider的企业版。
2. 计算机必须支持并打开虚拟化。
3. Docker性能不佳，从实际使用体验看，在Docker中运行 webpack 打包操作时，Docker daemon会受影响，处于暂时不可用状态，继而导致VSCode Remote连接断开，即使没在用VSCode Remote开发，其它的连接机制应该也会受影响。

WSL/WSL2

WSL是Windows 10中的新特性，可以无缝结合Linux和Windows，对于开发和调试来说特别方便。本来是最佳选择，但是它里面存在一些顽固的底层bug，比如文件夹重命名会提示权限不足，还有经常性地引起系统崩溃蓝屏（尚不确定是否真的是WSL导致的）。

而 npm install 操作中会频繁地操作文件系统，涉及到不少的文件夹重命名操作，因此 npm install 经常会失败，甚至会导致系统崩溃蓝屏。

查阅过Github Issues，有人提过这个问题，官方给的回应是已经在WSL2中修复（似乎可以理解为WSL中放弃维护这个问题了）。

因此我尝试了下升级到WSL2（首先需要使用Insider版本的系统，并升级到Windows 10 build 18917及以上），参阅官方的安装说明 https://docs.microsoft.com/en-us/windows/wsl/wsl2-install。

WSL2中使用了真正的Linux内核，并用Hyper-V运行，本质上还是个虚拟机，但是MS的人要把它打造成和WSL一样的无缝结合体验。

根据目前的体验结果来看，WSL2目前还处于早期阶段，主要有两点问题：

1. IP动态变化，无法像WSL中使用127.0.0.1访问，因而导致需要经常修改Windows中的hosts文件。
2. 内存消耗和磁盘占用大。经常会把内存和磁盘吃满。

不过它确实解决了文件系统中的问题，也值得一试。

PS: Windows Insider版本，从目前的体验结果来看，还是挺稳定的。

鉴于上面提到的种种问题，Windows + Linux 双系统开发的最佳方式，应是使用 WSL2，但是要当心其资源占用问题。

另外一个备选项，则是直接换用Windows原生系统，安装各种工具达到和Linux中相似的体验。

Windows原生

使用Windows原生开发的好处是性能较好，坏处则是命令行工具较弱，常常与基于Mac/Linux开发者的一些配置不兼容。

但是好在一般也都有一些勉强可用的解决方案。

下面我列举一些常见问题及对应的解决方案：

1. 命令行环境变量，在Windows中提示语法问题：

比如一般 npm scripts 中会有 NODE_ENV=development node index.js 之类的命令，在 Mac/Linux上都能正常运行，但是在Windows中会失败。

解决办法是使用 cross-env 包，将 npm scripts 改成 cross-env NODE_ENV=development node index.js 这样的写法。

1. 删除文件命令不兼容

构建文件之前，有时会使用 rm -rf dist && npm run build 之类的命令，但是 rm -rf 在Windows中默认是不可用的。

解决办法是使用 rimraf 包，将 rm -rf dist 换成 rimraf dist

1. 终端工具使用不方便，无法分屏，调节主题。

微软近期有推出 Microsoft Terminal，同样是需要预览版才可以使用，但是不像WSL2要求的版本那么新。

在MS Terminal中，可以实现修改主题效果、设置分屏等常用功能。

比如要实现透明，可以修改配置文件，将 “useAcrylic” : false 改为 “useAcrylic” : true
要修改字体，可以修改 fontFace 和 fontSize 两个属性。
要分屏的话，首先设置下快捷键（keybindings），如：
{
“command” : “splitHorizontal”,
“keys” : [“ctrl+shift+-“]
},
{
“command” : “splitVertical”,
“keys” : [“ctrl+shift+|”]
},
{
“command” : “moveFocusUp”,
“keys” : [“ctrl+alt+up”]
},
{
“command” : “moveFocusDown”,
“keys” : [“ctrl+alt+down”]
},
{
“command” : “moveFocusLeft”,
“keys” : [“ctrl+alt+left”]
},
{
“command” : “moveFocusRight”,
“keys” : [“ctrl+alt+right”]
},
{
“command” : “resizePaneUp”,
“keys” : [“shift+alt+up”]
},
{
“command” : “resizePaneDown”,
“keys” : [“shift+alt+down”]
},
{
“command” : “resizePaneLeft”,
“keys” : [“shift+alt+left”]
},
{
“command” : “resizePaneRight”,
“keys” : [“shift+alt+right”]
},
{
“command” : “closePane”,
“keys” : [“ctrl+shift+w”]
}

能实现类似如下截图中的效果：

1. 命令行提示不友好，不能显示 git 分支信息，不能自动补全 git 命令等。

有一个项目能实现这个功能，基于 powershell。https://github.com/dahlbyk/posh-git

参阅其Readme中的安装环节。

编辑器

编辑器的选择一般来说是萝卜白菜，各有所爱。既有人喜欢大而全的IDE，像VS / VSCode，也有人喜欢小而美的编辑器，像Sublime、Notepad++等，还有一些喜欢自定义配置的，更是对Vim/Emacs推崇不已。

我无意再继续这个古老的话题，也不想挑起“圣战”，仅说一下我自己的选择及原因。

目前我最中意的web开发IDE是 VSCode，它有以下几点好处比较吸引我：

1. 代码跳转及自动补全提示准确可靠，理解JS/TS等的语义。
2. 默认配置可满足大部分需求：一般仅需要安装几个常用插件。
3. 功能丰富：内部集成终端、调试，支持远程开发且很方便。
4. 文档丰富易懂。
5. 支持自定义扩展，且插件开发语言TS比VimScript和EmacsLisp更清晰易懂，生态更丰富。

浏览器

浏览器多多益善，一般为了开发方便，主要还是使用Chrome。

这一点在Windows和Mac上都很容易实现，Linux上也有Chromium可以替代。

如果要测试Safari的兼容性，就要考虑下找个Mac了。

调试

调试和在Mac/Linux中无明显区别。

数据库、Nginx等后端服务

建议使用WSL/WSL2，并在其中安装此类服务，也可使用Windows中对应的安装包，但是在Windows中运行后台服务属于非常规操作，要做好踩坑的准备。

总结

目前来看，在PC上做web开发，如果是前端开发最省心的方案是采用Windows原生系统，后端开发则最好开启WSL功能。

等WSL2稳定后，则可能用 WSL2 会是最佳选择。

搭配以下工具更佳：

1. MS Terminal（需要使用Windows预览版）
2. VSCode，如果使用WSL的话，要搭配 Remote Development 插件
3. Chrome
4. cross-env / rimraf 等跨平台兼容包
5. https://github.com/dahlbyk/posh-git 等PowerShell扩展

最后送大家一句话：

人生苦短，换个Mac。