typescriptで共通ライブラリといえばnpmでinstallなんですが、

自作の小さいライブラリなんかだと、npm publishするほどのものではないし、いちいちgit経由つーのもめんどくさい。

ってことで小粒の自分用ライブラリをローカルで使う方法。

コードはこちら。

ライブラリ　と　使う方

環境は

$ node -v

v8.9.4

$ npm -v

4.1.1

$ tsc -v

Version 2.7.1

visual studio code + windows 7です。

ライブラリプロジェクトを作る

ライブラリフォルダはTSLibSampleとします。

1
2
3
4
5
6
7

$ mkdir TSLibSample
$ cd TSLibSample
$ tsc --init
$ npm init
...
name: (TSLibSample) tslibsample  #ちゃんと入れる
...

npm initした時にnameを聞いてきますが、使う側でimportする際にこの名前を使うので、ちゃんとしたのを入れます。

tsconfig.json

プロジェクト直下のtsconfig.jsonを編集します。”tsc –init”からの差はコメント参照。(テスト用の設定も入っちゃってます)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "declaration": true, /* 追加 */
    "sourceMap": true, /* 追加 */
    "outDir": "./dist", /* 変更　フォルダ名は好みだけどpackage.jsonと合わせる */
    "strict": true,
    "esModuleInterop": true
  },
  /* 以下 追加 */
  "include": [
    "src/**/*.ts"
  ],
  "exclude": [
    "src/**/*.spec.ts"
  ]
}

package.json

mainとtypesを設定します。フォルダはtsconfig.jsonのoutDirで指定した場所。

“private”: trueでうっかりpublishを防止します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

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

.npmignore

プロジェクトルートに.npmignoreを作成します。

1
2
3

tsconfig.json
jest.config.js
src

これ作らないと.gitignoreを参照に行くらしく、肝心のdistフォルダがまるっと無視されたりしますんで必ず作ります。

ちなみに.gitignoreはこんな感じ。

1
2

/dist/*
node_modules

ライブラリ本体を作る

やっとこライブラリ本体のコードを書きます。

コードはsrc以下に追加して、

src/AwesomeUtil.ts

1
2
3
4
5
6
7
8

export class AwesomeUtil {
    say(): void {
        console.log("Awecome!!");
    }
    getName(): string {
        return "AwesomeUtil";
    }
}

まーサンプルなんでしょーもないんですけど、ここで役立つクラスやら関数やらを作り込むわけですね。

src/index.ts

src/index.tsでexportして他のプロジェクトから使えるようにします。

1

export * from './AwesomeUtil';

コンパイル

1

$ tsc

で dist以下に

AwesomeUtil.d.ts

AwesomeUtil.js

AwesomeUtil.js.map

index.d.ts

index.js

index.js.map

ができるはず。

この時点でライブラリ側はひとまず完成。

使う側プロジェクト(クライアントプロジェクト)作成

使う側のプロジェクトはTSLibClientSampleに作成しました。tsc/npmで初期化します。

1
2
3
4

$ mkdir TSLibClientSample
$ cd TSLibClientSample
$ tsc --init
$ npm init

特に設定は変更しません。

自作ライブラリをインストール

ここが今回の肝ですかね。npmで相対パスを指定できます！

1

$ npm install ..\TSLibSample --save

そーすると、自作ライブラリが追加されます。(絶対パスですが。。。)

1
2
3

"dependencies": {
    "tslibsample": "file:///c:\\usr\\src\\TSLibSample"
  }

絶対パスダメ絶対ってひとは相対パスに書き換えてもＯＫみたいです。

1
2
3

"dependencies": {
    "tslibsample": "file:../TSLibSample"
  }

自作ライブラリを使ってみる

クライアントプロジェクトにコードを追加してみます。

今回はプロジェクトのルートにclient.tsを追加

client.ts

1
2
3
4
5

import { AwesomeUtil } from "tslibsample";

const util: AwesomeUtil = new AwesomeUtil();
util.say();
console.log(util.getName());

んで、コンパイル&実行

1
2
3
4

$ tsc
$ node ./client.js
Awecome!!
AwesomeUtil

でたー

ライブラリの変更

ライブラリを変更して、クライアントに反映してみます。

まずはコードを変更するなりしてコンパイル。

その後package.jsonの”version”をきちんと上げてあげる必要があります。

npm version patchコマンドを使うとpackage.jsonの編集とgitのタグ付等よきに計らってくれるみたいです。

1
2
3
4
5

{
  "name": "tslibsample",
  "version": "1.0.3",  //<=ココ！
  "description": "",
 ... 以下略

コンパイル忘れずに！(tscね)

そしたら使う側のプロジェクトでnpm updateで更新されます。

1
2
3
4
5
6
7

# TSLibClientSample
$ npm update
tslibclientsample@1.0.0 c:\usr\src\TSLibClientSample
`-- tslibsample@1.0.3

npm WARN tslibclientsample@1.0.0 No description
npm WARN tslibclientsample@1.0.0 No repository field.

テストとか

一応あちこちから使われるのであれば、テストとかできるようにしといたほうが良いかと思われます。

jestを使います。

1
2
3
4

# TSLibSample
$ npm install --save-dev typescript jest-preset-angular jest @types/jest
$ jest --init
 # ぜんぶデフォルトで

あとは好みでjest.config.jsを編集

自分的にはコードのすぐ近くにテストがある方が良いので、

testMatch:

をコメントアウトして、

testRegex: ‘\.spec\.ts$’,

を追加しました。

あとは src以下に *.spec.tsを書きまくればいいと思います。

で

自作のライブラリって、作ってもたいして再利用しないよね。