用WSL和Ubuntu在Windows中构建跨平台的电子应用

今年，我们发布了第一个版本的BeeKeeper Studio，这是一个跨平台的SQL编辑器和数据库管理器。它类似于VSCode，但用于SQL。

BeeKeeper Studio是用Electron构建的，这是一个建立在NodeJS和Chromium之上的跨平台桌面应用开发框架。

我的大部分BeeKeeper Studio开发工作都是在Ubuntu中完成的，在Windows中本地运行，使用Linux的Windows子系统。

WSL提供了一个非常棒的技术堆栈，因此在本文中，我将向您展示如何为跨平台开发设置您的WSL2环境。

WSL，或Windows Subsystem for Linux，是Windows10的官方组件，可以在Windows内部运行完整的Linux版本。

我一直在使用WSL2，它是今年早些时候在2004年Windows更新中正式发布的。虽然WSL1的文件系统很慢，而且存在一些软件包兼容性问题，但是WSL2是一个成熟的Ubuntu Linux安装，所以所有在Linux上运行的东西都可以在Windows上运行。

对于本指南，我假设您在WSL2上使用的是Ubuntu18.04或20.04。

一旦我们安装了WSL2，我们就可以启动它(我还安装了neofetch)。

再次检查您是否正在运行WSL2，方法是打开Powershell并键入wsl-l-v，如果没有，请使用wsl--set-version Ubuntu-20.04升级。

这很简单，我们在Ubuntu！让我们只安装一些我们知道我们会需要的东西。

Sudo apt update#第一次sudo apt安装NodeJS git npm#~200MB的软件包sudo npm install-g纱线#这需要一段时间#yarn要快得多。

那么让我们做一个快速的电子项目。我认为制作Electron应用程序最简单的方法是使用Vue.js、Vue CLI和Vue Cli Electron Builder插件。我们走吧。

#电子sudo apt安装libnss3-dev libgdk-picbuf2.0-dev libgtk-3-dev libxss-dev#install vue cli sudo yansglobal add@vue/cli#创建项目所需的系统库。#按照此处的说明创建--Default my_https://cli.vuejs.org/guide/creating-a-project.html#vue-createvue cd my_appvue add e-builder#INSTALL DIRENCES YAN INSTALL#就是这样！！我们有一个功能齐全的选举人应用程序。让我们跑吧：纱线跑电子：发球#什么都不会发生！？应用程序窗口在哪里？#Ubuntu或Windows没有办法显示它！

此时我们应该可以看到我们的应用程序窗口，但是我们看不到。有何不可？

开箱即用的WSL2没有用来显示Linux应用程序的窗口管理器，所以我们必须安装一个窗口管理器，并配置WSL2才能使用它。

希望在未来这将得到开箱即用的支持，在那之前，我们将不得不安装我们自己的。

我们需要的是X服务器。在线搜索“WSL X服务器”会给出一系列相互矛盾的建议。只需跳过所有这些，安装VcsXsrv即可。是的，我知道这是一个SourceForge链接，帮你自己一个忙，用巧克力安装它。

还有关于运行整个Linux桌面环境的指南。运行一个完整的桌面环境完全是矫枉过正，完全不符合我们的目的。

打开VcsXsrv，它将引导您通过三个配置屏幕。下面是对每一个人的选择：

将您的配置保存在您的主目录中，以便轻松启动，然后启动服务器。您将在系统托盘中看到小X徽标。我们准备好出发了。

#将以下行添加到~/.bashrc文件：export display=$(cat/etc/Resolution v.conf|grep namerver|awk'；{print$2}'；)：0 export LIBGL_ALWAYS_INDIRECT=TRUE。

要测试您是否一切正常，您可以尝试启动一个应用程序。让我们尝试一下基本的x11应用程序，以确保一切正常。

哦，等等，你们有Hi-DPI屏幕，所有东西看起来都很模糊吗？好的，你应该按照这篇Stackoverflow帖子来停止模糊，或者使用X410来代替vcsXsrv，它支持开箱即用的HiDPI屏幕(但这是一个付费的应用程序)。我只是禁用了vcsXsrv窗口的所有dpi缩放，因为我只有1080个屏幕。

您将看到一堆构建消息，如果您幸运的话，现在应该可以看到您的Electron应用程序光彩夺目

你可能会想(和我一样)，你可以只使用你的普通Windows应用程序来与你的新电子代码交互。嗯，你可以，差不多，但是性能很糟糕，就像你在网络驱动器上编辑代码一样(你确实是)。

最好将您的WSL环境视为一个完全独立的地方，它只是与Windows共存。他们就像两辆并排在高速公路上的汽车。

使用任何你想要的应用程序的唯一方法是在Linux上运行它。

就我个人而言，我通常使用Sublime Text和IntelliJ Idea进行代码编辑。因此，我将它们安装到WSL环境中，例如，请参阅Sublime text的Linux说明。

一个限制是您必须使用终端启动编辑器，对于Sublime，这意味着您要执行subl命令。另一个限制是WSL2目前不支持Snap包，所以请确保您使用Deb或AppImage版本的任何您需要的应用程序。

这是一张有趣的Windows Sublime屏幕截图，紧挨着Linux Sublime。它们在形状和功能上基本上是一样的，你很难分辨出它们的不同之处。

不要担心这些应用程序的性能，IntelliJ是一个重量级IDE，它在这种设置下工作得很好。

VSCode提供了一些独特的东西。你可以为Windows-VSCode安装一个叫做‘Remote-WSL’的扩展。这允许您只使用常规的Windows VSCode。安装后，您可以使用代码在Linux终端中打开一个目录，它将在Windows VSCode中神奇地打开。

它工作得很好，是一个很棒的展示，展示了未来如何在其他应用程序上实现更深层次的WSL2集成。

虽然WSL确实很棒，但它仍然是一项早期技术，并不是没有一些怪癖。以下是可能发生的一些情况，以及如何修复它们：

X Windows在挂起时关闭。是的，如果您挂起笔记本电脑，WSL中的GUI窗口将会消失。这太让人沮丧了。对于崇高文本，只需从终端使用subl重新启动它们。

HiDPI融合。如果你有一个高DPI的屏幕，你可能需要稍微调整一下，才能让Linux窗口看起来更好看。这是一次性的事情，但仍然需要注意。购买X410可以解决这个问题，微软计划在即将发布的版本中自己解决这个问题。

独立的防火墙。WSL在其自己的虚拟网络中运行。这意味着它不尊重您的Windows代理或防火墙配置。如果您位于公司防火墙之后，并且尝试apt安装，则会收到错误消息。除了手动确定特定组织的主要防火墙设置之外，这里没有很好的解决方法。

虚拟机内存增长。如果在WSL中运行一些占用大量内存的进程，Windows可能无法回收它们使用的内存。您应该会在系统监视器中看到vmmem的一个条目，它很少关闭(但确实会打开)。如果它变得太大，您必须重新启动计算机，或者至少重新启动WSL实例。在我写这篇文章的时候，我的内存是4 GB，尽管我已经一周没有重新启动了。您可以使用wsl--Terminate杀死正在运行的WSL进程，然后只需打开一个新的bash shell即可。

希望你能顺利地用WSL 2在Windows中构建电子应用程序。我发现在Windows下运行Ubuntu是一个梦想，并促使我十年来第一次回到Windows作为我的主要操作系统。

既然您已经走到了这一步，请查看BeeKeeper Studio，它是未来的开源SQL编辑器和数据库管理器。(希望如此！)