自己紹介
じゅんじゅんというニックネームで、関西を拠点に活動しているフロントエンドエンジニアです。
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
があります。
この2つは、webpackで 1つのファイルへまとめあげないよ! という指定になります。
このままでは、fs
やelectron
は読み込むことができません。
ここで読み込まない代わりにこっちからよみます!と指定するのがlibraryTarget
です。
libraryTargetで読み込む方式を指定
*1
のlibraryTarget
は、さっきのexternals
で回避をした分これで読み込みます!と指定する部分です。
今回は、commonjs2形式で読んであげたいので
libraryTarget: 'commonjs2'
とします。
これで、jsxからでもimport fs from "fs"
を使うことができます。
詳しくは公式ドキュメントをご覧ください!
最後に
HTMLとCSSとJavaScriptでデスクトップアプリを作れるElectronで、じゃんじゃんファイル操作やコマンドラインの操作もしていきましょう!
Twitter -> @konojunya