小包で独自のタイプライブラリを作成します.js

もしあなたが同じタイプスクリプトコードを何度も何度も書いているのを見つけたら、このコードを再利用可能なパッケージに入れる時間かもしれません.
これを行う方法がたくさんあります.バンドルRollup かなりの時間のためにされているが、セットアップのかなり多くを必要とします.現代の選択肢Parcel ボックスのほぼゼロコンフィグを提供しますが、特定の要件があれば設定することもできます.

完成したコード

The repo
The published package

始める

mkdir parcel-library-starter

cd parcel-library-starter

npm init -y

小包をインストールする

npm install --save-dev parcel

パッケージのプロジェクト構成を定義します。JSON

{
  "name": "@ihaback/your-typescript-lib",
  "version": "1.0.0",
  // The source field defines the entry point for your library
  "source": "src/index.ts",
  // The main field defines the target output of your library
  "main": "dist/main.js"
  // The types field will output a dist/types.d.ts file containing type definitions for your library
  "types": "dist/types.d.ts",
  // To add an ES module target, add the module field to your package.json
  "module": "dist/module.js"
}

src / indexにエントリポイントファイルを作成します。TS

// Chunk an array into smaller arrays of a specified size
export const chunk = (arr: Array<any>, size: number) => {
  return Array.from({ length: Math.ceil(arr.length / size) }, (_, i) =>
    arr.slice(i * size, i * size + size)
  );
};

基本的なtsconfigを設定します。フォルダのJSONファイル

{
    "compilerOptions": {
        "target": "ES5",
        "lib": ["ES2015"],
        "types": ["jest"],
        "esModuleInterop": true
    }
}

セットアップ.フォルダのルートのgitignoreファイル

node_modules
dist
.parcel-cache
.cache
coverage

devを追加し、コマンドをパッケージにビルドします。JSON

ときにbuild あなたのパッケージ小包は自動的にあなたのコードをdist フォルダー、およびこのパッケージを消費するRPOで使用できる型を生成します.The dev コマンドは開発中に便利です.

{
  "scripts": {
    "dev": "parcel watch",
    "build": "parcel build"
  },
}

基本リンギングの依存関係を追加する

npm i eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser prettier eslint-config-prettier eslint-plugin-prettier @parcel/packager-ts @parcel/packager-ts @parcel/transformer-typescript-types -D

追加する.エスライントラック.プロジェクトの根底にあるJS

module.exports = {
    "env": {
        "es2021": true,
        "node": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:@typescript-eslint/recommended",
        "plugin:prettier/recommended"
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "plugins": [
        "@typescript-eslint",
        "prettier"
    ],
    "rules": {
        "prettier/prettier": [
            "error",
            {
                endOfLine: "auto",
            },
        ]
    }
}

追加する.プロジェクトの根源にEslintignore

node_modules
.parcel-cache
dist
.eslintrc.js
package.json
package-lock.json
coverage

LINTスクリプトをパッケージに追加します。JSON

{
  "scripts": {
    "lint": "eslint . --fix",
  }
}

Jestを使用してプロジェクトにテストを追加する

npm i jest ts-jest @types/jest -D

src / indexにコードのテストを追加します。テスト。TS

import { chunk } from ".";

describe("chunk", () => {
  test("should chunk array into smaller arrays of a specified size", () => {
    const bigArray = Array.from({ length: 100 }, (v, i) => i);

    const chunkedArray = chunk(bigArray, 25);

    expect(chunkedArray).toHaveLength(4);
  });
  test("should not chunck into multiple arrays if source array is less or equal to chunk size", () => {
    const bigArray = Array.from({ length: 100 }, (v, i) => i);

    const chunkedArray = chunk(bigArray, 100);

    expect(chunkedArray).toHaveLength(1);
  });
});

テストのトリガーと更新パッケージのスクリプトを追加します。JSON

{
  "scripts": {
    "test": "jest --coverage",
  },
  "jest": {
    "preset": "ts-jest"
  }
}

NPMJSにパッケージを公開する準備をします。コム

Sign up on npmjs.com

追加する.プロジェクトのルートのnpmignoreファイル

**/.eslintrc.js
**/.eslintignore
**/.parcel-cache
**/.github/README.md
coverage

あなたのNPMJsを含むあなたのパッケージ名を更新してください。comユーザー名

"name": "@your-username-here/your-package-name-here"

"name": "@ihaback/your-typescript-lib"

NPMJSにパッケージを発行します。コム

npm login

npm publish --access public