より優れた JavaScript モジュールの開発を説明する例-jsチュートリアル-php.cn

より優れた JavaScript モジュールの開発を説明する例

小云云

リリース： 2017-12-23 15:06:28

オリジナル

1326 人が閲覧しました

多くの人が独自に開発した JavaScript モジュールを npm で公開しています。いくつかのモジュールを使用する過程で、「このモジュールは非常に便利ですが、xxx を使用できた方が良いのではないか」というアイデアがよく出てきます。そこで、この記事ではモジュール利用者の視点からモジュールをより便利にする方法をまとめます。この記事は主に、より良い JavaScript モジュールと関数を開発する方法を共有し、皆様のお役に立てれば幸いです。

ES6 モジュールへの入り口を提供します

webpack と rollup は両方とも、ES6 モジュールの静的最適化 (ツリーシェイキングやスコープホイスティングなど) をサポートしており、ES6 への入り口として package.json 内のモジュールフィールドの読み取りを優先します。モジュールがない場合は、メインフィールドが CommonJS モジュールのエントリポイントとして読み取られます。通常のアプローチは、ES6 構文を使用してソースコードを記述し、モジュールパッケージングツールと構文変換ツールを組み合わせて CommonJS モジュールと ES6 モジュールを生成し、main フィールドと module フィールドを同時に提供できるようにすることです。

TypeScript の型宣言ファイルを提供する

ユーザーが TypeScript を使用しているが、モジュールが宣言ファイルを提供していない場合、TypeScript のコンパイルエラーを回避するためにプロジェクトにコードを追加する必要がありますが、これは当てはまりません。ほとんどのコードエディター (Webstorm、VS Code など) は TypeScript の型宣言を認識でき、それに応じてより正確なコードプロンプトを提供し、ユーザーが間違った数値や型を渡したことを検出できるため、TypeScript を使用するユーザーにとって使いやすいです。プロンプトが表示されたら、パラメータのプロンプトを表示します。

最良の方法は、TypeScript を使用してモジュールを記述することです。型宣言はコンパイル中に自動的に生成されます。さらに、ドキュメントを参照して宣言ファイルを手動で保守することもできます。モジュールのルートにindex.d.tsファイルを追加することも、package.jsonのtypesフィールドに宣言ファイルの場所を指定することもできます。

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

window という名前のグローバル変数 (!! など) があるかどうかを検出することで、モジュールが現在 Node.js で実行されているかブラウザーで実行されているかを判断できます。 typeof window) を選択し、さまざまな方法を使用して機能を実装します。

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

ブラウザフィールドは 2 つの方法で使用できます:

ブラウザ側で使用する場合は、ブラウザフィールドへのファイルパスをモジュールエントリとして指定します。ただし、パッケージ化ツールの使用が優先されることに注意してください。ブラウザフィールドでモジュールエントリとして指定されたファイルパスが含まれるため、モジュールフィールドは無視され、パッケージ化ツールがコードを最適化できなくなります。詳細については、この質問を参照してください。

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

たとえば、モジュールに http.js と xhr.js という 2 つのファイルがあるとします。最初のファイルは Node.js の http モジュールを使用してリクエストを開始し、もう 1 つのファイルはブラウザで 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 を提供します

テストの実行後、テストカバレッジを Coveralls にアップロードすることもできます。このサービスを使用すると、コードのテストカバレッジをオンラインで参照できます。

さまざまなバージョンのブラウザーやプラットフォームでモジュールを完全にテストしたい場合は、Sauce Labs と BrowserStack を使用することもできます。どちらもオープンソースプロジェクトには無料ですが、申請するには電子メールを送信する必要があります。

最後に、Shields IO は、npm バージョン番号、ダウンロード量、テスト合格ステータス、テストカバレッジ、ファイルサイズ、依存関係の有効期限が切れているかどうかなど、プロジェクトに関する多くの追加情報を提供できるさまざまなアイコンを提供します。、など。