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

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

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

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

Node.js

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

MacOS(OSX)

MacOSとは、Appleの開発していたGUI(グラフィカルユーザーインターフェース)を採用したオペレーションシステム(OS)です。Macintoshと共に、市場に出てGUIの普及に大きく貢献しました。

Q&A

解決済

1回答

1226閲覧

Erectronでモジュールを読み込めない

yuuyu

総合スコア1139

Electron

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

Node.js

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

MacOS(OSX)

MacOSとは、Appleの開発していたGUI(グラフィカルユーザーインターフェース)を採用したオペレーションシステム(OS)です。Macintoshと共に、市場に出てGUIの普及に大きく貢献しました。

0グッド

0クリップ

投稿2020/02/09 07:45

編集2020/02/09 12:20

Erectron初心者で申し訳ないのですが、初期でつまづいてしまったので質問です。

npm install electron-store --save-dev
にて、electron-storeをダウンロードし、
node build-mac
でパッケージ化させたのですが、
requireでelectron-storeが読み込めないのです。
どのようにすれば読み込めるようになるのでしょうか?

###ファイル構成

main

1├build-mac.js 2├node_modules 3├package-lock.json 4├package.json 5├index.html 6└main.js

###コード
main/build-mac.js

js

1const builder = require('electron-builder'); 2const store = require('electron-store'); 3 4builder.build({ 5 config: { 6 'appId': 'com.exam.title', //例示用に書き換えています 7 'mac':{ 8 'target': 'zip', 9 } 10 } 11});

main/index.html

html

1<html> 2<head> 3 <meta charset="UTF-8"> 4 <title>Hello World!</title> 5</head> 6 7<body> 8 <h1>初めてのElectron</h1> 9 We are using node <script>document.write(process.versions.node)</script>, 10 Chrome <script>document.write(process.versions.chrome)</script>, 11 and Electron <script>document.write(process.versions.electron)</script>.<br /> 12<br /> 13<script> 14const Store = require('electron-store'); //エラーはここ。 15const store = new Store(); 16store.set({ 17 foo: { 18 bar: { 19 foobar: '????' 20 } 21 } 22}); 23console.log(store.get('foo.bar.foobar')); 24</script> 25</body> 26</html>

main/main.js

js

1// アプリケーション作成用のモジュールを読み込み 2const {app, BrowserWindow} = require('electron'); 3 4// メインウィンドウ 5let mainWindow; 6 7function createWindow() { 8 // メインウィンドウを作成します 9 mainWindow = new BrowserWindow({ 10 webPreferences: { 11 nodeIntegration: true, 12 }, 13 width: 800, height: 600, 14 }); 15 16 // メインウィンドウに表示するURLを指定します 17 // (今回はmain.jsと同じディレクトリのindex.html) 18 mainWindow.loadFile('index.html'); 19 20 // デベロッパーツールの起動 21 mainWindow.webContents.openDevTools(); 22 23 // メインウィンドウが閉じられたときの処理 24 mainWindow.on('closed', () => { 25 mainWindow = null; 26 }); 27} 28 29// 初期化が完了した時の処理 30app.on('ready', createWindow); 31 32// 全てのウィンドウが閉じたときの処理 33app.on('window-all-closed', () => { 34 // macOSのとき以外はアプリケーションを終了させます 35 if (process.platform !== 'darwin') { 36 app.quit(); 37 } 38}); 39// アプリケーションがアクティブになった時の処理(Macだと、Dockがクリックされた時) 40app.on('activate', () => { 41 // メインウィンドウが消えている場合は再度メインウィンドウを作成する 42 if (mainWindow === null) { 43 createWindow(); 44 } 45});

main/package.json

json

1{ 2 "name": "title", 3 "version": "1.0.0", 4 "description": "", 5 "main": "main.js", 6 "scripts": { 7 "test": "echo \"Error: no test specified\" && exit 1" 8 }, 9 "keywords": [], 10 "author": "", 11 "license": "ISC", 12 "devDependencies": { 13 "electron": "^8.0.0", 14 "electron-builder": "^22.3.2", 15 "electron-store": "^5.1.0" 16 }, 17 "dependencies": {} 18} 19

基本的にチュートリアルほぼそのままです。
index.htmlの//エラーはここ
のラインで、パッケージ化したものはエラーが返ります。
ちなみにパッケージ化せず、npx electron srcで実行した際は普通に読み込んでくれているようです。

###その他
Mac os 10.15.2(catalina)
npx -v => 6.13.4

ちなみにnpm root -g だと/usr/local/lib/node_modulesが返り、
npm rootだと/Users/(中略)/main/node_modulesが返ります。

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

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

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

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

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

guest

回答1

0

自己解決

https://qiita.com/PaSeRi/items/d6a68f0d60b38cf6dff2

web検索にて見つけることができました。

投稿2020/02/09 12:35

yuuyu

総合スコア1139

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問