TypeScriptのpackegerのtsdxを試してみるよ！

tsdxを試すよ！
0コンフィグらしい。便利そうだね！

どんなライブラリを作るか

試しに、二つの整数を与えて合計を返す関数のライブラリ を tsdxで作成してみるよ！

【結果的にやらなくて良かった】環境を整える

最初は、ライブラリを作成するソースコードを保存しておくために github にリポジトリを作成。

  1. githubにリポジトリを作成 → tsdx-sample-sumっていう名前にした
  2. ローカルにcloneして移動
~/development
❯ git clone https://github.com/tomatoaiu/tsdx-sample-sum.git
Cloning into 'tsdx-sample-sum'...
warning: You appear to have cloned an empty repository.

~/development
❯ cd tsdx-sample-sum

npm管理下にする

作成したリポジトリをローカルの開発環境に clone したら、cloneしたフォルダを npm の管理下にする。

~/development/tsdx-sample-sum master*
❯ yarn init -y # npm init -y でも可

実装

npm 管理下にしたら npm install tsdx をすればいいのかな？
tsdx の README.md を読むよ！

Just start editing src/index.ts and go!

ってあるからsrc/index.tsがentry point的な感じそう

~/development/tsdx-sample-sum master*
❯ mkdir src

~/development/tsdx-sample-sum master*
❯ touch src/index.ts

っておもったら違った！

【ここからやればOK】tsdxを使ってライブラリを作成

tsdx でフォルダを作らなければならないみたい。
そのために、まずは tsdx をグローバルインストール。

tsdxをglobalにinstall

~/development
❯ npm i -g tsdx

バージョン確認。

~/development 44s
❯ tsdx --version
tsdx, 0.5.7

フォルダ作成

~/development
❯ tsdx create tsdx-sample-sum
✔ Choose a template · basic
✔ Created tsdx-sample-sum
✔ Installed dependecines

  Awesome! You're now ready to start coding.

  I already ran yarn install for you, so your next steps are:
    cd tsdx-sample-sum

  To start developing (rebuilds on changes):
    yarn start

  To build for production:
    yarn build

  To test your library with Jest:
    yarn test

  Questions? Feedback? Please let me know!
  https://github.com/jaredpalmer/tsdx/issues

実装

~/development 28s
❯ code tsdx-sample-sum

さっそくscr/index.tsをみるぞ！

export const sum = (a: number, b: number) => {
  if ('development' === process.env.NODE_ENV) {
    console.log('boop');
  }
  return a + b;
};

うん？あれ？もうsumがあるぞ？？

tsdxでcreateするときにbasicかreact選ぶことができて、basicを選ぶと、 これ がテンプレートとして扱われるみたい。

watchしてみる

yarn start

✔ Compiled successfully

  Watching for changes

index.tsの末尾の行にsum(5, 10);を追加してみるとしっかりとコンパイルしてることが分かる。

~/development/tsdx-sample-sum
❯ node dist/index.js
boop

実行結果は、boopになるみたい。これはyarn startするとdevelopmentモードになるからのよう。

パッケージング

yarn buildでできるみたい。または npm run build 。

~/development/tsdx-sample-sum 3m 28s
❯ yarn build
yarn run v1.9.2
warning package.json: No license field
$ tsdx build
✓ Creating entry file 4 secs
✓ Building modules 2 secs
✨  Done in 7.42s.

コマンドを打つと以下のようにいろんなモジュール方式で、developmentモードとproductionモードでbuildできるみたいだね。

~/development/tsdx-sample-sum 8s
❯ tree dist
dist
├── index.d.ts
├── index.js
├── tsdx-sample-sum.cjs.development.js
├── tsdx-sample-sum.cjs.development.js.map
├── tsdx-sample-sum.cjs.production.js
├── tsdx-sample-sum.cjs.production.js.map
├── tsdx-sample-sum.es.production.js
├── tsdx-sample-sum.es.production.js.map
├── tsdx-sample-sum.umd.development.js
├── tsdx-sample-sum.umd.development.js.map
├── tsdx-sample-sum.umd.production.js
└── tsdx-sample-sum.umd.production.js.map

パッケージングしたライブラリを試す

call-sum.jsというファイルを作成してsumを呼び出して3を表示する。

~/development/tsdx-sample-sum
❯ touch src/call-sum.js

const { sum } = require('../dist/tsdx-sample-sum.cjs.production');

console.log(sum(1, 2));

~/development/tsdx-sample-sum
❯ node src/call-sum.js
3

できた！

参考文献