web-dev-qa-db-ja.com

TypescriptでNPMモジュールを書く

私は最初のNPMモジュールに取り組んでいます。私は以前TypeScriptで簡単に作業しましたが、多くのモジュールで利用可能な定義ファイルがなかったことが大きな問題でした。そのため、TypeScriptでモジュールを作成することをお勧めします。

しかし、そのための最良の方法に関する情報は見つかりません。この関連する質問「 coffeescriptでnpmパッケージを書くことはできますか？ 」を見つけました。人々はjavascriptファイルの公開のみを提案しています。ただし、coffeescriptファイルとは対照的に、TypeScriptファイルは、TypeScriptアプリケーション内で使用される場合に実際に役立つ場合があります。

NPMモジュールを公開するときにTypeScriptファイルを含めるべきですか、それともjavascriptファイルのみを公開し、生成された.d.tsファイルをDefinitelyTypedに提供する必要がありますか？

javascriptnode.jsnpmtypescript
89
Andreas Gassmann

TypeScriptで記述されたNodeモジュールのサンプルは次のとおりです。 https://github.com/basarat/ts-npm-module

このサンプルモジュールを使用するTypeScriptプロジェクトのサンプルを次に示します https://github.com/basarat/ts-npm-module-consume

基本的にあなたがする必要があります：

  • commonjsおよびdeclaration:trueでコンパイルします
  • .d.tsファイルを生成します

その後

  • 生成された.d.tsをIDEに読んでもらいます。

Atom-TypeScriptは、これに関する素晴らしいワークフローを提供するだけです。 https://github.com/TypeStrong/atom-TypeScript#packagejson-support

78
basarat

2018年のTypeScript 2.xでの推奨方法：

  • 通常のようにプロジェクトを作成します（テストとすべてを使用）
  • タイプを生成するには、declaration: trueをtsconfig.jsonに追加します。
  • index.tsを介してAPIをエクスポートします
  • package.jsonで、生成されたタイピングをポイントします。たとえば、outDirがdistの場合、"types": "dist/index.d.ts"をパッケージjsonに追加します。
  • package.jsonで、メインエントリファイルをポイントします。たとえば、outDirがdistで、メインエントリファイルがindex.jsである場合、"main": "dist/index.js"をpackage.jsonに追加します。
  • .npmignoreを作成して、不要なファイル（ソースなど）を無視します。
  • npm publishを使用してnpmに公開します。更新にはsemver仕様を使用します（パッチ/バグ修正npm version patch、破損しない追加npm version minor、APIの変更を壊すnpm version major）

インターネット上のこのトピックに関するすべての古いリソース（このページのものなど）を選別するのにしばらく時間がかかったので、それを how-to-write-a-TypeScript -library 最新の動作minimalの例.

65
bersling

これは、TypeScript 1.8.10を使用した最近の回答です。

私のプロジェクト構造は次のとおりです。

|
|--- src
|--- test
|--- dist     <= My gulp file compiles and places the js, sourcemaps and .d.ts files here
|      |--- src
|      |--- test
|--- typings
.gitignore
.npmignore
gulpfile.js
package.json
README.md
tsconfig.json
tslint.json
typings.json

.npmignoreに以下を追加して、無関係なファイルを含めないようにし、パッケージをインポートして動作させるために最小限にします。

node_modules/
*.log
*.tgz

src/
test/
gulpfile.js
tsconfig.json
tslint.json
typings.json
typings
dist/test

私の.gitignoreには：

typings

# ignore .js.map files
*.js.map
*.js
dist

私のpackage.jsonには：

"main": "dist/src/index.js",
"typings":  "dist/src/index.d.ts",

今実行します：npm pack

結果のファイル（解凍した場合）は次の構造になります。

|
|--- dist
|       |--- src
|              |
|              index.js
|              index.js.map
|              index.d.ts
|
package.json
README.md

今、私はこれをライブラリとして使用したいプロジェクトに行き、次のように入力します：npm install ./project-1.0.0.tgz

正常にインストールされます。

ここで、npm import Project = require("project");をインストールしたばかりのプロジェクトにindex.tsファイルを作成します

Project.と入力すると、この演習全体のポイントであったIntellisenseオプションが表示されます。

これが、他の誰かが自分のTypeScript npmプロジェクトをより大きなプロジェクトの内部ライブラリとして使用するのに役立つことを願っています。

PS：他のプロジェクトで使用できるnpmモジュールにプロジェクトをコンパイルするこのアプローチは、.dllの.NETを連想させると思います。各プロジェクトがnpmパッケージを生成し、ソリューション内の別のプロジェクトで依存関係として使用できるVS Codeのソリューションでプロジェクトが編成されることを想像できます。

私がこれを理解するのにかなりの時間がかかったので、誰かがここで立ち往生している場合に備えて投稿しました。

クローズドバグについては、 https://github.com/npm/npm/issues/11546 にも投稿しました。

この例はGithubにアップロードされています： vchatterji/tsc-seed

57
Varun Chatterji

型定義の代わりに、元のTypeScriptソースを公開する必要があります。 package.jsonで、「types」プロパティが* .tsファイルを指すようにします。

*.d.tsは既存のJSライブラリに注釈を付けるのに適していますが、コンシューマとしては、型定義と下位レベルの生成されたJSコードを切り替えるよりもTypeScriptコードを読みたいです。

5
Sven Efftinge

私は主に Varun Chatterji による提案に従います

ただし、単体テストとコードカバレッジの完全な例を示し、npmに公開し、javascriptまたはTypeScriptを使用してインポートします。

このモジュールはTypeScript 2.2を使用して記述されており、prepublishを使用してコードをコンパイルし、npmに公開する前にtscフックを構成することが重要です。

https://github.com/sweetim/haversine-position

https://www.npmjs.com/package/haversine-position

5
Tim

Losslessでは、npmパッケージ用のワンストップTypeScript開発ツールを作成しました： https://gitzone.gitlab.io/npmts/

1
philkunz