前提・実現したいこと
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.js
で node_modules/keytar/lib/keytar
とすると、 browserify
の -x keytar
が使えなかったり、階層の違うファイルで扱いづらいので、もう少し良い方法が知りたいです。
補足情報(FW/ツールのバージョンなど)
- Mac OS 11
その他
- 質問のために最小環境を示していますが、実際のプロジェクトははもう少し複雑度が高いです。
- webpack もごく基本的な使い方はわかるのですが、苦手意識があり、実プロジェクトで browserify => webpack 移管はコストが重いと感じているため、できれば browserify で解決する方法が知りたいです。
- もし webpack での解決を提示して頂ける場合は、コード片だけでなく、利用したオプションに対する説明を書いていただけると助かります。(上記環境で動作するコードであるとよりありがたいです。)
あなたの回答
tips
プレビュー