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

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

ただいまの
回答率

90.51%

  • JavaScript

    20348questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • Node.js

    2354questions

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

  • React.js

    1110questions

    Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

  • webpack

    321questions

  • Electron

    236questions

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

webpack2 + ejsでビルドをした時に出るwarningを消して、Electronアプリを作りたい

受付中

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,056

chieeeeno

score 205

発生している問題

webpack2 + ejsのパッケージを使ったコードをビルドした時に下記のようなWARNINGが発生していました。
そのWARNINGが直接の原因かわかりませんが、 
Electronで上記のwebpackで変換したコードをpackage化したアプリを実行した時に以下のようなエラーになってしまいます
イメージ説明

エラーメッセージ

WARNING in ./~/ejs/lib/ejs.js
require.extensions is not supported by webpack. Use a loader instead.
 @ ./src/main/fileGenerater.js 11:11-25
 @ ./src/main/index.js

該当のソースコード(fileGenerater.js)

import fs from 'fs';
import ejs from 'ejs';
import pretty from 'pretty';


/**
 * ファイル生成を行う
 * @param {Object} ファイルデータ
 */
function fileGenerater(param){
  return new Promise(function(resolve, reject){
    console.log( 'fileGenerater' );
    let _htmlStr = '';

    let templatePath = param.filePath;
    let deployDirPath = param.deployDirPath;
    let jsonFilePath = param.jsonFilePath;
    let siteData;

    fs.readFile(jsonFilePath, 'utf8', function(err, jsonData){
      if (err) {
        reject(err);
        return;
      }
      siteData = JSON.parse(jsonData);
      fs.readFile(templatePath, 'utf8', function(err, templateData){
        if (err) {
          reject(err);
          return;
        }
        siteData.forEach(function(_data) {
          _htmlStr = ejs.render(
            templateData,
            _data,
            { filename:'File'+_data.id }
          );
          fs.writeFile(`${deployDirPath}/${_data.id}.html`, pretty(_htmlStr));
        });
        resolve();
      });
    });
  });
}

export default fileGenerater;

webpack.config.js

module.exports = {
  target: "electron",
  node: {
    __dirname: false,
    __filename: false
  },
  resolve: {
    extensions: [".js", ".jsx"]
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: "babel-loader"
      }
    ]
  },
  entry: {
    "main/index": "./src/main/index.js",
    "renderer/app": "./src/renderer/app.jsx"
  },
  output: {
    filename: "dist/js/[name].js"
  }
};

実現したいこと

  1. 上記のWARNINGを消したい。
  2. ビルドを成功させ、Electronアプリを実行できる形にしたい

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

package.jsonは以下のような記述をしております。
「package-mac」及び、「package」のコマンドを実行した時に上記のような現象がおこります。
「package-win」のコマンドは現在手元にWindows環境が無いため実行はしておりません。

{
  "name": "electron_chat",
  "version": "1.0.0",
  "description": "",
  "main": ".tmp/main/index.js",
  "scripts": {
    "clean": "rimraf .tmp dist release",
    "test": "eslint src/**/*.js src/**/*.jsx",
    "compile": "babel --out-dir .tmp src",
    "watch": "babel --watch --out-dir .tmp src",
    "start": "electron .",
    "copy:resources": "cpx \"prod_resources/**/*\" dist",
    "copy:photon": "cpx \"node_modules/photon/dist/css/**/*\" dist/css && cpx \"node_modules/photon/dist/fonts/**/*\" dist/fonts",
    "prebundle": "npm run copy:resources && npm run copy:photon",
    "bundle": "webpack",
    "package": "npm run bundle && electron-packager dist \"Electron Chat\" --all --out=release --icon=\"icon/icon\"",
    "package-win": "npm run bundle && electron-packager dist \"Electron Chat\" pratform=win32 --arch=all --out=release --icon=\"icon/icon\"",
    "package-mac": "npm run bundle && electron-packager dist \"Electron Chat\" pratform=darwin --arch=all --out=release --icon=\"icon/icon\""
  },
  "keywords": [],
  "author": "",
  "license": "MIT",
  "dependencies": {
    "photon": "github:connors/photon",
    "react": "15.4.2",
    "react-dom": "15.4.2",
    "react-dropzone": "^3.12.3",
    "react-router": "3.0.0"
  },
  "devDependencies": {
    "babel-cli": "6.18.0",
    "babel-loader": "6.2.10",
    "babel-preset-es2015": "6.18.0",
    "babel-preset-react": "6.16.0",
    "cpx": "1.3.1",
    "ejs": "^2.5.6",
    "electron": "1.6.1",
    "electron-builder": "14.4.0",
    "electron-builder-squirrel-windows": "13.10.1",
    "electron-packager": "8.5.2",
    "eslint": "3.1.0",
    "eslint-plugin-import": "2.2.0",
    "eslint-plugin-react": "5.2.2",
    "fs": "^0.0.1-security",
    "pretty": "^1.0.0",
    "rimraf": "2.5.3",
    "webpack": "2.2.0"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/GH_USER_NAME/GH_REPO.git"
  },
  "build": {
    "appId": "io.github.GH_USER_NAME.GH_REPO",
    "win": {
      "icon": "icon/icon.ico",
      "target": [
        "squirrel"
      ]
    },
    "squirrelWindows": {
      "iconUrl": "https://github.com/GH_USER_NAME/GH_REPO/blob/master/icon/icon.ico?raw=true"
    },
    "mac": {
      "icon": "icon/icon.icns",
      "category": "public.app-category.social-networking"
    },
    "dmg": {
      "icon": "icon/icon.icns",
      "contents": [
        {
          "x": 130,
          "y": 220
        },
        {
          "x": 410,
          "y": 220,
          "type": "link",
          "path": "/Applications"
        }
      ]
    },
    "directories": {
      "app": "dist",
      "output": "release"
    }
  }
}
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

0

https://github.com/electron-userland/electron-packager/issues/264

dist/ の中にpackage.jsonがないのが原因です。

$ electron-packager dist

でdistの中身だけがアプリとしてバンドルされるので(Macをお使いでしたら、作成されたアプリで「パッケージの内容を表示」で確認できます)、起動時のmainの設定が読めなくなってしまっています。

そのため、

{
  "name": "electron_chat",
  "version": "1.0.0",
  "description": "",
  "main": "./index.js"
}


のような dist/package.json を npm run bundle 時に作ってやれば解決できるかと思います。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

同じタグがついた質問を見る

  • JavaScript

    20348questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • Node.js

    2354questions

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

  • React.js

    1110questions

    Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

  • webpack

    321questions

  • Electron

    236questions

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