Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

はじめに

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

create Configuration files

参照
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

:clap:


Setting of eslint & prettier

参照
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",
  },
  "...",
}

:clap:


Link

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

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

:clap:


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 追記 :bow:)
.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"
    }
  }
}

:clap:

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

_mkazutaka
CI/CD Webが好きなエンジニア バックエンドからフロントまで広めにやってます
mercari
フリマアプリ「メルカリ」を、グローバルで開発しています。
https://tech.mercari.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away