Carlo、vue-cli、pkgを使ってvueを使ったデスクトップアプリケーションを作る

先日Carloというjavascriptでデスクトップアプリが作れるライブラリがリリースされました。
https://qiita.com/Quramy/items/d38b26a7c0007e757353

これとvueを組み合わせてみました。

利用するnpm

vueのテンプレート作成
https://github.com/vuejs/vue-cli

node.jsのアプリケーションをデスクトップアプリに
https://github.com/GoogleChromeLabs/carlo

デスクトップアプリのパッケージ化
https://github.com/zeit/pkg

vue-cliのインストール

npm i -g @vue/cli
# OR
yarn global add @vue/cli

vue-cliを使ってvueのテンプレートを作る

設定値はお好みで。詳細な内容は以下を参考に
https://qiita.com/Junpei_Takagi/items/603d44f7885bd6519de2

carloのインストール

npm i carlo
# OR
yarn add carlo

作成されたvueのアプリケーションのrootディレクトリ配下に以下のindex.jsを配置

const carlo = require("carlo");

(async () => {
  // Launch the browser.
  const app = await carlo.launch();

  // Terminate Node.js process on app window closing.
  app.on("exit", () => process.exit());

  // Tell carlo where your web files are located.
  app.serveFolder(__dirname);

  // Expose 'env' function in the web environment.
  await app.exposeFunction("env", _ => process.env);

  app.serveFolder(__dirname + "/dist"); // vueアプリケーションがバンドルされるディレクトリを指定
  app.serveFolder(__dirname + "/node_modules", "node_modules");

  // Navigate to the main page of your app.
  await app.load("index.html");
})();

pkgをインストール

npm install -g pkg
# OR
yarn global add pkg

package.jsonにpkgの設定を追加

"bin": "index.js",
"pkg": {
  "scripts": ["dist/js/*.js"],
  "assets": ["dist/**/*"]
}

vueアプリをbuild

yarn build

アプリケーションをパッケージ化

pkg .

これでlinux、mac、win用の実行ファイルが作成されます。

<vue createで指定したアプリ名>-linux
<vue createで指定したアプリ名>-macos
<vue createで指定したアプリ名>-win.exe

私の手元で上記ファイルはだいたい30MB〜40MBなので、electronなどで作成されたアプリと比べればかなりサイズは小さいのではと思います。