Electron と TypeScript と WebPack と Visual Stuido Code

Electron + TypeScript で開発を進めてきたのですが、import/export 周りがちゃんと使えないのがしんどくなってきたので、WebPack を導入してみました。

WebPack のインストール

以下のコマンドで OK です。

npm install --save-dev webpack webpack-cli ts-loader
npm install webpack -g

Error: Cannot find module 'typescript'

と出てしまうことがあったのですが、その場合は、コマンドプロンプトで、

npm install --save-dev typescript

としたら直りました。この辺、よくわかってないんですよね…

プロジェクトのディレクトリに、webpack.config.js を作ります。メインプロセス用のソースは、src/main 以下に、レンダラープロセス用のソースは src/renderer 以下に置き、出力はそれぞれ dist/main/main.js と dist/renderer/editor.js に出力する設定です。（こちらの記事を参考にさせていただきました。）

コード1: webpack.config.js

var path = require('path');
var main = {
    mode: 'development',
    target: 'electron-main',
    //メインプロセス用のソースコード
    entry: path.join(__dirname, 'src', 'main', 'main'),
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist', 'main')
    },
    node: {
        __dirname: false,
        __filename: false
    },
    module: {
        rules: [{
                test: /.ts?$/,
                include: [
                    path.resolve(__dirname, 'src'),
                ],
                exclude: [
                    path.resolve(__dirname, 'node_modules'),
                ],
                loader: 'ts-loader',
            }]
    },
    resolve: {
        extensions: ['.js', '.ts']
    },
    devtool:"source-map",
};
var renderer = {
    mode: 'development',
    target: 'electron-renderer',
    //レンダープロセス用のソースコード
    entry: path.join(__dirname, 'src', 'renderer', 'editor'),
    output: {
        filename: 'editor.js',
        path: path.resolve(__dirname, 'dist', 'renderer')
    },
    resolve: {
        extensions: ['.json', '.js', '.jsx', '.css', '.ts', '.tsx']
    },
    module: {
        rules: [{
                test: /\.(tsx|ts)$/,
                use: [
                    'ts-loader'
                ],
                include: [
                    path.resolve(__dirname, 'src'),
                    path.resolve(__dirname, 'node_modules'),
                ],
            }]
    },
    devtool:"source-map",
};
module.exports = [
    main, renderer
];

devtool:"source-map"

を設定しておくと、ソースマップが出力されるため、デバッガーでアタッチできるようになります。

tsconfig.json は以下のように編集しました。

コード2: tsconfig.json

{
    "compilerOptions": {
        "target": "es5",
        "moduleResolution": "node",
        "sourceMap": true,
        "outDir": "",
        "lib": [
            "dom",
            "es5",
            "scripthost",
            "es2015.promise",
            "es2015.collection"
        ],
    }
}

あとは、ターミナルから webpack のウォッチを起動しておきます。

 webpack --progress --colors --watch

export/import の書き方

複数のクラスをエクスポート

自作クラス（enum）をエクスポートするには、クラスの前に export とつけます。

export class SssEditorOwner {
// .....
}
export class SssEditorPanel {
// .....
}

このクラスをインポートしたい場合は、

import {SssEditorOwner, SssEditorPanel} from "./sseditorowenr";

とします。

一つだけエクスポート

もし、エクスポートしたいクラスが一つの場合は、

export default class SssEditorOwner {
// .....

として、

import SssEditorOwner from "./sseditorowenr";

でインポートできます。

定数をエクスポート

定数もやってみたらエクスポートできました。文字列テーブルなどに便利かもしれません。

export const TextResource =
{
    //アプリ
    "app-title" : "Sumire Script Studio",
    //ダイアログ
    "sumire-script-proj": "すみれスクリプトプロジェクト",
    "proj-save-dialog-titile": "プロジェクトの保存",
    "proj-open-dialog-titile": "プロジェクトを開く",

    //エクスプローラーボタン
    "ex-bt-add-file":"スクリプトファイルの追加",
   
}

インポートは以下の感じです。

import TextReader = require("./text-resource");
const TR = TextReader.TextResource;

これで、TR. とやると、コード補完も効いてくれます。

node や electron のモジュールをインポート

これまで通り、require を使っても問題ありませんでしたが、node.js のモジュールに関しては、

import * as Path from "path";
import * as FS from "fs";

とやっても行けました。Visual Studio Code でコード補完も効きました。

electron の方は、

import {ipcRenderer, dialog} from "electron";

という感じで、electron のモジュールがインポートできます。（ちなみに、dialog は remote 経由じゃないとダメっぽいので、これではエラーでした。）

まとめ

WebPack 、よく記事ではみかけたのですが、導入してみたのは初めてでした。便利ですね。この辺りも使いこなしつつ、自作言語の処理系を TypeScript に移そうと思います。