[Electron] Hello World的なもの(3) パッケージングで作ったプロジェクトをベースにSqlite3を使うプロジェクトを作ってみる。

Sqlite3をインストールする。

npm install sqlite3 -S
npm install @types/sqlite3 -D

electron-rebuildをインストールする。

npm install electron-rebuild -D

electron-rebuildはネイティブコードを含むモジュールをElectronで使えるようにリビルドするツールだ。
インストール後、electron-rebuildを実行してリビルドする。

npx electron-rebuild -f

sqlite3を含めないようにwebpackの設定を変更する。次のようにexternalsを追加する。

  externals: {
    sqlite3: "commonjs sqlite3"
  }

これでとりあえず準備完了。

レンダラープロセスでsqlite3を使う。ここはアップロードしたソースを参照してくれ。

これで、

npm run build

でビルドして、

npm run start

で実行できる。

元のプロジェクトでは、ビルド後、実行するのに必要なファイルをdistフォルダに作られるようにしたが、sqlite3のモジュールがdistフォルダには用意されていないので、パッケージングするには、distフォルダにsqlite3のモジュールをインストールする必要がある。

src/package.jsonのdependenciesのsqlite3を追加する。
ビルド後、distフォルダでnpm installを実行してプロジェクトのフォルダでnpx electron-rebuild -f -m dist/を実行してモジュールをリビルする。

これでelectron-packagerでパッケージングする準備ができたので、electron-packagerでパッケージングする。

変更したソースをダウンロードできるようにしといた。

と、書いたところで、WindowsとLinuxも試しとかんと、と思いためてしてみると・・・
Windowsでうまいこといかん！
Windowsの場合は、管理者として実行したコマンドプロンプトでnpm install --global --production windows-build-toolsを実行し、windows-build-toolsをインストールすればいいらしいんだけど、うちのWindowsでは途中で止まっていつまでたっても(一晩待った)終わらなかった。そのうち調べて解決しないと・・・

あと、Windowsの場合って書いたけど、macOS、Linuxの場合もCコンパイラやPythonなんかが必要なんでインストールする必要がある。Pythonは標準で入ってそうだけど。

楽天Kobo

Electronではじめるアプリ開発 〜JavaScript/HTML/CSSでデスクトップアプリを作ろう【電子書籍】[ 野口将人 ] 価格：2894円 (2018/6/10時点)

ほー、今度試してみよー

[Node.js][TypeScript] プライベートなモジュールの共有でモジュールを作ってみたんだけど、これだとソースコードが1つのファイルにしないといけないことになってしまう・・・

普通は、クラスごととかにわけて複数ファイルで構成されているもんだろうから、それをやってみる。

例として、複数ファイルで構成されているモジュールをcommonという名前で作る。

commonディレクトリを作って、そこでnpm initを実行して、package.jsonを適当に作る。
このモジュールは公開しないので念のためprivateフィールドをtrueで追加する。TypeScriptの場合、typesフィールドを追加して、モジュールの型情報ファイルを指定する。

{
  "name": "common",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "types": "index.d.ts",
  "private": true,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

つぎにTypeScriptの準備。

tsc --initを実行して、tsconfig.jsonを作成する。tsconfig.jsoでdeclarationをtrueにするとtsc実行時に型情報ファイルも生成されるようになるので指定する。

複数のソースファイル、Hoge1.ts、Hoge2.tsを用意する。

Hoge1.ts

export class Hoge1 {
    public name:string = "hoge1";
}

Hoge2.ts

export class Hoge2 {
    public name:string = "hoge2";
}

export class Hoge3 {
    public name:string = "hoge3";
}

package.jsonでmainとtypesに1つのファイルしか指定できないんで、index.tsでHoge1.ts、Hoge2.tsをインポートしてそれをエクスポートするようにする。型情報ファイルは、tsc実行で出力するように設定したのでそれを使う。

index.ts

export { Hoge1 } from "./Hoge1";            // Hoge1のクラスHoge1をエクスポートする。
export * from "./Hoge2";                    // Hoge2でエクスポートしているものを全部エクスポート
export { Hoge1 as Hoge4} from "./Hoge1";    // Hoge1のクラスHoge1をHoge4としてエクスポート

これで、tscを実行して、index.js、index.d.ts 生成する。

これでモジュールのほうは完成。

次は使う方だ。

commonディレクトリと同列(隣)にtestと言うディレクトリを作って、そこを使うことにする。 npm initやtsc --initでpackage.json、tsconfig.jsonを作成する。

npm install ../common --save

を実行して、commonモジュールをインストールする。testプロジェクトのnode_modulesフォルダにシンボリックリンクされる。

commonモジュールを使うコードはこんな感じになる。

test.ts

import * as t from "common";

const hoge1 = new t.Hoge1();
const hoge2 = new t.Hoge2();
const hoge3 = new t.Hoge3();
const hoge4 = new t.Hoge4();

console.log(hoge1.name);    // "hoge1"と表示
console.log(hoge2.name);    // "hoge2"と表示
console.log(hoge3.name);    // "hoge3"と表示
console.log(hoge4.name);    // "hoge1"と表示

[Node.js][TypeScript] プライベートなモジュールの共有でpackage.jsonにcommonが絶対パスで保存されるって書いているけど、今のバージョンnpm(v6.1.0))では相対パスになっている。

TypeScriptで作るシングルページアプリケーション【電子書籍】[ 鈴木 潤 ] 価格：1512円 (2018/6/5時点)

TypeScript実践マスター【電子書籍】[ 古賀 慎一 ] 価格：3456円 (2018/6/5時点)

Angular2によるモダンWeb開発TypeScriptを使った基本プログラミング【電子書籍】[ 末次 章 ] 価格：3024円 (2018/6/5時点)