Closed2022/03/19にクローズ44

Neutralinojs

Neutralinojs
Build lightweight cross-platform desktop apps with JavaScript, HTML, and CSS | Neutralinojs

静的Webサーバーと websocket を使った軽量なフレームワーク。
依存ライブラリがほとんど無いのが特徴。
（electon は巨大になりすぎたんや...）

内部では WebSocket で通信しあってるっぽい。
基本的にバックエンドは触れず、提供されているAPIをクライアントから呼び出す方式。
ファイルシステム、ダイアログ、トレイ、クリップボードは標準で使える。
Desktop app に必要そうなのは一通り持っているようだ。

拡張機能を使って好きな言語で native のバック処理を書くことが可能のよう。（未確認）
WebSocket でバックを生やして拡張していく感じ。
実質 WebSocket アプリなのでは？

通信は one-time token を用いたもので、基本的な安全性はあると思われる。
セキュア度は未調査。
（electron は堅牢になりすぎて開発効率が格段に落ちたので、こちらもどうなるかはわからない。）

require が使えないようなので、要調査ポイント。

一通り書けたら記事にする。

とりあえずこの通りにやってみる。
ルートに package.json が無いのでCLIを入れたほうが楽。（ローカルで入れてもまぁOK）
Your First Neutralinojs App | Neutralinojs

$ npm install -g @neutralinojs/neu

$ neu create test-neutralinojs
$ cd ./test-neutralinojs
$ neu run

動いた。
お手軽さがすごい。

サンプルにトレイの機能がついていた。
常駐アプリも作れるようだ。
（Ubuntu Budgie のトレイにも入ってくれた）

初期のファイルツリーはこのような感じ。
package.json すら無いのはちょっと違和感がある...
基本的には /resources の中身が本体で、webページを書くように開発をする。
Neutralino.os.showMessageBox("message"); といった方法でバックとやり取りをしていた。

ホットリロードはできなかった。
こちらは方法があるようで後述する。

私の環境だと下のコマンドが必要だった。詳しくは上リンクへ。
CheckNetIsolation.exe LoopbackExempt -a -n="Microsoft.Win32WebViewHost_cw5n1h2txyewy"

ビルドしてみる。

$ neu build --release

これだけで生えてきた...
やっぱ electron 複雑になりすぎてるよ...

win 環境はこの .exe をダブルクリックするだけで起動した。
いや～ネイティブアプリだ。重さも全く感じない。

サイズとリソース使用量。
上等だな！すごい。

そうそう、アプリ中のログ機能が最初から備わっていて、開発中はコンソールに、prodはログファイル neutralinojs.log に出力される。
いたわり尽くせり...。

ポータブルアプリとかインストーラーもできるらしいが、まだ文章化できていないらしい。
issue やコードを読めば使えるかも。

詳細：Distribution Overview | Neutralinojs

とりあえずやりたいこと

vue を使えるようにする
lint と pre commit
実験でテレワーク用のアラーム作りたい（非常にほしい）
- 常駐テスト
- 簡単なデータ記録テスト
- 音声テスト
- toast extension テスト
あわよくば sqlite
- extension テスト

Distribution Overview | Neutralinojs https://neutralino.js.org/docs/how-to/use-a-frontend-library
react の使い方は載っとるんよな。だからできる。（きっと）

