66241
素朴な cli ツールを typescript で記述して、 npm 公開し、 `npm i -g mypackage` すると、その mypackage
内で定義した `myexecutable` が、グローバルにインストールされ、 `myexecutable` コマンドが、その PC
上で実行できるようにしたいと思いました。

これは typescript をやる上では、よくあるやりたいことになるかなと思っていますが、これを実行できるようなプロジェクト設定は、どのようになりますか？
定番のセットアップ方法などありますか？
CC BY-SA 4.0
2019-12-03T05:05:56.253
61048
2020-05-03T08:34:13.687
754
question
typescript npm
typescript で実行可能スクリプトをコンパイルし npm で配布する際には、どのような構成にする？
2つ紹介します。

## 1.シンプルな構造

簡易なやり方を紹介します。[next.jsのcreate-next-
app](https://github.com/zeit/next.js/tree/canary/packages/create-next-
app)が分かりやすい例です。  
規模の小さなライブラリや、別のライブラリにコアな実装が切り出された場合に向いています。

```

    create-next-app
    ├── package.json
    ├── index.ts      # TypeScriptの実装
    └── tsconfig.json # distディレクトリを成果物の出力先に指定
    
```

## 2\. 既存のライブラリにCLIを追加する場合の構造

GitHubに[ts-cli-template](https://github.com/Himenon/ts-cli-
template)というサンプルプロジェクトを用意したので、これを題材に紹介します。後付でCLIライブラリを作成する場合や、`webpack`などJavaScript/TypeScript以外のファイルもバンドルする必要が出てきた場合に向いています。

### ディレクトリ構造

ファイルの役割はそれぞれ以下のようになっています。

```

    ts-cli-template
    ├── LICENSE             # ライセンスファイル
    ├── README.md           # 使い方など
    ├── bin
    │   └── ts-cli-template # chmod +x を実行済み
    ├── lib                 # TypeScriptからビルド済みのJSファイル
    │   └── index.js
    ├── package.json
    ├── src                 # 開発ディレクトリ
    │   └── index.ts
    ├── tsconfig.json       # ビルド設定
    └── yarn.lock
    
```

## package.json

```

    {
      "name": "ts-cli-template",     # ライブラリ名
      "version": "1.0.0",            # バージョン
      "license": "MIT",              # ライセンス形態
      "files": [                     # パッケージに含めるディレクトリやファイル
        "bin",
        "lib",
        "package.json",
        "LICENSE"
      ],
      "bin": {
        "ts-cli-template": "./bin/ts-cli-template" # CLIの実行エントリーポイント
      },     
      "scripts": {
        "build": "tsc -p tsconfig.json",  # ts -> jsへのビルド
        "watch": "yarn build --watch",    # 開発時に監視ビルド
        "prepublish": "yarn build",       # パッケージpublish前にビルド（ビルド忘れ防止）
        "sample": "./bin/ts-cli-template --message 'test message' --flag" # CLIの実行テスト用のコマンド
      },
      "devDependencies": {
        "@types/node": "^13.13.4",
        "typescript": "^3.8.3"
      },
      "dependencies": {
        "commander": "^5.1.0"
      }
    }
    
```

### "bin"の説明

"bin"で指定されたファイルはNodeJSでCLIを作る上で重要です。ここで指定されたファイルがCLIをインストール後、最初に実行されるファイルになります。そのため、実行可能な権限が与えられている必要があるため、ファイルを作成した段階で`chmod
+x`を実行し、ファイルの実行権限を与えます。

### `src`、`lib`、`bin`の役割

  * `src`は開発時に利用するディレクトリになります。ビルド前のファイル、つまりTypeScriptの実装や、そのテストコードを書く場所として利用します。
  * `lib`は`src`からビルドされたファイルを配置する場所です。ここには実行に必要なファイルが置かれます。CLI実行時はnodeが実行することになるので、`js`ファイルのみが存在していれば実行に十分です。テストコードもビルド時に除外します。
  * `bin`はCLIのエントリーポイントとして利用します。`bin`という名前は（NodeJSに限らず）CLIとして利用するファイルとして定義する場所を意味します。また、これはビルドの都合によりますが、`webpack`などでビルドすると、`shebang`（`#!/usr/bin/env node`）の挿入がビルド時にする必要があるため、`bin`に予め固定のエントリーポイントファイルを用意しておく意味もあります。
CC BY-SA 4.0
2020-05-03T08:34:13.687
66241
2020-05-03T08:34:13.687
7997
61048
answer