この本を参考にnpmにライブラリを公開する

Hisho 2021/02/08に更新

プロジェクトの初期化

npm init -y
Wrote to /Users/hisho/github/state/package.json:

{
  "name": "state",
  "version": "1.0.0",
  "description": "state",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/hisho/state.git"
  },
  "keywords": [],
  "author": "Hisho <hisho.web@gmail.com> (https://github.com/hisho)",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/hisho/state/issues"
  },
  "homepage": "https://github.com/hisho/state#readme"
}

公開の名前空間がかぶらないように@hishoを付ける
適当に説明文を変更する
licenceをMITに変更する

package.json

{
-  "name": "state",
+  "name": "@hisho/state",
  "version": "1.0.0",
-  "description": "state",
+  "description": "A simple state library",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/hisho/state.git"
  },
  "keywords": [],
-  "author": "Hisho <hisho.web@gmail.com> (https://github.com/hisho)",
+  "author": "Hisho <hisho.web@gmail.com> (https://twitter.com/__hisho__)",
-  "license": "ISC",
+  "license": "MIT",
  "bugs": {
    "url": "https://github.com/hisho/state/issues"
  },
  "homepage": "https://github.com/hisho/state#readme"
}

Hisho 2021/02/08

各種ディレクトリの作成

$ mkdir src && mkdir test

.gitignoreの作成

$ touch .gitignore

.ideaを一応追加した

.gitignore

.idea
.DS_Store
node_modules

Hisho 2021/02/08

.editorconfigの作成

$ touch .editorconfig

いつ作ったか覚えてないいつもの設定を持ってくる

.editorconfig

# top-most EditorConfig file
root = true

# 全てのファイルを対象とする。
[*]

# インデントのスタイルの設定
indent_style = space

# インデントのサイズの設定
indent_size = 2

# 改行コードの設定
end_of_line = lf

# 文字コードの設定
charset = utf-8

# 文末にスペースを取り除く設定
trim_trailing_whitespace = true

# 最後の行を改行の設定
insert_final_newline = true

# マークダウン記法のみ左右のspaceを許可する
[*.md]
trim_trailing_whitespace = false

Hisho 2021/02/08

TypeScriptのインストール

$ npm i -D typescript

コピペするのでtouchで作る

$ touch tsconfig.json

tsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  }
}

Hisho 2021/02/08

ライブラリの実装

ここではとりあえず、コンストラクタとgetter,setterだけの実装で試してみる。

src/state.ts

/**
 * 状態を管理するClass
 */
export class State<S> {
  private state: S

  /**
   * 初期値を受け取ってstateに代入する
   * @param initialState 初期値
   */
  constructor(initialState: (() => S) | S) {
    if (initialState instanceof Function) {
      this.state = initialState();
    } else {
      this.state = initialState;
    }
  }

  /**
   * 現在のstateを返す関数
   * @return 現在のstateの値
   */
  get getState(): S {
    return this.state;
  }

  /**
   * 新しいstateを受け取ってthis.stateを更新する関数
   * @param newState 新しいstateの値または新しいstateの値を返す関数
   */
  public readonly setState = (newState: (S | ((prevState: S) => S))) => {
    if (newState instanceof Function) {
      this.state = newState(this.state);
    } else {
      this.state = newState;
    }
  }
}

src/index.ts

import {State} from "./state";

export {
  State
}

Hisho 2021/02/08

ESLintのインストール

iTerm

$ npm i -D eslint

iTerm

$ npx eslint --init
✔ How would you like to use ESLint? · problems
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · none
✔ Does your project use TypeScript? · No / Yes
✔ Where does your code run? · browser, node
✔ What format do you want your config file to be in? · JavaScript
The config that you've selected requires the following dependencies:

@typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest
✔ Would you like to install them now with npm? · No / Yes
Installing @typescript-eslint/eslint-plugin@latest, @typescript-eslint/parser@latest

とりあえず、そのままにしておく

.eslintrc.js

module.exports = {
    "env": {
        "browser": true,
        "es2021": true,
        "node": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:@typescript-eslint/recommended"
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaVersion": 12,
        "sourceType": "module"
    },
    "plugins": [
        "@typescript-eslint"
    ],
    "rules": {
    }
};

Hisho 2021/02/08

package.jsonの修正

packge.json

