より良いJavaScriptモジュールを開発する方法

多くの人々が npm で自分が開発した JavaScript モジュールを公開し、モジュールを使用する過程で「このモジュールはとても役立ちますが、xxx があればもっと良いのに」という考えを持つことがよくあります。したがって、この記事ではモジュールのユーザーの視点から、モジュールをより使いやすくするための方法をまとめます。

提供 ES6 モジュールのエントリーポイント

webpack と rollup は ES6 モジュールに対して静的最適化（例えば Tree Shaking と Scope Hoisting）を行いますが、それらは優先して package.json の module フィールドを読み取り ES6 モジュールのエントリーポイント、module が存在しない場合には main フィールドを読み取り CommonJS モジュールのエントリーポイントとして使用します。一般的な方法は、ES6 ソースコードを書き、モジュールパッケージツールとコンバージョンツールを組み合わせて CommonJS モジュールと ES6 モジュール、そうすることで main と module フィールドを同時に提供できます。

提供 TypeScript のタイプ宣言ファイル

如果你的用户使用了 TypeScript 但你的模块没有提供声明文件，他们就不得不在项目中添加一段代码避免 TypeScript 的编译错误；另外，这样做并不只是对使用 TypeScript 的用户友好，因为大部分代码编辑器（Webstorm、VS Code 等）都能识别 TypeScript 的类型声明，它们可以据此提供更精准的コードヒント，并在用户传入错误的パラメータの数やタイプ時にヒントを出します。

最善の方法は TypeScript であなたのモジュールを書くことで、コンパイル時に自動的にタイプ宣言が生成されます。それに加えて、ドキュメントを参照して手動で宣言ファイルをメンテナンスすることもできます。あなたのモジュールのルートディレクトリに index.d.ts ファイルを追加したり、package.json に typings フィールドを宣言して宣言ファイルの場所を指定したりすることができます。

モジュールを Node.js とブラウザで同時に実行する方法

window という全てのグローバル変数（例えば !!typeof window）があるかどうかを検出して、モジュールが Node.js かブラウザで実行されているかを判断し、異なる方法で機能を実現することができます。

これは一般的な方法ですが、ユーザーがモジュールパッケージツールを使用している場合、Node.js とブラウザの実装が最終出力ファイルに含まれることになります。この問題に対して、オープンソースコミュニティは package.json に browser フィールドを追加する提案をしました。現在、webpack と rollup はこのフィールドをサポートしています。

browser フィールドには2つの使用方法があります：

browser フィールドにファイルパスを提供して、ブラウザ端で使用するモジュールエントリとして使用しますが、パッケージツールは browser フィールドで指定されたファイルパスを優先して使用するため、module フィールドは無視されます。これにより、パッケージツールはあなたのコードを最適化しません。詳細はこの問題を参照してください。

一部のファイルのみを置き換えたい場合は、オブジェクトを宣言することができます。

例えば、あなたのモジュールには http.js と xhr.js の2つのファイルがあります。最初のファイルは Node.js の http モジュールを使用してリクエストを送信し、もう一方はブラウザの XMLHTTPRequest で同じ機能を実現しています。適切なファイルを使用するためには、あなたのモジュールコードでは常に require(‘) を使用する必要があります。/path/to/http.js')、そして package.json で宣言します：

{
 "browser": {
  "./path/to/http.js": "./path/to/xhr.js"
 }
}

その結果、あなたのモジュールがパッケージツールで使用される際には、パッケージツールは最終出力ファイルに xhr.js のコードのみを含めます。

さまざまなサービスであなたのプロジェクトを武装しましょう

大部分 JavaScript プロジェクトはオープンソースで、オープンソースコミュニティも多くの無料サービスを提供しており、それらはあなたのプロジェクトにより強力なサポートを提供できます。ここでは、いくつかの比較的よく使われるものを挙げます。

プロジェクトで最もよく使用されるサービスは、継続的統合です。継続的統合サービスは、テスト、コードスタイルの検出、パッケージ化などのタスクをサーバー上に配置し、コードを提交した際に自動的に実行します。一般的にはTravis CI、CircleCI、AppVeyorが使用されます。Travis CIはオープンソースプロジェクトに対して無料で、LinuxとOS Xの実行環境を提供します；CircleCIはオープンソースとプライベートプロジェクトの両方に対して無料ですが、月に一定の制限があります。 1500分の実行時間制限；AppVeyorはWindowsの実行環境を提供し、オープンソースプロジェクトに対して無料です。

テストが完了したら、テストカバレッジをCoverallsにアップロードすることもできます。このサービスは、オンラインでコードのテストカバレッジを確認することができます。

あなたのモジュールが様々なバージョンのブラウザやプラットフォームで十分にテストされるように、Sauce LabsやBrowserStackを使用することもできます。これらはオープンソースプロジェクトに対して無料ですが、メールで申請する必要があります。

最後に、Shields IOは、プロジェクトに多くの追加情報を提供する様々なアイコンを提供しています。これらのアイコンは、npmバージョン番号、ダウンロード数、テストの通過状況、テストカバレッジ、ファイルサイズ、依存関係の有効期限など、多くの情報を含みます。

これで、良いJavaScriptモジュールを開発する方法についての全ての情報を皆さんに提供しました。何か不明な点があれば、下のコメント欄で議論してください。あなたのナイアラチュートリアルへのサポートに感謝します。

声明：本文の内容はインターネットから取得しており、著作権者に帰属します。インターネットユーザーにより自発的に提供された内容であり、本サイトは所有権を持ちません。また、人工的な編集は行われていません。著作権侵害を疑う内容があれば、メールを送信してください：notice#oldtoolbag.com（メール送信時は、#を@に変更してください）で通報し、関連する証拠を提供してください。一旦確認がとれましたら、本サイトは直ちに侵害を疑われるコンテンツを削除します。