typescriptを使ってnpm package作るまでに必要そうなことをまとめてみた

# はじめに

typescriptを使ってnpm package作るまでに必要そうなことをまとめてみました
npm packageの公開等は紹介しないです

# create Configuration files
##### 参照
- [Node.js QuickStart](https://typescript-jp.gitbook.io/deep-dive/nodejs)

##### 1. ディレクトリ及びconfigファイルを作成する

```shell
$ mkdir package
$ cd package

$ npm init -y
$ yarn add -D typescript @types/node

# create tsconfig.json お好みで
$ npx tsc --init --rootDir src --outDir lib --esModuleInterop --resolveJsonModule --lib es6,dom --module commonjs --declaration true --strictNullChecks true
```

##### 2. tsconfig.jsonに`include`を追加

```json:
{
  "compilerOptions": {
    "..."
  },
  "include": ["./src/**/*"]
}
```

##### 3. package.jsonに以下を追加

> "main"： "lib/index" <これはNode.jsにlib/index.jsをロードするように指示します
> "types"： "lib/index" <これはTypeScriptにlib/index.d.tsをロードするように指示します

```json:
{
  "...",
  "main": "lib/index",
  "types": "lib/index",
  "...",
}
```

##### 4. package.jsonにbuildコマンドを追加

```json:
{
  "...",
  "scripts": {
    "build": "tsc",
    "watch": "tsc -w"
  },
  "...",
}
```

##### 5. srcディレクトリ以下にファイル作成しbuild

```typescript:src/index.ts
export function hello() {
  console.log("hello world")
}
```

```shell
$ yarn build
```

:clap: 

----

# Setting of eslint & prettier

##### 参照
- [prettier/eslint-plugin-prettier](https://github.com/prettier/eslint-plugin-prettier)
- [VSCodeでESLint+@typescript-eslint+Prettierを導入する](https://qiita.com/madono/items/a134e904e891c5cb1d20)
- [1natsu172/.eslintrc](https://gist.github.com/1natsu172/a65a4b45faed2bd3fa74b24163e4256e)

##### 1. install package
```shell
$ yarn add -D eslint @typescript-eslint/parser @typescript-eslint/typescript-estree @typescript-eslint/eslint-plugin 
$ yarn add -D prettier eslint-config-prettier eslint-plugin-prettier
```

##### 2. create .eslintrc

```json:.eslintrc
{
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "project": "./tsconfig.json",
  },
  "plugins": [
    "@typescript-eslint",
    "prettier"
  ],
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended",
    "prettier/@typescript-eslint"
  ],
  "rules": {
    "prettier/prettier": "error"
  },
  "env": {
    "es6": true,
    "browser": true,
    "node": true
  }
}
```

##### 3. add command to package.json

```json:
{
  "...",
  "scripts": {
    "...",
    "lint": "eslint src/** --ext .ts,.tsx",
    "lint:fix": "yarn lint --fix",
  },
  "...",
}
```

:clap: 

---
# Link
ローカルで開発するときはyarn linkが便利です(npm linkでも良いです)

##### 1. リンク元を作る

```shell
$ cd <リンクされる側>
$ yarn link
```

##### 1. リンク先を作る
```shell
$ cd <リンクする側>
$ yarn link <リンクされる側のpackage名>
```

:clap: 


---
# Test
Jestを使います

##### 1. Install package

```
$ yarn add -D jest ts-jest @types/jest
```

##### 2. add file

```typescript:test/index.test.ts
// tekitou
it('subtracts 5 - 1 to equal 4 in TypeScript', () => {
  expect(5 - 1).toBe(4);
});
```

##### 3. add jest env to .eslint (2019/05/10 追記 :bow:)

```json:.eslintrc
{
  "...",
  "env": {
    "...",
    "jest": true
  },
  "...",
}
```

##### 4. add command and jest config to package.json

```json
{
  "...",
  "scripts": {
    "...",
    "test": "jest",
    "test:watch": "jest --watch"
  },
  "...",
  "jest": {
    "verbose": true,
    "transform": {
      "^.+\\.tsx?$": "ts-jest"
    }
  }
}
```

:clap: 

# Add rollup

```shell
$ yarn add -D rollup rollup-plugin-typescript2 rollup-plugin-uglify rollup-plugin-node-resolve
```

```rollup.config.js
export default {
  input: "./src/index.js",
  output: {
    file: "./dist/index.js",
    format: "cjs"
  }
};
```

```
$ yarn add -D rollup-plugin-size-snapshot

```