{
  "name": "@hisho/state",
  "version": "1.0.0",
  "description": "A simple state library",
  "main": "index.js",
  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "lint": "eslint --fix 'src/**/*.ts'"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/hisho/state.git"
  },
  "keywords": [],
  "author": "Hisho <hisho.web@gmail.com> (https://twitter.com/__hisho__)",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/hisho/state/issues"
  },
  "homepage": "https://github.com/hisho/state#readme",
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^4.14.2",
    "@typescript-eslint/parser": "^4.14.2",
    "eslint": "^7.19.0",
    "typescript": "^4.1.3"
  }
}

Hisho 2021/02/08に更新

ESLintの実行

iTerm

npm run lint

> @hisho/state@1.0.0 lint /Users/hisho/github/state
> eslint --fix 'src/**/*.ts'


/Users/hisho/github/state/src/state.ts
  31:30  warning  Missing return type on function  @typescript-eslint/explicit-module-boundary-types

Hisho 2021/02/08

ESLintので怒られたので直す

src/state.ts

/**
 * 状態を管理するClass
 */
export class State<S> {
  private state: S

  /**
   * 初期値を受け取ってstateに代入する
   * @param initialState 初期値
   */
  constructor(initialState: (() => S) | S) {
    if (initialState instanceof Function) {
      this.state = initialState();
    } else {
      this.state = initialState;
    }
  }

  /**
   * 現在のstateを返す関数
   * @return 現在のstateの値
   */
  get getState(): S {
    return this.state;
  }

  /**
   * 新しいstateを受け取ってthis.stateを更新する関数
   * @param newState 新しいstateの値または新しいstateの値を返す関数
   */
-  public readonly setState = (newState: (S | ((prevState: S) => S))) => {
+  public readonly setState = (newState: (S | ((prevState: S) => S))): void => {
    if (newState instanceof Function) {
      this.state = newState(this.state);
    } else {
      this.state = newState;
    }
  }
}

voidぐらい見たら分かるやん！！！

iTerm

$ npm run lint

> @hisho/state@1.0.0 lint /Users/hisho/github/state
> eslint --fix 'src/**/*.ts'

直ったので次に進む

Hisho 2021/02/08

全然コミットしていないのでそろそろしたい

Hisho 2021/02/08

Jestのインストール

iTerm

$ npm i -D jest ts-jest

Hisho 2021/02/08

package.jsonの修正

package.json

{
  "name": "@hisho/state",
  "version": "1.0.0",
  "description": "A simple state library",
  "main": "index.js",
  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "lint": "eslint --fix 'src/**/*.ts'"
+    "lint": "eslint --fix 'src/**/*.ts'",
+    "test": "jest"
  },
+"jest": {
+    "moduleFileExtensions": [
+      "ts",
+      "js"
+    ],
+    "transform": {
+      "^.+\\.ts$": "ts-jest"
+    },
+    "globals": {
+      "ts-jest": {
+        "tsconfig": "tsconfig.json"
+      }
+    },
+    "testMatch": [
+      "**/test/**/*.test.ts"
+    ]
+  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/hisho/state.git"
  },
  "keywords": [],
  "author": "Hisho <hisho.web@gmail.com> (https://twitter.com/__hisho__)",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/hisho/state/issues"
  },
  "homepage": "https://github.com/hisho/state#readme",
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^4.14.2",
    "@typescript-eslint/parser": "^4.14.2",
    "eslint": "^7.19.0",
    "jest": "^26.6.3",
    "ts-jest": "^26.5.0",
    "typescript": "^4.1.3"
  }
}

Hisho 2021/02/08

テストコードの作成

テストはやったことがないので調べながらやる

Hisho 2021/02/08

テストコードの作成

暫定今日本後になっている部分とtestの書き方はまた勉強したら書き直す

src/state.test.ts

import {State} from "../src/state";

