Javascript 開發筆記 - 使用 npm/npx degit 管理開發模板

當你把你習慣的部分都設置在 github 後，可以靠以下資料快速複製出來使用：

% npx degit changyy/study-node-electron-simple my-project 

> cloned changyy/study-node-electron-simple#HEAD to my-project

% cd my-project 

% source env_nvm.sh 

Now using node v16.13.0 (npm v8.1.0)

% npm install

% npm run start

> my-electron-app@1.0.0 start

> electron-forge start

✔ Checking your system

✔ Locating Application

✔ Preparing native dependencies

✔ Launching Application

其中 degit 套件還滿方便的，可以快速複製樣板出來並去除 git 相關結構。而使用 npx 的指令，他本身 man page 介紹是 Run a command from a local or remote npm package，可以用完就拋掉也不用安裝在本地。

相關資料：

• github.com/Rich-Harris/degit

[Linux] 免費註冊 pCloud 獲得 500GB 空間 / 掛載 pCloud 空間進來使用 @ Docker - Ubuntu 22.04 Image

圖：pcloud.com 活動截圖 

pCloud 是瑞士的雲端空間服務，有在推 500GB/2TB/10TB 等終身付費服務，通常會隨著節慶推出 80% OFF 的方案(兩折)，有興趣可以去逛逛粉絲團，像是註冊完一個免費帳號後 ( https://u.pcloud.com/#page=register&invite=cFRj7ZYwNRty 使用此連結註冊成功有機會送我1GB空間？ )，接著再瀏覽 https://www.pcloud.com/zh/500GB_free 連結，可以啟用 3個月 500GB 免費方案 （這應該是限時活動，不知何時結束）

接著再來講講在 Linux/Ubuntu server 把 pCloud 網路空間用網芳的機制掛在進來，實作上是用 Filesystem in Userspace (FUSE) 機制。我在 Ubuntu 18.04 上，原本要安裝特定環境，但踩到 libudev-dev 安裝上的套件限制，想著想就改用 docker 來跑：

$ sudo docker run -i -t --privileged ubuntu:22.04

root@109661692d2c:/# 

# uname -a

Linux 109661692d2c 5.4.0-1082-oracle #90~18.04.1-Ubuntu SMP Mon Aug 15 16:42:41 UTC 2022 x86_64 x86_64 x86_64 GNU/Linux

# apt update

# apt-get install cmake zlib1g-dev libboost-system-dev libboost-program-options-dev libpthread-stubs0-dev libfuse-dev libudev-dev fuse build-essential git 

# git clone https://github.com/pcloudcom/console-client

# cd ./console-client/pCloudCC/lib/pclsync/

# make clean && make fs

# cd ../mbedtls/ && cmake . && make clean && make 

# cd ../.. && cmake . && make && make install

# ldconfig

# which pcloudcc

/usr/local/bin/pcloudcc

# pcloudcc 

pCloud console client v.2.0.1

Username option is required!!!

以上就是編譯出 pCloud - pcloudcc 指令的過程，接著使用時，在 docker 裡可以靠 tmux or screen 來切換，在此用 screen (因為我已經先用 tmux 包一層 XD)

# apt install screen

# screen

screen 1# pcloudcc -u YourpCloudAccount           

pCloud console client v.2.0.1

Down: Everything Downloaded| Up: Everything Uploaded, status is LOGIN_REQUIRED

Please, enter password

logging in

Down: Everything Downloaded| Up: Everything Uploaded, status is CONNECTING

Down: Everything Downloaded| Up: Everything Uploaded, status is SCANNING

Down: Everything Downloaded| Up: Everything Uploaded, status is READY

如此，接著可以靠 screen 切另一個視窗

screen 2# df -h

Filesystem      Size  Used Avail Use% Mounted on

overlay          45G   38G  7.7G  84% /

tmpfs            64M     0   64M   0% /dev

tmpfs           487M     0  487M   0% /sys/fs/cgroup

shm              64M     0   64M   0% /dev/shm

pCloud.fs       500G  7.3G  493G   2% /pcloud

screen 2# tree /pcloud/

/pcloud/

|-- Getting\ started\ with\ pCloud.pdf

|-- My\ Music

|   |-- Demo\ Audio\ 2.mp3

|   |-- GotJoy.mp3

|   |-- Lovely\ Day.wav

|   `-- Momentum.mp3

|-- My\ Pictures

|   |-- friends.jpg

|   |-- happy-family.jpg

|   |-- in-the-sky.jpg

|   |-- lovers.jpg

|   |-- romance.jpg

|   `-- sweet.jpg

`-- My\ Videos

    `-- pCloud.mp4

3 directories, 12 files

最後，如果要打包目前 docker 的環境，要回到 host 上進行 commit ：

$ sudo docker ps

CONTAINER ID   IMAGE          COMMAND   CREATED          STATUS          PORTS     NAMES

123456789012   ubuntu:22.04   "bash"    25 minutes ago   Up 25 minutes             eager_bardeen

$ sudo docker commit 123456789012 pcloudcc:1.0

sha256:daf74928ed5ef2ee7c8d158ecf066d2b0707a9c145df4829488e01bf3bda751b

$ sudo docker images

REPOSITORY           TAG       IMAGE ID       CREATED              SIZE

pcloudcc             1.0       daf74928ed5e   43 seconds ago       769MB

下次要使用時，再進入，可以省去重裝一堆東西：

$ sudo docker run -i -t --privileged pcloudcc:1.0

root@06bbad280e77:/# 

另外，若想跟 host 環境做綁定，可以用 sudo docker run -i -t --privileged -v ~/my_host_dir:/vm_dir cloudcc:1.0，把 host 端的目錄掛載進去 docker vm 中，可以在靠 rsync 等指令把檔案傳到 pCloud 空間上！在 Oracle VM - JP Region 上，上傳到 pCloud US region 的速度可以來到均速 20MB/s 上喔，算是非常不錯的品質

此外，pCloud 採用類似網芳方式 mount 進來使用，對於這些虛擬機器只有 20GB, 40GB 來說，可以瞬間擴大到 500GB 等空間，很舒服 XD 且不像使用 Dropbox 機制，佔用到本機空間的。

最後，補充一下關於 docker 使用，由於 pcloudcc 會使用 fuse 環境，因此要求更高權限：特權容器 (privileged container) ，這件事是有風險的，當 docker 裡頭運行的程式被黑了，有可能傷及到 host 環境，但無論如何，在 host 安裝環境本來也會有風險沒錯 XD 就留意一下即可

以上體驗後，再自行評估要不要拿來當虛擬機的備份用法囉！

[Linux] apt: error while loading shared libraries: libudev.so.1: cannot open shared object file: No such file or directory @ Ubuntu 18.04

安裝套件時，有碰到 libudev-dev 相關套件太新：

$ sudo apt install libudev-dev

Reading package lists... Done

Building dependency tree       

Reading state information... Done

Some packages could not be installed. This may mean that you have

requested an impossible situation or if you are using the unstable

distribution that some required packages have not yet been created

or been moved out of Incoming.

The following information may help to resolve the situation:

The following packages have unmet dependencies:

 libudev-dev : Depends: libudev1 (= 237-3ubuntu10.53) but 237-3ubuntu10.54 is to be installed

E: Unable to correct problems, you have held broken packages.

$ dpkg -l | grep libudev

ii  libudev1:amd64                            237-3ubuntu10.54                            amd64        libudev shared library

$ lsb_release -a

No LSB modules are available.

Distributor ID: Ubuntu

Description: Ubuntu 18.04.6 LTS

Release: 18.04

Codename: bionic

然後，就耍蠢把他移掉 XD

$ sudo dpkg --purge --force-all libudev1

dpkg: libudev1:amd64: dependency problems, but removing anyway as you requested:

 util-linux depends on libudev1 (>= 183).

 libpci3:amd64 depends on libudev1 (>= 196).

 initramfs-tools-bin depends on libudev1 (>= 183).

 liblvm2app2.2:amd64 depends on libudev1 (>= 183).

 libplymouth4:amd64 depends on libudev1 (>= 183).

 udev depends on libudev1 (= 237-3ubuntu10.54).

 libusb-1.0-0:amd64 depends on libudev1 (>= 183).

 snapd depends on libudev1 (>= 183).

 liblvm2cmd2.02:amd64 depends on libudev1 (>= 183).

 libdevmapper1.02.1:amd64 depends on libudev1 (>= 183).

 open-vm-tools depends on libudev1 (>= 183).

 lvm2 depends on libudev1 (>= 183).

 dosfstools depends on libudev1 (>= 183).

 libapt-pkg5.0:amd64 depends on libudev1 (>= 183).

(Reading database ... 157028 files and directories currently installed.)

Removing libudev1:amd64 (237-3ubuntu10.54) ...

Processing triggers for libc-bin (2.27-3ubuntu1.6) ...

一堆指令都高度依賴不能跑了 XD

$ sudo apt update

apt: error while loading shared libraries: libudev.so.1: cannot open shared object file: No such file or directory

解法也不難，在用 dpkg 裝回來，在 http://archive.ubuntu.com/ubuntu/pool/main/s/systemd/ 尋找

$ wget http://archive.ubuntu.com/ubuntu/pool/main/s/systemd/libudev1_237-3ubuntu10.54_amd64.deb

$ sudo dpkg -i libudev1_237-3ubuntu10.54_amd64.deb

Selecting previously unselected package libudev1:amd64.

(Reading database ... 157024 files and directories currently installed.)

Preparing to unpack libudev1_237-3ubuntu10.54_amd64.deb ...

Unpacking libudev1:amd64 (237-3ubuntu10.54) ...

Setting up libudev1:amd64 (237-3ubuntu10.54) ...

Processing triggers for libc-bin (2.27-3ubuntu1.6) ... 

$ sudo apt update

Get:1 http://security.ubuntu.com/ubuntu bionic-security InRelease [88.7 kB]

Hit:2 http://ap-tokyo-1-ad-1.clouds.archive.ubuntu.com/ubuntu bionic InRelease

Get:3 http://ap-tokyo-1-ad-1.clouds.archive.ubuntu.com/ubuntu bionic-updates InRelease [88.7 kB]

Get:4 http://ap-tokyo-1-ad-1.clouds.archive.ubuntu.com/ubuntu bionic-backports InRelease [74.6 kB]

Fetched 252 kB in 2s (128 kB/s)   

Reading package lists... Done

Building dependency tree       

Reading state information... Done

All packages are up to date.

記錄一下，而真實的任務還沒解決，推論應該是裝上舊把對應的 so 路徑修一下即可，目前還是走安全一點的路徑，用虛擬環境/docker來執行

ref：

• https://bugs.launchpad.net/ubuntu/+source/systemd/+bug/1988563

Electron 開發筆記 - 使用 @electron-forge/plugin-webpack

評估 electron 到底要跟哪套網頁開發的流程合在一起用，先研究一下 @electron-forge/plugin-webpack，粗略整合還堪用，但還有一些路徑或程式碼架構要處理。

先規劃了 src 目錄：

  % tree src 

  src

  ├── html

  │   └── mainRenderer

  │       ├── index.html

  │       └── index.js

  ├── main

  │   └── index.js

  ├── preload

  │   └── mainRenderer.js

  └── renderer

      ├── index.js

      └── mainRenederer.js

  

  5 directories, 6 files

其中 html 就是預期每個 renderer 的網頁所在地；而 main/index.js 就是 Electron main process 處理的項目；而 renderer/mainRenederer.js 是預期在 Electron main process 中處理 createWindow 的項目抽取出來重複使用；而 preload/mainRenderer.js 就是 Electron Renderer 展現前的 preload script

如此，想讓純前端網頁的程式碼都可以賴在 html 目錄下，屆時要靠常見工具封裝成 SPA 也方便。

而使用 electron-forge/plugin-webpack 上，只需要留意二件事：

1. 在 package.json 描述要被 webpack 封裝的項目

% cat package.json | jq '.config'

{

  "forge": {

    "plugins": [

      [

        "@electron-forge/plugin-webpack",

        {

          "mainConfig": "./webpack.main.config.js",

          "renderer": {

            "config": "./webpack.renderer.config.js",

            "entryPoints": [

              {

                "name": "main_window",

                "html": "./src/html/mainRenderer/index.html",

                "js": "./src/html/mainRenderer/index.js",

                "preload": {

                  "js": "./src/preload/mainRenderer.js"

                }

              }

            ]

          }

        }

      ]

    ]

  }

}

2. 在 Electron main process 中，使用 createWindow 後要讀取的 index.html 跟 preload.js 要改用變數

MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY, MAIN_WINDOW_WEBPACK_ENTRY

目前還會卡到 webpack dev server 運行時，有些 js code 執行異常，正考慮不要靠 webpack dev server，可能就要正式離開 @electron-forge/plugin-webpack" 用法了

更多資訊：github.com/changyy/study-node-electron-forge-with-plugin-webpack

Electron 開發筆記 - 初探 ElectronJS 框架開發 PC app

約莫一年前團隊同事接了個用 ElectronJS 開發的程式，並且依照其框架成果再做出另一個 PC app ，最近播點時間來研究一下 ElectronJS 。幾個月前接觸 Golang 時，也曾想過用 Golang + Electron 練習一下 PC app ，只是整體上運作起來還是太卡了點。

整體上，要認識 ElectronJS 建議都先看一次官方文件 www.electronjs.org/docs/latest/ ，基本上寫的精簡不錯，看完一輪 Processes in Electron 就會學會：

• Electron 的流程架構 (Process Model)，可以分成 main process (node.js / main.js) 和 renderer process (BrowserWindow / renderer.js )，並且透過 preload.js 串起 main process 跟 renderer process 溝通橋樑
• preload.js 是在 renderer process 執行前運行的，等於進入到 renderer process 前，可以打造一些溝通環境
• 資安領域上，如何讓 renderer process 的權限不要太大 (Context Isolation)
• 關於 main process 和 renderer process 溝通時，該怎樣進行 (ipcMain, ipcRenderer)，可以分成 Renderer to Main 單向溝通、Renderer to Main 雙向溝通、Main to Renderer 溝通等
• 看一眼 Process Sandboxing 情況，再多了解一下 MessagePorts 用法 (像 window.postMessage 之 iframe 溝通）

如此，就差不多可以來用 Electron 開發 PC app，然而有更多眉眉角角躲在 package.json 中以及一堆神秘的指令，如 electron-forge 等等。

我想，開發 Electron 的複雜度，源自於整個專案進行會跨非常多領域(指令)吧，每個混再一起就會覺得爆炸大，每個分離看待就會舒適許多。

像我自己也弄了：

• env_nvm.sh：靠 nvm 切換 node.js 版本
• env_vim.sh：靠 .vimrc 和 .vimrc_coc.nvim 完成簡易 coding style 和 auto-complete 設置
• 把上述包裝在 init_env.sh 運行，每次開發就先跑一下 source init_env.sh 就行了

最後，對於 Electron PC app 開發，後續也都還會再做一些程式碼封裝方式(webpack等)和程式碼混淆等，當然，若還有開發框架 vue.js, react 等，也都還有對應的任務，所以連續動作還是很多的，之後繼續筆記一下。

其他：github.com/changyy/study-node-electron-simple