そうか、バックが無いからフロントがホットリロードできりゃ問題ないのか。HMR
バックを dev 鯖で動かして、そのURLを meu cli にバインドする感じそう。
なるほど。

  _   _            _             _ _             _     
 | \ | | ___ _   _| |_ _ __ __ _| (_)_ __   ___ (_)___
 |  \| |/ _ \ | | | __| '__/ _` | | | '_ \ / _ \| / __|
 | |\  |  __/ |_| | |_| | | (_| | | | | | | (_) | \__ \
 |_| \_|\___|\__,_|\__|_|  \__,_|_|_|_| |_|\___// |___/
                                              |__/

vue 作ってく。
Distribution Overview | Neutralinojs
インストール | Vue.js

当然の vite + vue3 + typescript
爆速開発したい。

# 空の neu を作成
$ npx @neutralinojs/neu create test-neutralinojs-vue3 --template neutralinojs/neutralinojs-zero
$ cd ./test-neutralinojs-vue3
$ rm -r ./www

# 内部で vue3 を作成
$ yarn create vite client --template vue-ts
$ cd ./client
$ yarn install
$ yarn build

neutralino.config.json の設定を書き換える。

 {
   ...
-  "documentRoot": "/www/",
+  "documentRoot": "/client/dist/",
   "nativeAllowList": [
     "app.*",
+    "extensions.*"
   ],
   "modes": {
     "window": {
       ...
-      "icon": "/www/icon.png"
+      "icon": "/client/dist/favicon.ico"
     }
   },
   "cli": {
     "binaryName": "test-neutralinojs-vue3",
-    "resourcesPath": "/www/",
+    "resourcesPath": "/client/dist/",
     "extensionsPath": "/extensions/",
-    "clientLibrary": "/www/neutralino.js",
+    "clientLibrary": "/client/public/neutralino.js",
     "binaryVersion": "4.2.0",
     "clientVersion": "3.1.0"
   }
 }

それぞれ client の置き方に合わせる感じ。
一度ビルドしておくと dist の調整がしやすい。

modes defaultMode については各開発環境に合わせよう。

Doc には無かったが、 "extensions.*" の権限を渡さないと権限エラーが出るので注意。
ここの作者さん、 issue でしっかり回答してくれているので、下手な Doc より役に立つ。

次に vue アプリに neutralino.js を組み込む。

client/src/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
    <script src="/neutralino.js"></script>
  </body>
</html>

client/src/main.ts

import { createApp } from "vue";
import App from "./App.vue";

declare global {
  interface Window {
    Neutralino: any
  }
}

createApp(App).mount("#app");

window.Neutralino.init();

declare の書く先は要調整。
Neutralino...型ファイルあるのかな...？

# neu アプリの構築
$ yarn build

$ cd ../
$ neu update
$ neu run -- --window-enable-inspector

わお！

$ ncu update で設定で指定したパスに neutralino のランタイムを自動でインストールしてくれる。

bin
client\public\neutralino.js

があることを確認する。
アプデもこれすれば良いだけの神機能。

--window-enable-inspector オプションでおなじみの devtool を起動できる。
config.json の modes 内に書けば常に動作するが、build 時も反応してしまうので、コマンドを推奨する。
（これはいつか治りそう）

ncu 起動時は dist 内のを参照するので、更新されないときは vue の build を行う。
（後でホットリロード対応を行うので安心してくだされ）

もし画面が真っ白なら下記の WebView2 の件を参照。
私環だと入れたら表示された。本番でも必要かは要検証。

/bin が .gitignore に入っている問題。
以下のコマンドで最新版を取ってこれる。

$ neu update

/bin
neutralino.js

は update コマンドで勝手に更新できる。すごい。

dev tool が見たい問題。

Debugging in window mode · Issue #208 · neutralinojs/neutralinojs · GitHub https://github.com/neutralinojs/neutralinojs/issues/208

enableInspector: true で見れるらしい。
出てこない。。。

build the core-linux build
... もしかしたら linux 限定かもしれない...
（確かに ubuntu でテストしたときは見れた）

Issues · neutralinojs/neutralinojs · GitHub https://github.com/neutralinojs/neutralinojs/issues/692

Hey.. could you install the Webview2 runtime and try to debug your project? I think enableInspector is not supported for Edge runtime

win だと標準が edge runtime を見に行くようになってるっぽい。
開発用に Webview2 を入れろって作者が言ってる。

ここからノリでいれる。
WebView2 - Microsoft Edge Developer https://developer.microsoft.com/ja-jp/microsoft-edge/webview2/

お～なんか出てきた！

vue 構築時に出てきたエラーメモ

あえ～
このあたりはパスの指定ミスであったり、vue のビルド忘れが濃厚。
渡しの場合は documentRoot に typo があった；；

ほんとに ws で通信してるね。面白い。

... $ neu update してないでしょ。

１つ目は neutralinojs のパスが死んでる。
vite は public ディレクトリがルートにコピーされるので、ダイレクトに src="/neutralino.js" で参照する。

2つ目は js が読み込めてないので、APIが実行できないというエラー。

neu CLI | Neutralinojs

NE_RT_NATPRME
No permission to execute the provided native method.

ほう...権限よこせと。

Missing permission to execute the native method · Issue #781 · neutralinojs/neutralinojs

神記事。
extension.* の権限が必要のようだ。
多分 extension を使わない設定にすれば怒られないと思う。
作者が以前のテンプレは全部許可してて、今は権限制限したけど治すの忘れてたって言ってるw

init property が無いと。
これは script で読み込むときに type="module" を付けたら発生した。
遅延読み込みなんて気にするなということだろう。

ホットリロード、HMRの設定を行う。

Using Frontend Libraries | Neutralinojs #Enabling hot-reload https://neutralino.js.org/docs/how-to/use-a-frontend-library#enabling-hot-reload

ん～ vue だとどうしてもうまく行かなかった...
vite のやつ最適化されすぎて、パッチ適用なんだもん...
キャッシュどこにあんねん！

ということで vite を build watch モードで運用する。

Build watch mode · Issue #1434 · vitejs/vite · GitHub https://github.com/vitejs/vite/issues/1434
本番環境用のビルド | Vite https://ja.vitejs.dev/guide/build.html#ファイル変更時のリビルド

$ vite build --watch コマンドで更新のたびに dist を更新するモードになる。
大昔の webpack みたいなやつ。

neu 設定にパスを書き込む。

neutralino.config.js


  "cli": {
      ...
      "frontendLibrary": {
        "patchFile": "/client/dist/index.html"
      },
    },

実行コマンド。
長くなってきたので npm script にすると良い気がする。

$ yarn build --watch
$ neu run -- --window-enable-inspector --frontend-lib-dev

ビルドが走ったら F5 を押せば更新される。
ん～～～。

"devUrl": "http://localhost:3000" を仕込めれば F5 も要らないんだが；；
まぁ妥協できる範囲なのでこれで。

lint とか仕込めるかな...？

hmr の話

GitHub - codezri/neutralinojs-react: A simple React.js template for building Neutralinojs apps https://github.com/codezri/neutralinojs-react

のやつは動くんだよなぁ...
react-scripts start は何やってんだろ

GitHub - codezri/neutralinojs-react: A simple React.js template for building Neutralinojs apps https://github.com/codezri/neutralinojs-react

あーこれだ WebpackDevServer
これと同じ形式なら行ける気がする。

Hidden comment

new をどうしても ncu と書いてしまう...

eslint + prettier の導入

zenn の先人を頼る
Vite + Vue3にESLintとPrettierを導入する

$ yarn add -D eslint eslint-plugin-vue @vue/eslint-config-typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin
$ yarn add -D prettier @vue/eslint-config-prettier
$ yarn add -D eslint-config-prettier

eslintとprettierを併用する時の設定 | すな.dev
衝突防止で eslint-config-prettier も入れる。

.eslintrc.yml

env:
  browser: true
  es2021: true
extends:
  - 'plugin:vue/vue3-recommended'
  - 'eslint:recommended'
  - '@vue/typescript/recommended'
  - 'prettier'
parserOptions:
  ecmaVersion: 12
plugins:
  - 'vue'
  - '@typescript-eslint'
rules: {}

printWidth: 120
tabWidth: 2
singleQuote: true
semi: false

package.json

{
  ...
  "scripts": {
    ...
    "lint": "eslint ./src --ext .ts,.js,.vue --ignore-path .gitignore",
    "lint:fmt": "eslint ./src --ext .ts,.js,.vue --ignore-path .gitignore --fix",
    "prettier": "prettier ./src --check --ignore-path .gitignore",
    "prettier:fmt": "prettier ./src --write --ignore-path .gitignore",
    "fmt": "yarn lint:fmt && yarn lint:prettier:fmt"
  },
}

完成

precommit すんぞ

$ yarn add -D lint-staged husky

package.json

{
  ...
  "scripts": {
    ...
    "prepare": "cd .. && husky install"
  },
  "lint-staged": {
    "*.{ts,tsx}": [
      "yarn lint",
      "yarn prettier"
    ]
  },
}

.husky/pre-commit

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

cd ./client && yarn lint-staged

.git と package.json が同一ディレクトリにいないプロジェクトで husky をつかう - Qiita

適当にフォーマット崩して、コミット時にエラーが出れば成功。

あれ build watch 反応してねぇな...

Hidden comment

仕方ないからヒントを探す

A Vue-cli plugin ? · Issue #38 · neutralinojs/neutralinojs-cli
Starter template for Neutralino.js with Vite.js and Vue.js | BestofVue
yooneskh/vite-neutralinojs-template: Starter template for Neutralino.js with Vite.js and Vue.js
- Upcoming
- Run dev server directly in Neutralino.js window (Vite.js must some how build on every change and then neu listen)
- おい！ここがいるんだが！！！！

ホットリロードのコードリーディング

    "frontendLibrary": {
        "patchFile": "/litepy-react/public/index.html",
        "devUrl": "http://localhost:3000"
    }

この辺をキーに

この frontendlib.js がキーっぽい。

それを呼び出してるのが runner.js

src/commands/run.js

            if(command.frontendLibDev && configObj.cli.frontendLibrary.devUrl) {
                argsOpt += ` --url=${configObj.cli.frontendLibrary.devUrl}`
            }

で -- frontendLibDev オプションと devUrl があった時、 argsOpt に --url を付与している。

argsOpt の使われ方は

src/commands/run.js

await runner.runApp({argsOpt, arch: command.arch});

src/modules/runner.js
runApp() は多分このLibの本体。
ここでは上の変数が options に格納されている。

argsOpt をたどると、

src/modules/runner.js

if(options.argsOpt) args += " " + options.argsOpt;

んん？更に args 組み立ててる。
args を追うと、

src/modules/runner.js

utils.log(`Starting process: ${binaryName} ${args}`);
const neuProcess = spawn(binaryPath, args.split(` `), { stdio: 'inherit' })

spawn は child_process のコール。
binaryPath は let binaryPath = 'bin${path.sep}${binaryName}';

あーこれ多分 $ neu update で取れる bin ファイルに処理投げてるね。
名前はこんな漢字の neutralino-win_x64.exe
検索...

ビルドファイルこいつだー https://github.com/neutralinojs/neutralinojs/blob/a7e50eb6585cb04c44a843ce97d808b06439ec7e/build_windows.bat
てかこのリポジトリの cpp ファイル全部結合してる感じやな。

とすると --url オプションをたどればいいのかな。
cpp 見るの久々やな...下手したら10年前...

んー devUrl はそれで受け取った画面を描画するって感じかな？
ただし -- frontendLibDev がないときは無視する。

改めて webpack-dev-server で実装したらできてしもうたww

さっそく vue3 + webpackの環境を作るぞ | 新人エンジニアの気まぐれ日記

vite は捨てることになるけど、快適さには勝てんね。

ポイント。

先に neu を起動。

$ neu run -- --window-enable-inspector --frontend-lib-dev

そこに書いてあるポートで dev-server を起動する。

$ yarn server --port 52384

F5 を押せばコネクション成立！
（frontendLibrary.devUrl は書いてるんだけど読んでくれないので苦肉の策。）

ちゃんとホットリロードできてる～

再構築していく。

neutralinojs + vue3（SFC） + typescript + webpack + webpack-dev-server

neu の初期構築

# 空の neu project を作成
$ npx @neutralinojs/neu create --template neutralinojs/neutralinojs-zero <project name>
$ cd ./<project name>

（省略可） .editorconfig の作成

改行コードなりがぐちゃぐちゃになるので設定をおすすめ。
保存するときに勝手に整えてくれるすごいやつ。

$ touch ./.editorconfig

.editorconfig

# EditorConfig is awesome: https://EditorConfig.org

root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

[*.md]
insert_final_newline = false
trim_trailing_whitespace = false

今こんな感じ。

vue 3の初期構築

vue は vite が使えないので、生で構築していく
- neu の HMR 部分が webpack-dev-server を前提に組まれているよう
- 速さより快適さ
- 代替案求む

volar の拡張を入れる。
もし vetur を使っているなら無効化しておく。
https://github.com/johnsoncodehk/volar

# vue3 + webpack を作成
$ mkdir client
$ cd ./client
$ yarn init -y
$ yarn add vue
$ yarn add -D webpack webpack-cli webpack-dev-server vue-loader @vue/compiler-sfc html-webpack-plugin

$ mkdir src public
$ touch webpack.config.js src/main.js src/App.vue public/index.html

client/webpack.config.js

const path = require('path')
const HTMLWebpackPlugin = require('html-webpack-plugin')
const { VueLoaderPlugin } = require('vue-loader')

module.exports = {
  mode: 'development',
  entry: {
    index: path.join(__dirname, 'src', 'main.js'),
  },
  output: {
    filename: 'assets/js/[name]-[chunkhash].js',
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
      },
    ],
  },
  plugins: [
    new HTMLWebpackPlugin({
      template: path.resolve(__dirname, 'public', 'index.html'),
      inject: 'head',
    }),
    new VueLoaderPlugin(),
  ],
}