describe('State', (): void => {
  describe('constructor', (): void => {
    test('instance生成', (): void => {
      const state = new State(1);
      expect(state).toBeDefined();
      expect(state.getState).toBeDefined();
      expect(state.setState).toBeDefined();
    });
  });

  describe('getState', (): void => {
    test('numberのstateをgetする', (): void => {
      const state = new State(1);
      const currentState = state.getState;
      expect(currentState).toEqual(1);
    });
    test('objectのstateをgetする', (): void => {
      const state = new State({
        initialState: 2
      });
      const currentState = state.getState;
      expect(currentState).toEqual({
        initialState: 2
      });
    });
  });

  describe('setState', (): void => {
    test('現在のstateを5にする', (): void => {
      const state = new State(1);
      state.setState(5);
      const currentState = state.getState;
      expect(currentState).toEqual(5);
    });

    test('現在のstateを前のstate+5にする', (): void => {
      const state = new State(1);
      state.setState(prevState => (prevState + 5));
      const currentState = state.getState;
      expect(currentState).toEqual(6);
    });

    test('現在の{initialState}を5にする', (): void => {
      const state = new State({
        initialState: 2
      });
      state.setState({
        initialState: 5
      });
      const currentState = state.getState;
      expect(currentState).toEqual({
        initialState: 5
      });
    });

    test('現在の{initialState}を前の{initialState} + 5にする', (): void => {
      const state = new State({
        initialState: 2
      });
      state.setState(prevState => ({...prevState,initialState: prevState.initialState + 5}));
      const currentState = state.getState;
      expect(currentState).toEqual({
        initialState: 7
      });
    });

    test('現在の{initialState,test}の{initialState}を5にする', (): void => {
      const state = new State({
        initialState: 2,
        test: 'test'
      });
      state.setState(prevState => ({...prevState,initialState: 5}));
      const currentState = state.getState;
      expect(currentState).toEqual({
        initialState: 5,
        test: 'test'
      });
    });

    test('現在の{initialState,test}の{initialState}を前の{initialState} + 5にする', (): void => {
      const state = new State({
        initialState: 2,
        test: 'test'
      });
      state.setState(prevState => ({...prevState,initialState: prevState.initialState + 5}));
      const currentState = state.getState;
      expect(currentState).toEqual({
        initialState: 7,
        test: 'test'
      });
    });
  });
})

Hisho 2021/02/08

テストの実施

iTrem

npm test

> @hisho/state@1.0.0 test /Users/hisho/github/state
> jest

 PASS  test/state.test.ts
  State
    constructor
      ✓ instance生成 (2 ms)
    getState
      ✓ numberのstateをgetする (1 ms)
      ✓ objectのstateをgetする
    setState
      ✓ 現在のstateを5にする (1 ms)
      ✓ 現在のstateを前のstate+5にする
      ✓ 現在の{initialState}を5にする
      ✓ 現在の{initialState}を前の{initialState} + 5にする (1 ms)
      ✓ 現在の{initialState,test}の{initialState}を5にする
      ✓ 現在の{initialState,test}の{initialState}を前の{initialState} + 5にする

Test Suites: 1 passed, 1 total
Tests:       9 passed, 9 total
Snapshots:   0 total
Time:        2.495 s
Ran all test suites.

Hisho 2021/02/08

rollup.jsのインストール

iTerm

$ npm i -D rollup rollup-plugin-terser @rollup/plugin-babel @rollup/plugin-commonjs @rollup/plugin-node-resolve @rollup/plugin-typescript tslib

Hisho 2021/02/08

Babelのインストール

iTerm

$ npm i -D @babel/core @babel/preset-env

Hisho 2021/02/08

.babelrc.jsの追加

iTerm

$ touch .babelrc.js

.babelrc.js

module.exports = {
  presets: [
    [
      "@babel/preset-env",
    ],
  ],
};

Hisho 2021/02/08

rollup.config.jsの追加

iTerm

$ touch rollup.config.js

rollup.config.js

// minifyに用
import { terser as pluginTerser } from 'rollup-plugin-terser';
// typescript用
import pluginTypescript from '@rollup/plugin-typescript';
// CommonJS用
import pluginCommonjs from '@rollup/plugin-commonjs';
// サードパーティライブラリ用
import pluginNodeResolve from '@rollup/plugin-node-resolve';
// トランスパイル用
import { babel as pluginBabel } from '@rollup/plugin-babel';
import * as path from 'path';

import pkg from './package.json';


