ホームページ > 記事 > ウェブフロントエンド > jsモジュールをより便利にする方法

jsモジュールをより便利にする方法

小云云オリジナル: 2017-12-04 09:28:201403ブラウズ

npmで共有されているJavaScriptモジュールを使ったことがある人は多いと思いますが、そのJavaScriptモジュールがもっと使いやすければ良いという場合もあるので、この記事ではモジュールをより使いやすくする方法をモジュール利用者の観点からまとめていきます。使用します。

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

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

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

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

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

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

window という名前のグローバル変数 (たとえば、 !!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 バージョン番号、ダウンロード量、テスト合格ステータス、テストカバレッジ、ファイルサイズ、依存関係の有効期限が切れているかどうかなど、プロジェクトに関する多くの追加情報を提供できるさまざまなアイコンを提供します。、など。

上記の提案のほとんどはおまけにすぎませんが、モジュールをより使いやすくするため、独自のモジュールを開発する際に上記の提案が役立つことを願っています。

上記の内容は、js モジュールをより使いやすくする方法に関するものであり、皆様のお役に立てれば幸いです。

jsモジュールをより便利にする方法

関連記事