client/src/main.js

import { createApp } from 'vue'
import App from './App.vue'

// vue の展開
createApp(App).mount('#app')

client/src/App.vue

<template>
  <div>{{ message }}</div>
</template>

<script setup>
const message = 'Hello Vue!'
</script>

client/public/index.html

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8" />
  <link rel="icon" href="/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>client</title>
</head>

<body>
  <div id="app"></div>
</body>

</html>

client/package.json

  "scripts": {
    ....
    "dev": "webpack-dev-server",
    "build": "webpack --mode=production"
  },

.gitignore に以下を追加しておくと良い。

.gitignore

# vue files
package-lock.json
node_modules
dist

動作確認。dev-server を起動して動くことを確認。

$ yarn dev --open

デフォルトは http://localhost:8080/

（まぁつまらんね。。）
HMR対応確認のため、App.vue の文字を適当に変えてみて、自動的に変わるか確認する。

今のディレクトリ構成はこんな感じ。

$ rm -r ./www

www はテンプレなので削除する
- 中に入っているロゴを favicon.ico にすると new っぽくて良き

typescript 対応

当然の権利の typescript。
（型無し言語を駆逐しろ！！（過激派））

$ yarn add -D typescript ts-loader @types/node

$ touch tsconfig.json shims-vue.d.ts

