最適なJSモジュールの開発方法

今回は、最適なJSモジュールを開発する方法と、最適なJSモジュールを開発するための注意点についてお届けします。実際の事例を見てみましょう。

多くの人が独自の JavaScript モジュールを npm で公開しています。いくつかのモジュールを使用する過程で、「このモジュールは非常に便利ですが、xxx できたらもっと良いのに」というアイデアがよく出てきます。そこで、この記事ではモジュール利用者の視点からモジュールをより便利にする方法をまとめます。

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

Webpack とロールアップはどちらも、ES6 モジュールの静的な最適化 (ツリー シェーキングやスコープなど) をサポートしています。 Hoisting)、モジュールがない場合は、最初に package.json のモジュール フィールドを ES6 モジュールへの入り口として読み取ります。 メイン フィールドは、CommonJS モジュールへのエントリ ポイントとして機能します。通常のアプローチは、ES6 構文を使用してソース コードを記述し、モジュール パッケージ化ツールと構文変換ツールを組み合わせて使用​​して、 CommonJS モジュールと ES6 モジュール。メイン フィールドとモジュール フィールドの両方を提供できます。

TypeScript 型宣言ファイルを提供します

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

ベスト プラクティスは TypeScript を使用することです モジュールを作成すると、コンパイル時に型宣言が自動的に生成されます。さらに、ドキュメントを参照して宣言ファイルを手動で保守することもできます。モジュールのルートディレクトリにindex.d.tsを追加できます ファイルを宣言するか、package.json で型指定フィールドを宣言して宣言ファイルの場所を指定します。

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

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

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

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

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

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

たとえば、モジュールに 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 はオープン ソース プロジェクトとプライベート プロジェクトの両方に無料ですが、AppVeyor は月あたり 1500 分の実行時間制限があります。 オープンソース プロジェクトの場合、動作環境も無料です。

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

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

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

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

webpack+express を使用して複数ページのサイト開発を実装する手順

Webpack フレームワークの使用の概要

以上が最適なJSモジュールの開発方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。