[ Electron + React ] webpackするときの注意

自己紹介

じゅんじゅんというニックネームで、関西を拠点に活動しているフロントエンドエンジニアです。

HAL大阪の2回生です👍 (2016.10.8現在)

よくstart up系イベントに行くので、大阪らへんの方は会いましょう！

前回の...

前回同じような形で[ Electron + React ] 5分で作るMarkdown Editorという記事を書いたんですが、この最後に

今後はexport機能とかをつけようと思います。

と、自分で書いています。

ではなぜこの開発の時はファイル保存ができなかったか。

この記事の時の開発方法は、

"main": "app.js",
"scripts": {
  "start": "watchify -v -t babelify javascripts/app.js -o javascripts/bundle.js"
},

と書いて、タスクを回し続けていましたがこれでは少し設定が足りませんでした。

なので、webpackを使い開発する方法に変えています。

理由としては、electronのモジュール環境がwebとnode.jsがごちゃまぜになってしまうのを防ぐための設定を書かないといけないからです。

jsxからfsが呼べない...

さて、ファイル保存をしようと思った時にまずファイル書き出しができていなかったら話になりません。

しかし、jsxからfsをrequireしても使えません。

こういう場合はcommonjs2で呼び出してあげるという方法になります。

では、この読み込まないようにする設定externalsと、それをどう読むのかを設定するlibraryTargetのお話になってきます。

webpackの設定をするヨ

今回のwebpack.config.jsの全貌は

var path = require('path');

module.exports = {
    entry: "./javascripts/app.js", // どのjsファイルをルートにするか
    output: {
        path: __dirname + "/javascripts", // ファイルパス
        filename: "bundle.js", // ファイル名
        libraryTarget: 'commonjs2', // モジュールを呼ぶための方式を指定*1
    },
    module: {
        loaders: [ // loaderをカキカキ...
            {
                test: /\.jsx?$/,
                loader: "babel-loader",
                exclude: "/node_modules/",
                query: {
                    presets: ["es2015","react"] // es2015とreact使うよと...
                }
            }
        ]
    },
    externals: [ // こいつらは一つにしません！*2
      'electron',
      'fs'
    ],
    debug: true
};

この*1,*2としている部分をこれから説明していきます。

externalsで読み込まないファイルを指定

まず*2のexternalsと書いている部分。

今回は、electronとfsがあります。

この２つは、webpackで １つのファイルへまとめあげないよ！ という指定になります。

このままでは、fsやelectronは読み込むことができません。

ここで読み込まない代わりにこっちからよみます！と指定するのがlibraryTargetです。

libraryTargetで読み込む方式を指定

*1のlibraryTargetは、さっきのexternalsで回避をした分これで読み込みます！と指定する部分です。

今回は、commonjs2形式で読んであげたいので

libraryTarget: 'commonjs2'

とします。

これで、jsxからでもimport fs from "fs"を使うことができます。

詳しくは公式ドキュメントをご覧ください！

最後に

HTMLとCSSとJavaScriptでデスクトップアプリを作れるElectronで、じゃんじゃんファイル操作やコマンドラインの操作もしていきましょう！

Twitter -> @konojunya