爆肝配置win11下theia ide的electron项目环境

TomorrowLM
663 阅读5分钟

Theia

介绍

Eclipse Theia 不是一个 IDE，而是一个用来开发 IDE 的框架。是Eclipse 基金会打造的云端及桌面IDE框架，该产品旨在替代微软的 Visual Studio Code

Theia 能够是一个桌面应用，也能够在浏览器和远程服务中运行。为了用同一套代码，支持桌面应用和webIDE，Theia 运行在两个独立的进程中。这个进程分别被称为前端和后端，它们经过WebSockets上的JSON-RPC消息或HTTP上的REST api进行通讯。在桌面应用中，后端和前端都在本地运行，而在远程上下文中后端将在远程主机上运行。web

前端和后端流程都有它们的依赖注入容器，能够贡献扩展。express

  • 前端

前端进程表明客户端而且担任呈现UI的职责。在浏览器中，它简单的在渲染循环中运行，而在Electron中，它在Electron 的窗口中运行，Electron 窗口是一个基本的带有附加Electron和Node.js api的浏览器。而任何前端代码均可以假设浏览器是一个平台，而不用关联Node.js。后端

  • 后端

后端进程运行在Node.js上。咱们使用express做为HTTP服务器。它可能不须要使用任何依赖浏览器做为平台的代码（DOM api）。后端应用程序的启动将首先加载全部贡献扩展的DI模块，而后得到BackendApplication的实例并在其上调用start(portNumber)。默认状况下，后台的express服务器也为前台提供代码。api

  • 平台分离

在扩展程序的顶层文件夹中，咱们还有一个附加的文件夹层，能够按平台分开：浏览器

  • common文件夹包含不依赖于任何运行时的代码。服务器
  • 浏览器文件夹包含要求使用现代浏览器做为平台（DOM API）的代码。架构
  • 电子浏览器文件夹包含须要DOM API以及Electron渲染器过程特定的API的前端代码。eclipse
  • 节点文件夹包含（后端）代码，须要Node.js做为平台。
  • node-electron文件夹包含特定于Electron的（后端）代码。

Cloud IDE 架构

Cloud IDE 主要包含 Client、Server、Container Pool 三部分。

  • Client: 客户端也是最重要的端，将代码编辑等本地功能移植到浏览器中。
  • Server: 服务端也是控制端，包括管理数据交互及资源调度。
  • Container Pool: 运行时，用户代码真正运行的容器环境。

三者之间最典型的架构如下图所示：

img

环境配置

www.cnblogs.com/fanqisoft/p…

github.com/eclipse-the…

 win11 - 从磁盘到项目文件的路径中不能有中文。因为一些引用路径是用的绝对路径，如果用中文，一些方法是无法识别文件路径的（PS：我猜主要还是国外的人写的，并没有适配语言）
 ​
 --pyenv
     --Python 3.9.13
 --nvm
   --node v18.14.0
     --npm 8.3.1
     --yarn 1.22.19
 vs 2022/2017(具体看下面配置详情，我用的是2022)
 node-gyp: v9.3.1

下载node-gyp

node-gyp查找VS安装路径简单解析：juejin.cn/post/694952…（PS：通过find-visualstudio.js文件，需要在配置环境用户变量VSINSTALLDIR。这个能让node-gyp找到vs的位置）

 环境变量-》用户变量
 VCINSTALLDIR=C:\Program Files\Microsoft Visual Studio\2022\Community\VC

github: github.com/nodejs/node…

 npm i -g node-gyp@last
 ​
 node-gyp configure --msvs_version=2017
 node-gyp configure --msvs_version=2022

如果项目文件中依赖的node-gyp不是最新版本，node_modules/node-gyp/lib/find-visualstudio.js文件中可能没有针对2022版本的处理。

下载pyhon

配置pyenv：blog.csdn.net/weixin_4228…

 where python
 ​
 # 查看当前版本
 pyenv version
 ​
 # 查看所有版本
 pyenv versions
 ​
 # 查看所有可安装的版本
 pyenv install --list
 ​
 # 安装指定版本
 pyenv install 3.6.5
 # 安装新版本后rehash一下
 pyenv rehash
 ​
 # 删除指定版本
 pyenv uninstall 3.5.2
 ​
 # 指定全局版本
 pyenv global 3.6.5
 ​
 # 指定多个全局版本, 3版本优先
 # 实际上当你切换版本后, 相应的pip和包仓库都是会自动切换过去的
 pyenv global 3.6.5 2.7.14
 ​
 # 创建一个3.6.5版本的虚拟环境, 命名为v365env, 然后激活虚拟环境
 $ pyenv virtualenv 3.6.5 v365env
 $ pyenv activate v365env
 # 关闭虚拟环境
 $ pyenv deactivate v365env

 两种方法：
 npm config set python python3.9.13 --global
 npm config set python "D:\Python27\python.exe"

安装C/C++编译工具

  • 安装Visual Studio软件以及 C++ 相应的编译工具

     2022
 npm config set msbuild_path "C:\Program Files\Microsoft Visual Studio\2022\Community\MSBuild\Current\Bin\MSBuild.exe"
 ​
 2017
 npm config set msbuild_path "C:\Program Files (x86)\Microsoft Visual Studio\2017\BuildTools\MSBuild\15.0\Bin\MSBuild.exe"
 ​
 npm config set msvs_version 2022 --global

    win11系统,如果SDK报错,需要安装win10SDK

  • 纯前端开发者，只需要安装C/C++编译器工具即可

     以管理员身份执行 npm install -global -production windows-build-tools

配置环境变量或者npm配置

配置npm

 npm config set VCINSTALLDIR "C:\Program Files\Microsoft Visual Studio\2022\Community\VC" --global
 npm config set VCINSTALLDIR "C:\Program Files (x86)\Microsoft Visual Studio\2017\Community" --global
 npm config delete msvs_version --global
 npm config get msvs_version

 //.npmrc
 python=D:\software\pyenv-win-master\pyenv-win\versions\3.9.13\python.exe
 msvs_version=2022
 GYP_MSVS_VERSION=2022
 msbuild_path=C:\Program Files\Microsoft Visual Studio\2022\Community\MSBuild\Current\Bin\MSBuild.exe120

依赖下载启动问题

  • 每次更改依赖后下载或者启动有问题，最好删除node_module，以及yarn的缓存（PS：我就是没有去删除yarn缓存，启动服务启动失败）
  • 从磁盘到项目文件的路径中不能有中文。因为一些引用路径是用的绝对路径，如果用中文，一些方法是无法识别文件路径的（PS：我猜主要还是国外的人写的，并没有适配语言）

  • THEIA_ELECTRON_SKIP_REPLACE_FFMPEG=1 yarn，忽略FFMPEG去下载，我的win11找不到FFMPEG的共享库

  • Module did not self-register drivelist

    cd ./node_modules/drivelist && ../.bin/electron-rebuild

avatar
文章
阅读
粉丝