JavaScriptモジュールの最適化

より良い JavaScript モジュールと関数を開発する方法を共有したいと思います。興味のある友人はそこから学ぶことができます。

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

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

上記は私がまとめた文章です、皆様のお役に立てれば幸いです

関連記事:

vueにMint-UIをインストールする方法

VSCode で React Native 開発環境を構成する方法

Node.js で fs.renameSync を呼び出すときにエラーはありますか?

npmを使用してvueプロジェクトを作成します(詳細なチュートリアル)

node.jsでfs.renameを使用して強制的な名前変更を実装する方法

JavaScriptを介してデータベースに接続します

laydateでロードします。 jsのパスにエラーがあります

vue-routerに渡すルートパラメータの実装方法

jQueryを使ってテーブルを操作してセル結合を実現する方法

nodejs+expressでファイルアップロードを実装する方法

Vue+で SpringBootでブログ管理プラットフォームを実装する方法

nodejsで最大コールスタックエラーを超えた場合の解決方法

Vueの非同期コンポーネントの例があります

循環の実装方法Vue.js のコンポーネント間の参照

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