Theia 開發環境搭建

LnEoi發表於2023-03-28
開發環境

Theia 開發環境搭建檔案

官方檔案：https://github.com/eclipse-theia/theia/blob/master/doc/Developing.md#prerequisites

當前搭建版本：v1.35.0。

官方檔案寫的安裝環境條件

  • Node.js >= 16.14.0 and < 17.

    • If you are interested in Theia's VS Code Extension support then you should use a Node version at least compatible with the one included in the version of Electron used by VS Code.
  • Yarn package manager >= 1.7.0 AND < 2.x.x.
  • git (If you would like to use the Git-extension too, you will need to have git version 2.11.0 or higher.)
  • Python3 is required for the build due to node-gyp@8.4.1

Some additional tools and libraries are needed depending on your platform:

  • Linux

    • make
    • gcc (or another compiling toolchain)
    • pkg-config
    • build-essential: sudo apt-get install build-essential

    • native-keymap native node module dependencies:

      • Debian-based: sudo apt-get install libx11-dev libxkbfile-dev
      • Red Hat-based: sudo yum install libX11-devel.x86_64 libxkbfile-devel.x86_64 # or .i686
      • FreeBSD: sudo pkg install libX11

    • keytar native node module dependencies (reference):

      • Debian/Ubuntu: sudo apt-get install libsecret-1-dev
      • Red Hat-based: sudo yum install libsecret-devel
      • Arch Linux: sudo pacman -S libsecret
      • Alpine: apk add libsecret-dev

  • Linux/MacOS

    • nvm is recommended to easily switch between Node.js versions.

  • Windows

    • windows-build-tools

      • run PowerShell as Administrator and copy paste the following: npm --add-python-to-path install --global --production windows-build-tools .

    • If you run into problems with installing the required build tools, the node-gyp documentation offers a useful guide how to install the dependencies manually. The versions required for building Theia are:

      • Python 3.6 or higher
      • Visual Studio build tools 17

    • If you have multiple versions of either python or Visual Studio installed or if the tool is not found, you may adjust the used version via the npm config:

      • npm config set python /path/to/executable/python --global
      • npm config set msvs_version 2017 --global

安裝流程

以下記錄皆在 Ubuntu22 下完成。

基礎開發環境配置

由於 ubuntu22 已經攜帶了 python3 就不需要另外安裝配置了。

安裝 git

sudo apt update
sudo apt-get install git

安裝 nvm

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash

安裝成功後安裝 node 16 版本

nvm install 16

配置 NPM 映象源

npm config set registry https://registry.npmmirror.com

設定成功後可以直接安裝 yarn，預設安裝的都是 1.x.x 版本的

npm i -g yarn

Linux 開發環境額外依賴安裝

根據以上官方給的資訊，Ubuntu 下還要額外安裝一些依賴才能正常使用。

sudo apt update
sudo apt install build-essential libx11-dev libxkbfile-dev libsecret-1-dev

輸入命令確認工具正常呼叫

gcc --version
make --version
pkg-config --version

安裝專案依賴

環境都安裝成功之後在專案下用 yarn 安裝依賴。

git clone https://github.com/eclipse-theia/theia.git \ # 命令會預設下載最新版本 需要下載專案指定版本安裝
  && cd theia \
  && yarn

安裝完成後會自動執行編譯，會輸出類似以下資訊，沒有報錯即可。

 >  Lerna (powered by Nx)   Running target prepare for 5 projects:

    - @theia/cli
    - @theia/eslint-plugin
    - @theia/re-exports
    - @theia/core
    - @theia/electron

 ——————————————————————————————————————————

> @theia/re-exports:prepare

yarn run v1.22.19
$ tsc -b
Done in 4.37s.

> @theia/electron:prepare

yarn run v1.22.19
$ yarn -s generate-theia-re-exports
Done in 1.63s.

> @theia/core:prepare


> @theia/cli:prepare

yarn run v1.22.19
yarn run v1.22.19
$ tsc -b
$ yarn -s generate-theia-re-exports
Done in 1.49s.

> @theia/eslint-plugin:prepare

yarn run v1.22.19
$ tsc -b
Done in 25.37s.
Done in 39.28s.

啟動示例

啟動瀏覽器示例:

yarn download:plugins \
  && yarn browser build \
  && yarn browser start

訪問 http://localhost:3000 檢視。

啟動 Electron 示例:

yarn download:plugins \
    && yarn electron build \
    && yarn electron start

安裝問題記錄

基本都是官方提到的環境依賴不全導致

  • 安裝編譯環境

    sudo apt update
sudo apt install build-essential

    命令執行後會安裝 gcc 、g++ 、make 等軟體包和必要的標頭檔案庫。

    安裝完成後執行命令檢視是否正常輸出版本資訊

    gcc --version
make --version

  • PKG_CONFIG_PATH 環境變數未找到

    pkg-config 用來查詢系統中安裝庫檔案的資訊，典型的是用作庫的編譯和連線。

    官網：PKG_CONFIG

    • 使用 apt-get 安裝

      sudo apt-get update
sudo apt-get install pkg-config

    • 使用 make 編譯安裝

      進入官網下載原始碼，進入目錄後執行：

      make
make check
make install

      安裝完成後執行命令檢視是否正常輸出版本資訊

      pkg-config --version

      如果 --cflags 命令輸出資訊為空，會影響到 make 命令執行，可以配置環境變數

      export PKG_CONFIG_ALLOW_SYSTEM_CFLAGS=1
export PKG_CONFIG_ALLOW_SYSTEM_LIBS=1

      相關閱讀：使用 pkg-config 讓 C++ 工程編譯配置更靈活

  • native-keymap 命令執行失敗；No package 'x11' found；No package 'xkbfile' found

    sudo apt-get install libx11-dev libxkbfile-dev

  • keytar: Command failed. No package 'libsecret-1' found

    sudo apt-get install libsecret-1-dev

  • electron 下載過慢

    可以配置使用國內映象地址：

    npm config set electron_mirror=https://npmmirror.com/mirrors/electron/

    或者始終設定跳過下載

    ELECTRON_SKIP_BINARY_DOWNLOAD=1

  • playwright、FFMPEG playwright 下載過慢

    pip 使用清華源：

    pip config set global.index-url https://pypi.tuna.tsinghua.edu.cn/simple

    存放位置：

    %USERPROFILE%\AppData\Local\ms-playwright on Windows
~/Library/Caches/ms-playwright on MacOS
~/.cache/ms-playwright on Linux

    chromium 存放位置：~/.cache/ms-playwright/chromium-{版本號}，目前安裝下來的資料夾名是 chromium-1005

    ffmpeg 存放位置：~/.cache/ms-playwright/ffmpeg-{版本號}，目前安裝下來的資料夾名是 ffmpeg-1007

    也可以配置環境變數自定義檔案位置：

    PLAYWRIGHT_BROWSERS_PATH={檔案路徑}/pw-browsers

    如果需要不下載二進位制檔案可以配置環境變數：

    PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=1

    然後再執行安裝

  • 部分環境變數只想一次性生效或只在當前專案生效

    只生效一次可以加在執行命令前面，如

    ELECTRON_SKIP_BINARY_DOWNLOAD=1 yran

    只在當前專案生效，可以在專案根目錄建立 .npmrc 檔案，將配置資訊寫入：

    ELECTRON_SKIP_BINARY_DOWNLOAD=1
PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=1

  • nvm 無法記憶切換的 Node 版本

    使用以下命令設定 nvm 預設版本

    nvm alias default 16.19.1

相關文章