// モジュール名
const moduleName = pkg.name.replace(/^@.*\//, '');
// エントリーとなるファイル名
const inputFileName = 'src/index.ts';

// ライセンス表記用のバナー
const banner = `
  /**
   * @license
   * ${moduleName}.js v${pkg.version}
   * Released under the ${pkg.license} License.
   */
`;

export default [
  // ブラウザ用の設定
  {
    input: inputFileName,
    output: [
      // uncompressed
      {
        name: moduleName,
        file: pkg.browser,
        format: 'iife',
        sourcemap: 'inline',
        banner
      },
      // minified
      {
        name: moduleName,
        file: pkg.browser.replace('.js', '.min.js'),
        format: 'iife',
        sourcemap: 'inline',
        banner,
        plugins: [
          pluginTerser(),
        ],
      }
    ],
    plugins: [
      pluginTypescript(),
      pluginCommonjs({
        extensions: ['.js', '.ts'],
      }),
      pluginBabel({
        babelHelpers: 'bundled',
        configFile: path.resolve(__dirname, '.babelrc.js'),
      }),
      pluginNodeResolve({
        // ブラウザ向けにバンドルする
        browser: true,
      }),
    ],
  },

  // ES Module用の設定
  {
    input: inputFileName,
    output: [
      {
        file: pkg.module,
        format: 'es',
        sourcemap: 'inline',
        banner,
        exports: 'named',
      },
    ],
    external: [
      ...Object.keys(pkg.dependencies || {}),
      ...Object.keys(pkg.devDependencies || {}),
    ],
    plugins: [
      pluginTypescript(),
      pluginCommonjs({
        extensions: ['.js', '.ts'],
      }),
      pluginBabel({
        babelHelpers: 'bundled',
        configFile: path.resolve(__dirname, '.babelrc.js'),
      }),
      pluginNodeResolve({
        browser: false,
      }),
    ],
  },

  // CommonJS用の設定
  {
    input: inputFileName,
    output: [
      {
        file: pkg.main,
        format: 'cjs',
        sourcemap: 'inline',
        banner,
        exports: 'default',
      },
    ],
    external: [
      ...Object.keys(pkg.dependencies || {}),
      ...Object.keys(pkg.devDependencies || {}),
    ],
    plugins: [
      pluginTypescript(),
      pluginCommonjs({
        extensions: ['.js', '.ts'],
      }),
      pluginBabel({
        babelHelpers: 'bundled',
        configFile: path.resolve(__dirname, '.babelrc.js'),
      }),
      pluginNodeResolve({
        browser: false,
      }),
    ],
  },
];

Hisho 2021/02/09に更新

package.jsonの修正

package.json

{
  "name": "@hisho/state",
  "version": "1.0.0",
  "description": "A simple state library",
-  "main": "index.js",
+  "main": "dist/state.cjs.js",
+  "module": "dist/state.es.js",
+  "browser": "dist/state.js",
  "scripts": {
+   "build": "rollup -c",
    "lint": "eslint --fix 'src/**/*.ts'",
    "test": "jest"
  },
  "jest": {
    "moduleFileExtensions": [
      "ts",
      "js"
    ],
    "transform": {
      "^.+\\.ts$": "ts-jest"
    },
    "globals": {
      "ts-jest": {
        "tsconfig": "tsconfig.json"
      }
    },
    "testMatch": [
      "**/test/**/*.test.ts"
    ]
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/hisho/state.git"
  },
  "keywords": [],
  "author": "Hisho <hisho.web@gmail.com> (https://twitter.com/__hisho__)",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/hisho/state/issues"
  },
  "homepage": "https://github.com/hisho/state#readme",
  "devDependencies": {
    "@babel/core": "^7.12.13",
    "@babel/preset-env": "^7.12.13",
    "@rollup/plugin-babel": "^5.2.3",
    "@rollup/plugin-commonjs": "^17.1.0",
    "@rollup/plugin-node-resolve": "^11.1.1",
    "@rollup/plugin-typescript": "^8.1.1",
    "@typescript-eslint/eslint-plugin": "^4.14.2",
    "@typescript-eslint/parser": "^4.14.2",
    "eslint": "^7.19.0",
    "jest": "^26.6.3",
    "rollup": "^2.38.5",
    "rollup-plugin-terser": "^7.0.2",
    "ts-jest": "^26.5.0",
    "tslib": "^2.1.0",
    "typescript": "^4.1.3"
  }
}

Hisho 2021/02/08

ビルドの実行

iTerm

$ npm run build

Hisho 2021/02/08

動作確認

今回はnode.jsを想定していないが、一応やってみる

Hisho 2021/02/09

common.jsはnamed exportじゃ怒られるみたいなので、common.js形式には対応しない方針で行く

iTerm

npm run build

> @hisho/state@1.0.0 build /Users/hisho/github/state
> rollup -c


src/index.ts → dist/hellolib.js, dist/hellolib.min.js...
created dist/hellolib.js, dist/hellolib.min.js in 1.5s

