小包で独自のタイプライブラリを作成します.js
18613 ワード
もしあなたが同じタイプスクリプトコードを何度も何度も書いているのを見つけたら、このコードを再利用可能なパッケージに入れる時間かもしれません.
これを行う方法がたくさんあります.バンドルRollup かなりの時間のためにされているが、セットアップのかなり多くを必要とします.現代の選択肢Parcel ボックスのほぼゼロコンフィグを提供しますが、特定の要件があれば設定することもできます.
The repo
The published package
ときに
Sign up on npmjs.com
これを行う方法がたくさんあります.バンドル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
Reference
この問題について(小包で独自のタイプライブラリを作成します.js), 我々は、より多くの情報をここで見つけました https://dev.to/ihaback/create-your-own-typescript-library-with-parceljs-3dh7テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol