ミニプログラムでnpmパッケージを使用する方法

この記事の内容は、小さなプログラムでの npm パッケージの使用方法についてです。必要な方は参考にしていただければ幸いです。

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

1. ミニ プログラムに npm パッケージをロードします。

npm install miniprogram-datepicker --production

node_modules は、ミニ プログラムのルート ディレクトリまたはルート ディレクトリの各サブディレクトリにあります。ミニプログラム中盤。ただし、ミニ プログラムのルート ディレクトリの外に置くことはできません。 --production オプションを使用すると、ビジネスに関係のないいくつかの npm パッケージのインストールを減らすことができ、それによって小さなプログラム パッケージ全体のサイズを減らすことができます。

2. npm パッケージをビルドします

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

node_modules ディレクトリはコンパイル、アップロード、パッケージ化には関与しないため、アプレットが npm パッケージを使用したい場合は、「build npm」プロセスを実行する必要があります。同じレベルにディレクトリが生成されます。 miniprogram_npm ディレクトリには、ビルドおよびパッケージ化された npm パッケージが保存されます。これは、ミニ プログラムによって実際に使用される npm パッケージです。

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

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

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

3. npm パッケージ

#js を使用して、npm パッケージを導入します。

const package = require('packageName')

npm パッケージのカスタム コンポーネントを使用します:

{
    "usingComponents": {
      "datepicker": "miniprogram-datepicker"
    }
}

miniprogram-datepicker コンポーネント実行効果

## その他: WeChat ミニ プログラム npm サポート ドキュメント: https://developers.weixin.qq...

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