src/index.ts → dist/hellolib.es.js...
created dist/hellolib.es.js in 808ms

src/index.ts → dist/hellolib.cjs.js...
[!] Error: "default" was specified for "output.exports", but entry module "src/index.ts" has the following exports: State
Error: "default" was specified for "output.exports", but entry module "src/index.ts" has the following exports: State
    at error (/Users/hisho/github/state/node_modules/rollup/dist/shared/rollup.js:5239:30)
    at getExportMode (/Users/hisho/github/state/node_modules/rollup/dist/shared/rollup.js:10919:20)
    at Chunk$1.generateExports (/Users/hisho/github/state/node_modules/rollup/dist/shared/rollup.js:11233:31)
    at Bundle$1.prerenderChunks (/Users/hisho/github/state/node_modules/rollup/dist/shared/rollup.js:12736:19)
    at Bundle$1.generate (/Users/hisho/github/state/node_modules/rollup/dist/shared/rollup.js:12614:18)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
    at handleGenerateWrite (/Users/hisho/github/state/node_modules/rollup/dist/shared/rollup.js:20080:23)
    at async Promise.all (index 0)
    at build (/Users/hisho/github/state/node_modules/rollup/dist/bin/rollup:1495:5)
    at runRollup (/Users/hisho/github/state/node_modules/rollup/dist/bin/rollup:1647:21)

Hisho 2021/02/09

まぁとりあえず先にすすめるためにやっぱり一旦デフォルにする

src/index.ts

import {State} from "./state";

-export {
+export default {
  State
}

Hisho 2021/02/09

エラーが消えた

iTerm

npm run build

> @hisho/state@1.0.0 build /Users/hisho/github/state
> rollup -c


src/index.ts → dist/hellolib.js, dist/hellolib.min.js...
created dist/hellolib.js, dist/hellolib.min.js in 1.7s

src/index.ts → dist/hellolib.es.js...
created dist/hellolib.es.js in 759ms

src/index.ts → dist/hellolib.cjs.js...
created dist/hellolib.cjs.js in 586ms

Hisho 2021/02/09に更新

試しに使ってみる

iTerm

$ ../ && mkdir state-js-lib-test && cd state-js-lib-test

iTerm

$ npm init -y

iTerm

$ npm i -D ../state

Hisho 2021/02/09

nodeでの使用

iTerm

$ touch sample.js

sample.js

const {State} = require('@hisho/state');
const state = new State(1);

console.log(state.getState);
state.setState(5);
console.log(state.getState);
state.setState(prevState => prevState +5);
console.log(state.getState);

iTerm

$ node sample.js
1
5
10

Hisho 2021/02/09

ブラウザでの使用

iTerm

$ touch index.html

index.html

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport"
	      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<script src="../state/dist/state.js"></script>
</head>
<body>
<script>

  const states = new state.State(1);
  console.log(states.getState);
</script>
</body>
</html>

Hisho 2021/02/09

型定義など欲しいのでtscでトランスパイルするように変更してみる

Hisho 2021/02/09

一旦tscはおいてpushしよう！

Hisho 2021/02/09

CircleCIの設定追加

Add Configできなかったので手動でセットアップしてみる

Hisho 2021/02/09

iTerm

$ mkdir .circleci && touch .circleci/config.yml

後は内容コピペ

config.yml

version: 2.1

orbs:
  node: circleci/node@4.1

jobs:
  build-and-test:
    docker:
      - image: cimg/node:15.1
    steps:
      - checkout
      - node/install-packages
      - run:
          name: Run tests
          command: npm test

workflows:
  run-test:
    jobs:
      - build-and-test

Hisho 2021/02/09

ライセンスを追加する

これを参考にMITライセンスを設定する

Hisho 2021/02/09

iTerm

$ git tag -a v1.0.0 -m "init"

iTerm

$ git push origin tags/v1.0.0
Enumerating objects: 1, done.
Counting objects: 100% (1/1), done.
Writing objects: 100% (1/1), 153 bytes | 153.00 KiB/s, done.
Total 1 (delta 0), reused 0 (delta 0)
To https://github.com/hisho/state.git
 * [new tag]         v1.0.0 -> v1.0.0

iTerm

$ npm publish ./

公開された！

Hisho 2021/02/10に更新

死んだ！

typescriptとes5で動かす想定なので、色々変える

Hisho 2021/02/09

tscですべてできそうなので、rollupは削除する

package.json

{
  "name": "@hisho/state",
  "version": "1.0.0",
  "description": "A simple state library",
-  "main": "dist/state.cjs.js",
+  "main": "dist/index",
+  "typings": "dist/index.d.ts",
-  "module": "dist/state.es.js",
-  "browser": "dist/state.js",
  "scripts": {
    "lint": "eslint --fix 'src/**/*.ts'",
-   "build": "rollup -c",
+   "build": "tsc",
    "test": "jest"
  },
  "jest": {
    "moduleFileExtensions": [
      "ts",
      "js"
    ],
    "transform": {
      "^.+\\.ts$": "ts-jest"
    },
    "globals": {
      "ts-jest": {
        "tsconfig": "tsconfig.json"
      }
    },
    "testMatch": [
      "**/test/**/*.test.ts"
    ]
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/hisho/state.git"
  },
  "keywords": [],
  "author": "Hisho <hisho.web@gmail.com> (https://twitter.com/__hisho__)",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/hisho/state/issues"
  },
  "homepage": "https://github.com/hisho/state#readme",
  "devDependencies": {
-   "@babel/core": "^7.12.13",
-   "@babel/preset-env": "^7.12.13",
-   "@rollup/plugin-babel": "^5.2.3",
-   "@rollup/plugin-commonjs": "^17.1.0",
-   "@rollup/plugin-node-resolve": "^11.1.1",
-   "@rollup/plugin-typescript": "^8.1.1",
    "@typescript-eslint/eslint-plugin": "^4.14.2",
    "@typescript-eslint/parser": "^4.14.2",
    "eslint": "^7.19.0",
    "jest": "^26.6.3",
-   "rollup": "^2.38.5",
-   "rollup-plugin-terser": "^7.0.2",
    "ts-jest": "^26.5.0",
    "tslib": "^2.1.0",
    "typescript": "^4.1.3"
  }
}

