前書き

前回作成したReactのプロジェクトをElectron化する。という記事にて
Reactをデスクトップで動かす方法を記述しましたが....
その後、パッケージ化した際にテストでは行けたのにパッケージ化すると
Not Allowed Local File等の、HTMLが呼べず起動しないエラーになってしまったため、
全体的なリプレイスと、パッケージ化できる部分までを記述致します。

前回の失敗

正直、詳しい原因はわかりませんが
electronの実行コマンドを短くするために作成したindex.js
その存在が問題だったようです・・・(?)

そもそも、electronの実行コマンドはpackage.jsonのmainに書かれているjsを呼び出すので（当然といえば当然か...)
そこにビルド後のものを書けば済む話でした。

上記を直すため、前回のpackage.jsonを修正しました。

package.json

...
  "main": "./dist/js/electron/index.js",
  "scripts": {
    "start": "electron .",
    "build": "webpack --config webpack.config.js -p --color"
  }
...

mainの部分が、前は直下のrequireするだけのindex.jsを指定していましたが
修正では、中身をビルド後のElectron実行jsを指定するように修正しました。
requireのindexくんは削除しました。

とりあえずは、上記でパッケージ化は出来そうです。
以上で、この記事のタイトルに関する記述は終わりです。

ですが、webpack.config.jsをさらに簡略化出来ましたので
そこの解説と、CSSを読み込めるようにした対応を記述していきます。
以降の記述は、自分の気になった部分の改修の解説になります。

ビルド後ディレクトリ

ビルド後のディレクトリを前回からわかりやすさのため変更しました。
以降から記述するwebpackのディレクトリは新しいディレクトリになりますので、ご確認をよろしくお願いします。

前回のビルド後ディレクトリ

build/
　├ electron/
　│　└ index.js
　├ react/
　│　└ index.html
　│　└ index.js

今回のビルド後ディレクトリ

dist/
　├ js/
　│　└ electron/
　│　  └ index.js
　│　└ react/
　│　  └ index.js
　├　　index.html

Webpackの設定

前回から修正し、以下のwebpack.config.jsを作成しました。

webpack.config.js

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: {
    'electron/index': './src/electron/main.js',
    'react/index': './src/react/index.js',
  },
  output: {
    filename: 'dist/js/[name].js',
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: [
            'es2015',
            'react',
          ],
        },
      },
      {
        test: /\.css$/,
        loader: 'style-loader!css-loader',
      },
    ],
  },
  resolve: {
    extensions: ['*', '.js', '.jsx'],
  },
  target: 'electron',
  node: {
    __dirname: false,
    __filename: false,
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      filename: path.join(__dirname, 'dist/', 'index.html'),
      inject: false,
    }),
  ],
}

前回は、moduleのエクスポートが配列にしていましたが
今回では一本化しました。
では、要所要所解説してゆきます。
前回と違うのは二箇所になります。

Electron,Reactの設定

webpack.config.js

...
  entry: {
    'electron/index': './src/electron/main.js',
    'react/index': './src/react/index.js',
  },
  output: {
    filename: 'dist/js/[name].js',
  },
...

前回、ElectronのjsとReactのjsで設定が別れていましたが、この部分で一つにしました。
outputの[name]の部分は、entryのキー名('electron/index'の部分)で置きかわります。

src直下にあるelectronフォルダのElectron実行ファイルであるmain.js(前回のindex.jsから区別のため名前を変えました。)を
プロジェクトルートのdist/js/electron/index.jsへ配置
src直下にあるreactフォルダのindex.jsを
プロジェクトルートのdist/js/react/index.jsへ配置

以上の設定内容になります。

Loaderの設定

webpack.config.js

...
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: [
            'es2015',
            'react',
          ],
        },
      },
      {
        test: /\.css$/,
        loader: 'style-loader!css-loader',
      },
    ],
  },
...

ここでは、loaderを使ってjsxのコンパイルとcssの読み込みを行なっています。
前回ではcssを読んでいなかったので、追加になります。

Renderの修正

webpackの修正に加え、htmlも変更がありますので記述します。
以下のhtmlを作成しました。

index.html

<!-- ./src/index.html -->
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <!-- Semantic -->
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css"></link>
    <title>React Todo</title>
  </head>
  <body>
    <div id="root"></div>
    <script>require("./js/react/index.js")</script>
  </body>
</html>

変更点は二箇所です。

ディレクトリをreact直下からsrc直下へ変更(そのため、webpackのhtmlPluginのディレクトリも変えています)
htmlへ吐き出すjsのディレクトリ指定を変更

1番に関しては、ビルドディレクトリをjsで分けたため、ただの好みです。
前回同様、electronフォルダとreactフォルダで別れる場合はreactフォルダの中で問題ありません。

2番は、前回同様ですが、ビルド後のディレクトリに変更があったのでその対応です。

パッケージ化

パッケージ化には、electron-packagerというライブラリを利用するため
あらかじめインストールしておきましょう！

npm install electron-packager@latest -g

インストールが完了したら、以下のコマンドでパッケージ化が可能です。

electron-packager ./ ReactTodo --overwrite --platform=darwin,win32 --arch=x64 --electron-version

長い(笑)

本来は、--outdirというオプションでパッケージ化したものの出力先を決めるのですが、今回は決めていないため、デフォルトでカレントディレクトリに出力されるようにします。

この、electron-packagerについては、まだ色々と調べたい部分があるので
次回の記事にまとめたいと思います。

以上のコマンドを実行することで、パッケージ化ができ、カレントディレクトリにReactTodoでMacとWindows用のアプリが出力されます。

以上になります。

後書き

前回の直下に作ったindex.jsの所為で詰んでしまったという記事でした。
それが解消できてからはとても簡単で、ビルド後のディレクトリも
まだまだ改修して、ベストプラクティスを見つけたいと思います。

次回では、electron-packagerのチートシートをまとめればなぁと思います。

Electron化したReactのプロジェクトをパッケージ化する。

前書き

前回の失敗

ビルド後ディレクトリ

前回のビルド後ディレクトリ

今回のビルド後ディレクトリ

Webpackの設定

Electron,Reactの設定

Loaderの設定

Renderの修正

パッケージ化

後書き