client/src/main.js => client/src/main.ts に変更。
中身は同じ。

client/src/App.js を ts 対応する。（中身は同じx2）

$ git diff -U0 ./src/App.vue
diff --git a/client/src/App.vue b/client/src/App.vue
index d78deaa..a9765d0 100644
--- a/client/src/App.vue
+++ b/client/src/App.vue
@@ -5 +5 @@
-<script setup>
+<script setup lang="ts">

tsconfig.json を vue 公式の推奨で作成する。

client/tsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "moduleResolution": "node"
  }
}

webpack.config.js の記載変更。

$ git diff -U0 ./webpack.config.js
diff --git a/client/webpack.config.js b/client/webpack.config.js
index 97b64cb..1e0eb2b 100644
--- a/client/webpack.config.js
+++ b/client/webpack.config.js
@@ -8 +8 @@ module.exports = {
-    index: path.join(__dirname, 'src', 'main.js'),
+    index: path.join(__dirname, 'src', 'main.ts'),
@@ -14,0 +15,8 @@ module.exports = {
+      {
+        test: /\.tsx?$/,
+        loader: 'ts-loader',
+        options: {
+          appendTsSuffixTo: [/\.vue$/],
+        },
+        exclude: /node_modules/,
+      },

何故か .vue を読み取ってくれなかったので、 vue2 時代の shims-vue.d.ts を移植。

client/shims-vue.d.ts

declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
}

もう一度動作確認。

$ yarn dev --open

css を読めるようにする

現在 script しか読めないので、 style も読めるようにする。
とりあえず css だけ読めるようにするが、scss なり sass なり好きに構築すると良い。

$ yarn add -D vue-style-loader css-loader

webpack.config.js に css の記載を追加。

$ git diff -U0 ./webpack.config.js
diff --git a/client/webpack.config.js b/client/webpack.config.js
index 0132d47..f06fc85 100644
--- a/client/webpack.config.js
+++ b/client/webpack.config.js
@@ -26,0 +27,7 @@ module.exports = {
+      {
+        test: /\.css$/,
+        use: [
+          'vue-style-loader',
+          'css-loader',
+        ],
+      },

App.ts に適当に css を追加する。

$ git diff -U0 ./src/App.vue
diff --git a/client/src/App.vue b/client/src/App.vue
index f9cbd37..70a3597 100644
--- a/client/src/App.vue
+++ b/client/src/App.vue
@@ -2 +2 @@
-  <div>{{ message }}</div>
+  <div class="red">{{ message }}</div>
@@ -7,0 +8,6 @@ const message = 'Hello Vue!'
+
+<style scoped>
+.red {
+  color: red;
+}
+</style>

TS7006: Parameter 'n' implicitly has an 'any' type.

なんか scoped 周りでバグがあるらしい。

"vue-loader": "16.5" に戻しても改善しなかったので、仕方なく any を許可。。。
治っていたら必要ない処置。

$ git diff -U0 ./tsconfig.json
diff --git a/client/tsconfig.json b/client/tsconfig.json
index 09a3be8..468ed9b 100644
--- a/client/tsconfig.json
+++ b/client/tsconfig.json
@@ -7 +7,2 @@
-    "moduleResolution": "node"
+    "moduleResolution": "node",
+    "noImplicitAny": false

こんな漢字になれば神。

neu と vue の接続

一度ビルドしないと正しく反映できないので、しておく。

$ yarn build

neutralino.config.json を更新する

$ cd ../
$rm -r ./www

$neu update

$ neu update をすると設定に応じて必要なファイルがDL->配置される。
便利。更新もこのコマンドだけ。

neu と vue の接続

まず webpack の構成を変更する。

$ yarn remove html-webpack-plugin

$ yarn add -D copy-webpack-plugin

$ git diff -U0 ./webpack.config.js
diff --git a/client/webpack.config.js b/client/webpack.config.js
index f06fc85..e998e80 100644
--- a/client/webpack.config.js
+++ b/client/webpack.config.js
@@ -2 +2 @@ const path = require('path')
-const HTMLWebpackPlugin = require('html-webpack-plugin')
+const CopyPlugin = require('copy-webpack-plugin')
@@ -8 +8 @@ module.exports = {
-    index: path.join(__dirname, 'src', 'main.ts'),
+    bundle: path.join(__dirname, 'src', 'main.ts'),
@@ -11 +11,3 @@ module.exports = {
-    filename: 'assets/js/[name]-[chunkhash].js',
+    path: path.join(__dirname, 'dist'),
+    filename: '[name].js',
+    clean: true,
@@ -37,4 +38,0 @@ module.exports = {
-    new HTMLWebpackPlugin({
-      template: path.resolve(__dirname, 'public', 'index.html'),
-      inject: 'head',
-    }),
@@ -41,0 +40,8 @@ module.exports = {
+    new CopyPlugin({
+      patterns: [
+        {
+          from: path.join(__dirname, 'public'),
+          to: path.join(__dirname, 'dist'),
+        },
+      ],
+    }),

neutralino.config.json をこのプロジェクトに合わせる。

$ git diff -U0 ./neutralino.config.json
diff --git a/neutralino.config.json b/neutralino.config.json
index 89cecf2..6372a08 100644
--- a/neutralino.config.json
+++ b/neutralino.config.json
@@ -5 +5 @@
-  "documentRoot": "/www/",
+  "documentRoot": "/client/dist/",
@@ -10 +10,2 @@
-    "app.*"
+    "app.*",
+    "extensions.*"
@@ -19 +20 @@
-      "icon": "/www/icon.png"
+      "icon": "/client/dist/favicon.ico"
@@ -24 +25 @@
-    "resourcesPath": "/www/",
+    "resourcesPath": "/client/dist/",
@@ -26 +27,5 @@
-    "clientLibrary": "/www/neutralino.js",
+    "clientLibrary": "/client/public/neutralino.js",
+    "frontendLibrary": {
+      "patchFile": "/client/dist/index.html",
+      "devUrl": "http://localhost:8080"
+    },

neu のファイルをDLする。

$ neu update

一度ビルドしないと正しく反映できないので、しておく。

$ cd ./client
$ yarn build

最後に元々あったテンプレを削除する。

$ cd ../
$ rm -r ./www

起動

まずルートディレクトリで neu を起動する。

$ neu run -- --window-enable-inspector --frontend-lib-dev

もう一つコンソールを開いて webpack dev-server を開く。
その時、現在書かれているポート番号を指定する。

$ yarn dev --port 54677

これでリアルタイムで更新される。

script も変更する

package.json

  "scripts": {
    "dev": "cd ../ && neu run -- --window-enable-inspector --frontend-lib-dev",
    "serve": "webpack-dev-server",
    "build": "webpack --mode=production"
  },

F5 を押すと接続が確立する。

これは win 環の可能性が高いので、もし問題ないなら vue -> neu で起動すると良い。
また、途中の設定も windows のところを他に設定し直す必要がある。

file loader を導入する

$ yarn add -D file-loader

$ git diff -U0 ./webpack.config.js
diff --git a/client/webpack.config.js b/client/webpack.config.js
index e998e80..f73e602 100644
--- a/client/webpack.config.js
+++ b/client/webpack.config.js
@@ -35,0 +36,8 @@ module.exports = {
+      {
+        test: /\.(png|jpe?g|gif)$/i,
+        use: [
+          {
+            loader: 'file-loader',
+          },
+        ],
+      },

あー理解した watch オプションが無かったのが悪いのか


  devServer: {
    hot: true,
    devMiddleware: {
      writeToDisk: true,
    },
  },

良いねぇ～

この状態をとりあえず push
あとでテンプレとして切り出そう。

vue router 入れるよ

ui はこいつを採用してみる。

https://www.naiveui.com/en-US/light

date-fns を採用してるっぽい

最小化状態ではsetTimeoutの処理が走らない
(正確にはcomputedの処理か？）

開いたときにまとめて実行された

serverに任せる必要がある

やっとできたぁ～
node-notifierは相対バスでビルドしないといけないんだけど、
ビルド時のnode_modules位置で記録されてるから、起動コマンドに注意する必要があった

neutralino の ws
ホストが localhost だとipv6変換されて死。
鯖はv4しか受け付けてないっぽいんで、127.0.0.1 or 0.0.0.0が丸い

notify は await Neutralino.os.showNotification が使える。
しかし、クリックイベントを取ったりはできないので、状況に応じて

あ、常駐アプリ作れない...
majika
一旦フリーズ。。

このスクラップは2022/03/19にクローズされました