

electron reactにてwebpackでソースのビルドが成功しているのに何も表示されない  
いろいろ調べたりして直したのですがどこが間違っているのかどんどんわからなくなってきました  
参考資料として「ソシム株式会社 いまどきJSプログラマーのための Node.jsとReactアプリケーション開発テクニック」を読んでます

[![画像の説明をここに入力](https://i.stack.imgur.com/KV2WA.png)](https://i.stack.imgur.com/KV2WA.png)

* * *

## main.js

[code]

    const electron = require("electron");
    const path = require("path");
    const url = require("url");
    
    const app = electron.app;
    const BrowserWindow = electron.BrowserWindow;
    
    // Electronのライフサイクルを定義
    // メインウィンドウを表す変数
    let mainWindow;
    app.on("ready", createWindow);
    app.on("window-all-closed", () => {
      if (process.platform !== "darwin") app.quit();
    });
    app.on("activate", () => {
      if (mainWindow === null) createWindow();
    });
    
    // ウィンドウを作成してコンテンツを読み込む
    function createWindow() {
      mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        //webPreferences: { nodeIntegration: false },
      });
      // 読み込むコンテンツを指定
      mainWindow.loadURL(
        url.format({
          pathname: path.join(__dirname, "index.html"),
          protocol: "file",
          slashes: true,
        })
      );
      // ウィンドウが閉じる時の処理
      mainWindow.on("closed", () => {
        mainWindow = null;
      });
    }
    
[/code]

## index.js

[code]

    import React, { Component } from "react";
    import ReactDOM from "react-dom";
    const { clipboard } = require("electron");
    
    // コンポーネントを定義
    export default class App extends Component {
      constructor(props) {
        super(props);
        // 状態の初期化
        this.state = {
          text: "",
          isActive: false,
          zen2han: true,
        };
        // クリップボード監視用のタイマーをセット
        setInterval((e) => this.tick(), 1000);
      }
      // 全角英数を半角英数に変換する
      convToHalfWidth(str) {
        const s2 = str.replace(/[!-~]/g, (e) => {
          return String.fromCharCode(e.charCodeAt(0) - 0xfee0);
        });
        return s2;
      }
    
      tick() {
        if (!this.state.isActive) return;
        const clip = clipboard.readText();
        let clip2 = clip;
        if (this.state.zen2han) {
          clip2 = this.convToHalfWidth(clip);
        }
        if (clip !== clip2) {
          clipboard.writeText(clip2);
        }
        this.setState({ text: clip });
      }
    
      changeState(e) {
        const name = e.target.name;
        this.setState({ [name]: !this.state[name] });
      }
    
      render() {
        const taStyle = {
          width: "100%",
          height: "300px",
          backgroundColor: "F4F4F4",
        };
        return (
          <div className="window">
            <div className="window-content">
              <div className="pane-group">
                <div className="pane-sm sidebar">
                  <div>
                    <ul className="list-group">
                      <li className="list-group-item">
                        <label>
                          <input
                            type="checkbox"
                            checked={this.state.isActive}
                            name="isActive"
                            onChange={(e) => this.changeState(e)}
                          />
                          監視を有効に
                        </label>
                      </li>
                      <li className="liat-group-item">
                        <label>
                          <input
                            type="checkbox"
                            checked={this.state.zen2han}
                            name="zen2han"
                            onChange={(e) => this.changeState(e)}
                          />
                          全角英数を半角に
                        </label>
                      </li>
                    </ul>
                  </div>
                </div>
                <div className="pane">
                  <div className="padded-more">
                    クリップボード：
                    <br />
                    <textarea style={taStyle} value={this.state.text} />
                  </div>
                </div>
              </div>
            </div>
          </div>
        );
      }
    }
    
    // domの書き換え
    ReactDOM.render(<App />, document.getElementById("root"));
    
[/code]

## index.html

[code]

    <html>
    
    <head>
        <meta charset="UTF-8" />
        <title>electron_fmt</title>
        <link rel="stylesheet" href="node_modules/photon/dist/css/photon.css" />
    </head>
    
    <body>
        <div id="root"></div>
        <script src="out/bundle.js"></script>
    </body>
    
    </html> 
    
[/code]

## webpack.config.js

[code]

    var webpack = require("webpack");
    var path = require("path");
    var fs = require("fs");
    var react = require("react");
    var ReactDOM = require("react-dom");
    
    var nodeModules = {};
    fs.readdirSync("node_modules")
      .filter(function (x) {
        return [".bin"].indexOf(x) === -1;
      })
      .forEach(function (mod) {
        nodeModules[mod] = "commonjs " + mod;
      });
    
    module.exports = {
      // モード値を production に設定すると最適化された状態で、
      // development に設定するとソースマップ有効でJSファイルが出力される
      mode: "production",
    
      // メインとなるJavaScriptファイル（エントリーポイント）
      entry: "./src/index.js",
      target: "electron-main",
      // ファイルの出力設定
      output: {
        //  出力ファイルのディレクトリ名
        path: `${__dirname}/out`,
        // 出力ファイル名
        filename: "bundle.js",
      },
      module: {
        rules: [
          {
            // 拡張子 .js の場合
            test: /\.js$/,
            use: [
              {
                // Babel を利用する
                loader: "babel-loader",
                // Babel のオプションを指定する
                options: {
                  presets: [
                    // プリセットを指定することで、ES2020 を ES5 に変換
                    "@babel/preset-env",
                    // React の JSX を解釈
                    "@babel/react",
                  ],
                },
              },
            ],
          },
        ],
      },
      //externals: nodeModules,
    };
    
[/code]

## package.json

[code]

        "name": "electron_fmt",
        "version": "1.0.0",
        "description": "",
        "main": "main.js",
        "scripts": {
            "test": "echo \"Error: no test specified\" && exit 1",
            "start": "electron .",
            "build": "webpack"
        },
        "keywords": [],
        "author": "",
        "license": "ISC",
        "dependencies": {
            "@types/react-dom": "^16.9.8"
        },
        "devDependencies": {
            "@babel/core": "^7.11.0",
            "@babel/preset-env": "^7.11.0",
            "@babel/preset-react": "^7.10.4",
            "babel-core": "^6.26.3",
            "babel-loader": "^8.1.0",
            "babel-preset-es2015": "^6.24.1",
            "babel-preset-react": "^6.24.1",
            "electron": "^9.1.2",
            "fs": "0.0.1-security",
            "photon": "git+https://github.com/connors/photon.git",
            "react": "^16.13.1",
            "react-dom": "^16.13.1",
            "webpack": "^4.44.1",
            "webpack-cli": "^3.3.12"
        }
    }
    
[/code]


CC BY-SA 4.0
2020-08-05T17:17:35.620
69284
2022-08-04T00:04:05.327
2020-08-12T05:52:26.993
3060
41393
question
node.js reactjs webpack electron babeljs
electronにてwebpackでソースのビルドが成功しているのに何も表示されない


この本、持ってます。何ページのものですか？

require が定義されていない、というエラー表示が出ているみたいなので  
何かビルド設定が間違っているのかも。

* * *

追記です。本の著者さんの記事が出ていました。

ちょうどエレクトロンのところですので、こちらで動かされるとよいと思います。

<https://news.mynavi.jp/article/zerojavascript-6/>


CC BY-SA 4.0
2020-08-12T06:10:39.153
69472
2020-09-07T09:42:13.437
2020-09-07T09:42:13.437
3060
21047
69284
answer