仕事ですぐに使えるTypeScriptを読んでいくその57

TypeScript

これは

TypeScriptの学習にとても役立ちそうなドキュメントを教えてもらったので
コツコツと読んでいく記事です。

参考

著作権者：フューチャー株式会社（Future Corporation）様

future-architect.github.io

ライブラリ開発のための環境設定

ビルド設定

Node.js環境に依存したものの場合Node.jsの型定義ファイルをインストールしておく。
$ npm install -- save-dev @types/node
各jsonファイルに設定を盛り込んでいく。
対象はtsconfig.jsonとpackage.json。

tsconfig.json
大事となっている部分は.d.tsファイル生成と、出力形式のES5のところと、入力ファイルについて
今回の要件の使う側が簡単なようになるよう考慮したものになっている部分。
案件に合わせて調整をしていくことで便利になっていく。

{
  "compilerOptions": {
    "target": "es5",           // 大事
    "declaration": true,       // 大事
    "declarationMap": true,
    "sourceMap": true,         // 大事
    "lib": ["dom", "ES2018"],
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true
  },
  "include": ["src/**/*"]      // 大事
}

package.json
以下のような点に考慮して設定を変更する。 　・つくったライブラリを読み込むときのエントリーポイントをmainで設定
　・scriptsにbuildでコンパイルする設定を追加

{
  "main": "dist-cjs/index.js",
  "module": "dist-esm/index.js",
  "types": "dist-cjs/index.d.ts",
  "scripts": {
    "build": "npm-run-all -s build:cjs buid:esm",
    "build:cjs": "tsc --project . --module commonjs --outDir ./dist-cjs",
    "build:esm": "tsc --project . --module es2015 --outDir ./dist-esm"
  }
}

今日はここまで。