ts-config.json

     "target": "esnext",
     "module": "esnext",
     "strict": true,
+    "sourceMap": true,
     "esModuleInterop": true,
     "skipLibCheck": true,
-    "forceConsistentCasingInFileNames": true
-  }
+    "forceConsistentCasingInFileNames": true,
+    "declaration": true,
+    "moduleResolution": "node",
+    "outDir": "./dist",
+    "rootDir": "./src"
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules"]
 }

src/index.ts

-import {State} from "./state";
-
-export default {
-  State
-}
+export * from "./state";

Hisho 2021/02/09

不要になったファイルを一旦削除する

iTerm

$ rm .babelrc.js && rm  rollup.config.js

Hisho 2021/02/09

buildの前にフォルダを削除する

$ npm i -D rimraf npm-run-all

package.json

{
  "name": "@hisho/state",
  "version": "1.0.0",
  "description": "A simple state library",
  "main": "dist/index.js",
  "typings": "dist/index.d.ts",
  "scripts": {
    "lint": "eslint --fix 'src/**/*.ts'",
+   "prebuild": "rimraf dist",
    "build": "tsc",
    "test": "jest"
  },
  "jest": {
    "moduleFileExtensions": [
      "ts",
      "js"
    ],
    "transform": {
      "^.+\\.ts$": "ts-jest"
    },
    "globals": {
      "ts-jest": {
        "tsconfig": "tsconfig.json"
      }
    },
    "testMatch": [
      "**/test/**/*.test.ts"
    ]
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/hisho/state.git"
  },
  "keywords": [],
  "author": "Hisho <hisho.web@gmail.com> (https://twitter.com/__hisho__)",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/hisho/state/issues"
  },
  "homepage": "https://github.com/hisho/state#readme",
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^4.14.2",
    "@typescript-eslint/parser": "^4.14.2",
    "eslint": "^7.19.0",
    "jest": "^26.6.3",
+   "npm-run-all": "^4.1.5",
+   "rimraf": "^3.0.2",
    "ts-jest": "^26.5.0",
    "tslib": "^2.1.0",
    "typescript": "^4.1.3"
  }
}

Hisho 2021/02/10

行けたので一旦終わり

Hisho 2021/02/10

npmでtypescriptのライブラリを公開する勉強になった！
課題が山積みなので少しず消化していきたい！
とりあえず、issue作るところから！

このスクラップは2021/02/10にクローズされました