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

不言
リリース: 2018-10-17 14:31:23
転載
5332 人が閲覧しました

この記事の内容は、小さなプログラムでの 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パッケージを使用する方法
#ビルドが完了したら、プロジェクトで「npm モジュールを使用する」がチェックされていることを確認する必要があります。

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

3. npm パッケージ

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

const package = require('packageName')
ログイン後にコピー
npm パッケージのカスタム コンポーネントを使用します:

{
    "usingComponents": {
      "datepicker": "miniprogram-datepicker"
    }
}
ログイン後にコピー
miniprogram-datepicker コンポーネント実行効果

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

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

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

関連ラベル:
ソース:segmentfault.com
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!