electronでパッケージングして作成したアプリが動かない（エラー：Cannot find module）

Question

-------package.json修正しました、ディレクトリ構成図追加しました-------

electronでアプリケーションを作成しパッケージングを行ったのですが、パッケージングして作成されたexeファイルを開くと「Cannot find module」のエラーがでてアプリケーションが動かない状態になっています。
※Cannot find moduleのエラーは、コーディング中で使用しているモジュール「fs-extra」と「jquery」のふたつがエラーとして出ています。
エラーはデベロッパーツールで確認しています。

パッケージングには、npmで取得したelectron-packagerを使用しています。
使用コマンド：npm run pack:win（electron-packager ./src --platform=darwin,win32 --arch=x64　が実行される）

○環境
・os
windows10

・node：v10.14.0
・npm：6.4.1
・package.json↓

{
  "name": "img-upload",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build-sass": "node-sass -w --source-map true ./src/css/style.scss ./src/css/style.css",
    "start": "electron ./src",
    "pack:win": "build --win --x64"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "fs-extra": "^7.0.1",
    "jquery": "^3.3.1",
    "linq": "^3.1.1"
  },
  "devDependencies": {
    "electron": "^4.0.0",
    "electron-builder": "^20.38.4"
  },
  "build": {
    "appId": "com.example",
    "win": {
      "target": "nsis"
    },
    "directories": {
      "output": "dist"
    }
  }
}

○ディレクトリ構成図
assets
├win
└favicon.ico
└osx
└ImgUpload.icns
dist（ここにパッケージング後のデータを格納予定）
node_modules
└モジュールいろいろ
src
└index.js、package.jsonなど
package.json(説明書きしているjsonはこちらのファイルです。)
package-lock.json
yarn.lock

ローカルでnpm start コマンドで開いている時はエラーが発生せず、問題なく可動します。

fs-extra、jqueryのモジュールは元々ローカルインストールをしていましたが、
エラーが出たため試しにグローバルインストールを行ってみましたが結果は変わりませんでした。

私の調べた知識では、package.json内のdependenciesに記述しているモジュールは一緒にパッケージングされると思ったのですが、「fs-extra」と「jquery」のみCannot find moduleのエラーが発生してしまいます。。。

お力添えよろしくお願いします。

Answer 1

electron-packagerは、electron-builderにマージされていて、多分メンテされていないモジュールになっていると思います。（ごめんなさい、未確認です）

electron-builderで、パックも実行してくれるはずですので、

    "pack:win": "build --win --x64"

  "build": {
    "appId": "com.example",
    "win": {
      "target": "nsis"
    },
    "directories": {
      "output": "dist"
    }
  }

として、ビルド（npm run pack:win）してみてください。

Comments

[tama-]

ご回答ありがとうございます！
「electron-packagerは、electron-builderにマージ」の件初めて知りました、ありがとうございますm(_ _)m

electron-packagerとelectron-builderをアンイストールしてelectron-builderのみ再インストールし、教えていただいた形でpackage.jsonを修正しコマンド入力しましたところ、以下のエラーがでました。

「Error: Application entry file "index.js" in the "私のパス\ImgUpload\dist\win-unpacked\resources\app.asar" does not exist. Seems like a wrong configuration.」

index.jsは別途作成する必要があるのでしょうか。
※ルートディレクトリにはmain.jsが存在し、アプリケーション用のindex.jsはsrcディレクトリ内に存在する形です。

[tama-]

ディレクトリ構成図を追加しました！

[Meganezaru]

main.jsが、electron関係の実装にあたるのであれば、index.jsと記載されている部分（"main"）をmain.jsに書き換えれば良いはずです。もし、index.jsにelectron実装を含んでいるのであれば、src/index.jsで良いと思います。

現時点で、electronに対応するための実装がないようであれば、その部分の追加が必要です。

イメージとしては、electronのモジュールをロードして、
それを利用して、専用ブラウザを起動し、アプリの実体に関連づけるような感じです。

詳細は、一度調べてみてください。
わからない部分があれば、改めて、electronの実装に関する質問をされるのが良いと思います( ´ ▽ ` )

[tama-]

お返事遅れてしまい申し訳ありませんm(_ _)m

どうやら勘違いをしていたようで、今までrootディレクトリに必要なモジュールを置いていたこと、rootディレクトリのpackage.jsonを編集していたことが原因でしたm(_ _)m

自信で組んだプログラムが置いてあるsrcディレクトリに必要なモジュールを起き、package.jsonを編集したことでビルドができるようになりました！

この度はご助言ありがとうございました！！！！！