Code for final

ふぁいなる向けのコード置き場です。すでにコードじゃないこともいっぱい。

Node.jsの自作ライブラリをTypeScriptでつくってnpmに公開して、アプリから参照するやりかた

Node.js TypeScript

Electronでアプリ開発していると共通ライブラリが作りたくなったので、
Node.jsのライブラリをTypeScriptでつくってnpmに公開するやり方をまとめます。
実際に"Firx"というライブラリを作成して公開するまでの手順なので適宜読み替えてください。

パッケージ名を決定

パッケージ名を決めます。なんでもいいですが、すでに公開されているものは使用できないのでnpmで確認してください。

www.npmjs.com

フォルダを作成

場所はどこでもOKなので、フォルダを作成します。パッケージ名がいいと思います。

typescriptをインストール

上記で作成したフォルダをvscodeで開き、ターミナルを開いて以下のコマンドを入力。

> npm install typescript

tsc --initを実行

以下のコマンドを実行して、tsconfig.jsonを作成します。
パスを通す方法がありますが、今回しか使わないのでこれで十分です。

> .\node_modules\.bin\tsc --init

npm initを実行

package.jsonを作成します。
以下のコマンドを実行して質問に答えていくとできます。あとから編集できます。

> npm init

package.jsonを編集

package.jsonを編集します。以下を参考にする。

{
  "name": "firx",
  "version": "0.0.1",
  "description": "Electron Application Develop Support Libraries",
  "main": "index.js",
  "types": "index.d.ts", // 追加：型定義のルート
  "dependencies": {
     "electron-store": "^5.1.1" // 追加：依存するライブラリがあれば記述する
  },
  "devDependencies": {
    "typescript": "~3.9.3" // 変更：typescriptのバージョンをアプリに合わせる
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "tsc", // 追加：buildでtypescriptをコンパイル
    "prepublishOnly": "npm run build" // 追加：publish前にビルドする
  },
  "author": "FINALSTREAM",
  "license": "MIT"
}

tsconfig.jsonを編集

tsconfig.jsonを編集します。以下を参考にする。

{
  "compilerOptions": {
    /* Visit https://aka.ms/tsconfig.json to read more about this file */

    /* Basic Options */
    // "incremental": true,                   /* Enable incremental compilation */
    "target": "es5",  // 変更：バージョンをアプリに合わせる       /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
    "module": "commonjs",     
    ...
    "declaration": true,  // 変更：コメントをはずす。型定義を生成するオプション                   /* Generates corresponding '.d.ts' file. */
    // "declarationMap": true,                /* Generates a sourcemap for each corresponding '.d.ts' file. */
    // "sourceMap": true,  // 変更：コメントをはずす。デバッグ用のmapファイルを生成するオプション　　　    /* Generates corresponding '.map' file. */,
    // "outFile": "./",                       /* Concatenate and emit output to single file. */
    "outDir": "./"  // 変更：コメントをはずす。コンパイルしたファイルの出力先 /* Redirect output structure to the directory. */,
   ...
   },
  "include": ["src/**/*.ts"],  // 追加：コンパイル対象のファイル 。srcフォルダの*.tsファイルを対象
  "exclude": ["src/**/*.spec.ts"]  // 追加：コンパイル対象外のファイル。テストコード(*.spec.ts)は含めない

npmignoreを作成

npmで公開するファイルで除外するものを記述します。
ソースやコンパイル定義は公開しないようにする。

tsconfig.json
src

ソースファイルを追加

srcフォルダを作成し、クラスのtsファイルを作成します。

src/AppStore.ts

import Store from "electron-store";

export default class AppStore {
  private static _store = new Store();

  public static get instance(): Store {
    return this._store;
  }
}

srcフォルダにindex.tsを作成

モジュールを公開するためのルートスクリプトを作成します。
クラスが複数ある場合は同じように複数行記述します。

src/index.ts

export * from "./AppStore";

npmでアカウントを作成

npmで公開するためにアカウントを作成します。

www.npmjs.com

npmにログイン

npm publishを実行する前にログインをするため、以下のコマンドを実行します。
ユーザ名とパスワードを聞かれるので入力します。

> npm adduser

最後に以下のような表示がされればログイン成功です。

Logged in as finalstream on https://registry.npmjs.org/.

ちなみにログインせずにnpm publishを実行すると以下のようなエラーがでます。

npm ERR! code E404
npm ERR! 404 Not Found - PUT https://registry.npmjs.org/firx - Not found
npm ERR! 404
npm ERR! 404  'firx@0.0.1' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it (or use the name yourself!)
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\final\AppData\Roaming\npm-cache\_logs\2020-09-22T01_23_58_048Z-debug.log

npm publishを実行

npmに公開するため、以下のコマンドを実行します。
公開前にビルドが行われます。
一度publishしたら、同じバージョンではpublishできないので注意。

> npm publish

以下のように表示されれば成功です。

npm notice 
npm notice package: firx@0.0.9
npm notice === Tarball Contents ===
npm notice 706B AppStore.js
npm notice 759B index.js
npm notice 905B IpcResponse.js
npm notice 393B MessageLevel.js
npm notice 484B package.json
npm notice 288B AppStore.js.map
npm notice 148B index.js.map
npm notice 752B IpcResponse.js.map
npm notice 247B MessageLevel.js.map
npm notice 78B  README.md
npm notice 136B AppStore.d.ts
npm notice 94B  index.d.ts
npm notice 235B IpcResponse.d.ts
npm notice 112B MessageLevel.d.ts
npm notice === Tarball Details ===
npm notice name:          firx
npm notice version:       0.0.9
npm notice package size:  2.3 kB
npm notice unpacked size: 5.3 kB
npm notice shasum:        428062e0c8c521fdc210e3814c9b451a746922b2
npm notice integrity:     sha512-D7GBce7iKV3uE[...]YLiCLLnyBjNew==
npm notice total files:   14
npm notice
+ firx@0.0.9

npmで公開されていることを確認

以下のようにパッケージ名をurlに入れてアクセスすると公開されていることが確認できます。

https://www.npmjs.com/package/[パッケージ名]

成功していると以下のような感じ表示されます。

www.npmjs.com

アプリから使用

アプリの開発フォルダをvscodeで開いて、以下のコマンドをターミナルで実行します。
パッケージ名は作成したものを指定します。

> npm install firx

以下のようにインポートすると使用できます。
ポイントは"パッケージ名/クラス名"というように指定するところです。

import AppStore from "firx/AppStore";

最後に

TypeScriptだと型定義を自分で作らないといけないかなと思っていましたが、ソースから自動生成されるので心配無用でした。
いまのところ、このやり方でできていますが、開発を進めていったときにうまくいかないことが出たらまた追記したいと思います。

今回つくったライブラリはGitHubで公開していますので、うまく動かないときは参考にしていただければと思います。

github.com