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

はじめに

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

create Configuration files

参照

• Node.js QuickStart

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

$ 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を追加

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

3. package.jsonに以下を追加

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

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

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

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

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

src/index.ts

export function hello() {
  console.log("hello world")
}

$ yarn build

---

Setting of eslint & prettier

参照

• prettier/eslint-plugin-prettier
• VSCodeでESLint+@typescript-eslint+Prettierを導入する
• 1natsu172/.eslintrc

1. install package

$ 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

.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

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

---

Link

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

1. リンク元を作る

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

1. リンク先を作る

$ cd <リンクする側>
$ yarn link <リンクされる側のpackage名>

---

Test

Jestを使います

1. Install package

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

2. add file

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 追記 )

.eslintrc

{
  "...",
  "env": {
    "...",
    "jest": true
  },
  "...",
}

4. add command and jest config to package.json

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

Add rollup

$ 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