第二十四個夏天後: 9月 2022

2022年9月19日星期一

Electron 開發筆記 - 使用 Vue.js 3 與 Vite 和最新 Electron Stable Release (20.x.x)

週末繼續把玩一下 Electron framework 也複習 Vue.js ，一直在想要怎樣兜再一起比較方便，類似的整合一直都有：

等等，後來自己想了一下，乾脆練習配置吧！自己先規劃想要的架構：

盡量把高變動的 code 都擺在 src 目錄中
盡量讓 vue.js code 可以統一在某個目錄中
直接使用最新的 Vue.js 及其最新工具
使用最新的 Electron Stable Release
盡量簡單，甚至不用 TypeScript ，讓其他新手想跨入也方便

就這樣，採用了 Electron 20.0.0 (2022.08) 和 Vue.js + Vite 環境

於是乎，先摸索了一個出來：github.com/changyy/node-electron-vue-vite

% tree src
src
├── html
│ └── mainRenderer
│ ├── index.html
│ ├── src
│ │ ├── App.vue
│ │ ├── components
│ │ │ └── HelloWorld.vue
│ │ └── main.js
│ └── vite.config.js
├── main
│ └── index.js
├── preload
│ └── mainRenderer.js
└── renderer
├── index.js
└── mainRenederer.js

7 directories, 9 files

之後再來想想看有什麼題目可以把玩吧！

2022年9月13日星期二

Javascript 開發筆記 - 使用 Vue.js 和 Vite

規劃網頁開發時，引入一個框架是不錯的選項，讓團隊有共同溝通的語言，目前打算把以前接觸 Vue.js 部分複習一下，直接來用 Vue 3 以及 Vite ，其中 Vite 是一個很像 Webpack 的工具，號稱是下一代前端開發工具且運作效率高，看了一下是可以達成打包的程式碼任務，也能提供 dev web server + hot reload (hot module replacement/HMR) 服務。

文件資料：

這次主要接觸了 Vite ，才跑去看一下 Vue.JS 作者是誰 XD 我用了好一陣子都沒去認識一下。跑去看了一下 Vue.JS 作者的 twitter 跟 WIKI，發現人在新加坡且學經歷也滿有趣的，偶爾會分享跟小孩相處的經驗，並且也分享網路受訪又被辱罵等文，在 2022.08 剛和團隊產出了 Vue.JS 3 中文文檔，年紀相仿，滿有趣的生活。

快速上手法：

% nvm use v16
Now using node v16.13.0 (npm v8.1.0)
% npm -v
8.1.0
% npm create vite@latest my-vue-app --template vue
Need to install the following packages:
create-vite@latest
Ok to proceed? (y) y
✔ Select a framework: › Vue
✔ Select a variant: › JavaScript

Scaffolding project in /private/tmp/my-vue-app...

Done. Now run:

cd my-vue-app
npm install
npm run dev
% cd my-vue-app
% cat package.json
{
"name": "my-vue-app",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"vue": "^3.2.37"
},
"devDependencies": {
"@vitejs/plugin-vue": "^3.1.0",
"vite": "^3.1.0"
}
}
% tree
.
├── README.md
├── index.html
├── package.json
├── public
│ └── vite.svg
├── src
│ ├── App.vue
│ ├── assets
│ │ └── vue.svg
│ ├── components
│ │ └── HelloWorld.vue
│ ├── main.js
│ └── style.css
└── vite.config.js

4 directories, 10 files
% npm install
% npm run dev

VITE v3.1.0 ready in 435 ms

➜ Local: http://127.0.0.1:5173/
➜ Network: use --host to expose

接著去編輯 src/components/HelloWorld.vue 可以看到網頁內容立即改變。如此大概就可以窺見 Vite 的基本用法，接著是編譯：

% npm run build

> my-vue-app@0.0.0 build
> vite build

vite v3.1.0 building for production...
✓ 16 modules transformed.
dist/assets/vue.5532db34.svg 0.48 KiB
dist/index.html 0.44 KiB
dist/assets/index.43cf8108.css 1.26 KiB / gzip: 0.65 KiB
dist/assets/index.795d9409.js 52.87 KiB / gzip: 21.33 KiB

% tree dist
dist
├── assets
│ ├── index.43cf8108.css
│ ├── index.795d9409.js
│ └── vue.5532db34.svg
├── index.html
└── vite.svg

1 directory, 5 files

% cat dist/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + Vue</title>
<script type="module" crossorigin src="/assets/index.795d9409.js"></script>
<link rel="stylesheet" href="/assets/index.43cf8108.css">
</head>
<body>
<div id="app"></div>

</body>
</html>

以上就簡單過一下常用的東西。

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

2022年9月11日星期日

[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

2022年9月1日星期四

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" 用法了

訂閱：文章 (Atom)

2022年9月19日 星期一