質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Electron

Electronは、HTML5とNode.jsというWebの技術を用いてデスクトップアプリケーションを作成できるクロスプラットフォームな実行環境です。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

Q&A

0回答

633閲覧

keytar を browserify + electron で使えるようにしたい

yarln

総合スコア0

Electron

Electronは、HTML5とNode.jsというWebの技術を用いてデスクトップアプリケーションを作成できるクロスプラットフォームな実行環境です。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

0グッド

0クリップ

投稿2021/08/04 09:12

前提・実現したいこと

browserify で externals 指定した keytar モジュールを、 electron-packager でパッケージで含まれるようにしたい。

発生している問題・エラーメッセージ

node-keytar は node のネイティブモジュールを含むライブラリです。

そのため、keytar を require するコードを browserify で処理できません。

ですから、

browserify dist -x keytar

のようにして、 keytar を externals で扱っているのですが、この場合に electron-packager でパッケージングすると、keytar がパッケージングされず、

Error: Cannot find module 'keytar'

のようなエラーが発生してしまいます。

これを解決したいです。

該当のソースコード

  • src/main にメインプロセス、 src/render にレンダープロセス
  • npm run build でビルドし dist へ成果物を出力
  • npm run package でパッケージングし、 release へアプリケーションを出力

ディレクトリツリー

├── dist/ ├── package.json ├── release/ └── src/ ├── main/ │ └── index.js └── renderer/ └── index.js

package.json

package.json

1{ 2 "name": "sample", 3 "version": "1.0.0", 4 "description": "", 5 "main": "main/bundle.js", 6 "devDependencies": { 7 "browserify": "^16.1.1", 8 "electron": "^13.0.0", 9 "electron-packager": "^15.3.0", 10 "electron-rebuild": "^2.3.5", 11 "keytar": "^7.7.0" 12 }, 13 "scripts": { 14 "build": "npm run build:main && npm run build:render && cp package.json dist", 15 "browserify": "browserify -x electron -x keytar", 16 "build:main": "npm run browserify -- -e src/main/index.js -o dist/main/bundle.js", 17 "build:render": "npm run browserify -- -e src/render/index.js -o dist/render/bundle.js", 18 "package": "electron-packager dist --out=release" 19 }, 20 "author": "" 21}

src/main/index.js

src/main/index.js

1const keytar = require('keytar')

再現手順

npm run build && npm run package

にて release 内にビルドされる sample.app を起動すると

Error: Cannot find module 'keytar'

試したこと

dist 内に node_modules/keytar をコピーし、 dist/main/bundle.js

const keytar = require('keytar')

を直接

const keytar = require('node_modules/keytar/lib/keytar')

このように書き換えたところ、keytar自体は動くのですが、コンパイル元 src/main/index.jsnode_modules/keytar/lib/keytar とすると、 browserify-x keytar が使えなかったり、階層の違うファイルで扱いづらいので、もう少し良い方法が知りたいです。

補足情報(FW/ツールのバージョンなど)

  • Mac OS 11

その他

  • 質問のために最小環境を示していますが、実際のプロジェクトははもう少し複雑度が高いです。
  • webpack もごく基本的な使い方はわかるのですが、苦手意識があり、実プロジェクトで browserify => webpack 移管はコストが重いと感じているため、できれば browserify で解決する方法が知りたいです。
  • もし webpack での解決を提示して頂ける場合は、コード片だけでなく、利用したオプションに対する説明を書いていただけると助かります。(上記環境で動作するコードであるとよりありがたいです。)

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問