NPM で TypeScript パッケージを作成して公開する方法

WBOY
リリース: 2024-08-18 07:08:07
オリジナル
1134 人が閲覧しました

Como Criar e Publicar Pacotes TypeScript no NPM
TypeScript の人気が高まるにつれて、多くの開発者はこの言語が提供する利点を活用するために静的に型付けされたパッケージを作成しています。この投稿では、TypeScript を使用して NPM パッケージを作成および公開するプロセスについて説明します。


1. 環境の構成

Node.js、NPM、TypeScript がインストールされていることを確認してください。次のコマンドを使用して TypeScript をグローバルにインストールできます:

npm install -g typescript
ログイン後にコピー

すべてが正しくインストールされていることを確認してください:

node -v
npm -v
tsc -v
ログイン後にコピー

2. プロジェクトの作成

プロジェクトのディレクトリを作成することから始めます:

mkdir meu-pacote-typescript
cd meu-pacote-typescript
ログイン後にコピー

Node.js プロジェクトを初期化します:

npm init
ログイン後にコピー

これにより、基本的なパッケージ情報を定義できる package.json ファイルが作成されます。

3. TypeScript の構成

次に、TypeScript プロジェクトを初期化します。

tsc --init
ログイン後にコピー

これにより、tsconfig.json ファイルが作成されます。必要に応じて編集しますが、一般的な構成は次のとおりです:

{
  "compilerOptions": {
    "target": "ES6",
    "module": "CommonJS",
    "declaration": true,
    "outDir": "./dist",
    "strict": true
  },
  "include": ["src/**/*"]
}
ログイン後にコピー

ここでは、CommonJS モジュールを使用して ES6 コードを生成し、型宣言 (宣言: true) を含めるように TypeScript コンパイラーを構成しています。コンパイルされたコードは dist.

ディレクトリに配置されます。

4. コードの記述

src ディレクトリを作成し、その中にindex.ts ファイルを作成します。

mkdir src
touch src/index.ts
ログイン後にコピー

index.ts ファイルにパッケージ コードを記述します。文字列を大文字に変換する簡単な関数を作成しましょう:

export function toUpperCase(str: string): string {
  return str.toUpperCase();
}
ログイン後にコピー

5. コードをコンパイルする

TypeScript を JavaScript にコンパイルします:

tsc
ログイン後にコピー

これにより、JavaScript ファイルと型宣言が dist ディレクトリに生成されます。

6. パッケージをローカルでテストする

パッケージをテストするには、別のプロジェクトにローカルにインストールします:

  1. テスト プロジェクト ディレクトリで、次のコマンドを実行します。
   npm install ../caminho-para-o-diretorio-do-seu-pacote/dist
ログイン後にコピー
  1. テスト プロジェクトで関数を使用します。
   import { toUpperCase } from 'nome-do-seu-pacote';

   console.log(toUpperCase('hello world')); // "HELLO WORLD"
ログイン後にコピー

これにより、JavaScript コードと型宣言の両方が正しく動作することが保証されます。

7. NPM での公開

すべてが正しく動作している場合は、パッケージを公開する準備ができています。

  1. NPM ログイン

NPM アカウントをまだお持ちでない場合は、アカウントを作成してログインします。

   npm login
ログイン後にコピー
  1. 出版物

公開する前に、package.json にビルド スクリプトを追加します。

   "scripts": {
     "build": "tsc"
   }
ログイン後にコピー

そして、package.json に出力パスを追加します:

   "main": "dist/index.js",
   "types": "dist/index.d.ts"
ログイン後にコピー

次にコンパイルして公開します:

   npm run build
   npm publish
ログイン後にコピー

パッケージ名がすでに存在する場合は、新しい名前を選択する必要があります。

8. パッケージの更新

新しいバージョンを公開するには、package.json のバージョンを変更し、npm run build を再度実行して、公開します。

npm publish
ログイン後にコピー

9. グッドプラクティス

  • ドキュメント: パッケージの使用方法を説明する README.md ファイルが含まれています。
  • テスト: Jest などのフレームワークを使用してテストを作成し、コードが期待どおりに動作することを確認します。
  • Lint 実行: ESLint や Prettier などのツールを使用して、コードの品質を維持します。
  • バージョン管理: SemVer に従ってパッケージのバージョン管理を行います。

結論

NPM で TypeScript パッケージを作成して公開すると、コードの品質が向上するだけでなく、パッケージを使用するユーザーに入力の利点も提供されます。このガイドに従うことで、JavaScript および TypeScript コミュニティとソリューションを共有する準備が整い、より強力で堅牢な開発エコシステムに貢献できます。

プロセスはわかったので、次の TypeScript パッケージの構築を始めてみてはいかがでしょうか?

以上がNPM で TypeScript パッケージを作成して公開する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:dev.to
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート