WeChatアプレットにnpmパッケージをロードする方法

この記事では、WeChat ミニ プログラムの開発効率を大幅に向上させる、WeChat ミニ プログラムの開発における npm パッケージ機能の使用方法を紹介します。WeChat ミニ プログラムの開発を学習している友人の参考になれば幸いです。

WeChat アプレットに npm パッケージをロードする方法

WeChat アプレットは、リリース当初は npm をサポートしていませんでした。現在、多くのフロントエンド開発者は、npm の生態環境に慣れた後、WeChat ミニ プログラムを批判しています。

WeChat ミニ プログラムでは、バージョン 2.2.1 以降、npm パッケージの読み込みのサポートが追加され、npm を使用したサードパーティ パッケージのインストールがサポートされるようになりました。

最近、WeChat ミニ プログラムの機能アップデートが行われ、非常に強力になっており、例えば、以前紹介した WeChat ミニ プログラム開発プラットフォームの新機能「クラウド開発」をすぐに体験することができます。

推奨学習: ミニ プログラム開発

ミニ プログラムでの npm パッケージの読み込み

npm パッケージの読み込みとに関する WeChat ミニ プログラム公式ドキュメントの使用については、こちらを参照してください。この実践的な部分では、npm サードパーティ ライブラリの miniprogram-datepicker をロードします。この種のライブラリは、グレゴリオ暦と太陰暦の日付選択機能を実装するために使用されますが、公式コンポーネントは、 WeChat アプレットは、グレゴリオ暦の時刻を 1 つだけ選択するだけです。

ターミナルで WeChat アプレットのプロジェクト フォルダーを見つけ、npm インストール コマンドを使用してインストールします。

ここでは必ず –production オプションを使用してください。これにより、ビジネス以外の npm パッケージをインストールする必要性が減り、小さなプログラム パッケージ全体のサイズが削減されます。

npm パッケージのビルド

WeChat アプレット開発ツールの [ツール] メニューにある [npm のビルド] コマンドをクリックして、npm パッケージをビルドします。このビルドでは npm を実行できます。パッケージは、小さなプログラムにロードして使用できるパッケージに組み込まれています。

npm パッケージの公開で言及されているさまざまな要件を誰もがよりよく理解できるように、ここで原則を簡単に紹介します:

まず第一に、node_modules ディレクトリはコンパイルに参加しません。アップロードとパッケージ化が行われるため、ミニ プログラムが npm パッケージを使用したい場合は、「npm のビルド」プロセスを実行する必要があります。miniprogram_npm ディレクトリは、最も外側の node_modules と同じレベルのディレクトリの下に生成され、ビルドされたモジュールとパッケージが格納されます。パッケージ化された npm パッケージ (ミニ プログラムが実際に使用するもの) npm パッケージ。

ビルドとパッケージ化は 2 つのタイプに分けられます: ミニ プログラムの npm パッケージは、ビルド ファイル生成ディレクトリ内のすべてのファイルを miniprogram_npm に直接コピーします。他の npm パッケージは、依存関係の分析とパッケージ化のプロセスを経て、エントリ js ファイル (webpack に似ています)。

npm パッケージを見つけるプロセスは、npm の実装と似ています。npm パッケージに依存するファイルが配置されているディレクトリから開始し、利用可能な npm パッケージまたはルート ディレクトリが見つかるまで、レイヤーごとに検索します。アプレットの。

#ビルドが完了したら、プロジェクトで「npm モジュールを使用する」がチェックされていることを確認する必要があります。

プロジェクトでのサードパーティ モジュールの使用

以前の実際のプロジェクトでは、ホームページでのこの npm モジュールの読み込みをテストしました。

ページ上に日付ピッカーをレイアウトし、プロジェクトのコンパイルを保存して完了したら、ボタンをクリックしてコンポーネントの読み込みステータスを確認します。

WeChat アプレット開発チュートリアルの詳細については、PHP 中国語 Web サイト に注目してください。

以上がWeChatアプレットにnpmパッケージをロードする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。