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

2020-08-06 07:14:50

今年,我们发布了第一个版本的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 [email protected]/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编辑器和数据库管理器。(希望如此!)