WeChat ミニ プログラム コンポーネント開発フレームワークである Labrador の機能インストール手順

特徴

Labradorフレームワークを使用すると、WeChat開発者ツールが大規模なNPMパッケージのロードをサポートできるようになります

ES6/7標準コードをサポートし、async/awaitを使用するとコールバック地獄を効果的に回避できます

コンポーネントの再利用、WeChatアプレットフレームワークが再加工されましたカプセル化コンポーネントの再利用とネストを実現します

自動テスト、単体テストスクリプトの記述が非常に簡単で、追加構成なしで自動テストを実行できます

エディタ設定とESLintを使用してコードスタイルを標準化し、チームのコラボレーションを促進します

インストール

まず、システムに Node.js と npm v3 をインストールします。Node.js をダウンロードし、次のコマンドを実行して、Labrador コマンド ライン ツールをグローバルにインストールします。

npm install -g labrador-cli

プロジェクトを初期化します

mkdir demo           # 新建目录
cd demo              # 跳转目录
npm init             # 初始化npm包
labrador init        # 初始化labrador项目

プロジェクトのディレクトリ構造

demo                 # 项目根目录├── .labrador        # Labrador项目配置文件├── .babelrc         # babel配置文件├── .editorconfig    # Editor Config├── .eslintignore    # ESLint 忽略配置├── .eslintrc        # ESLint 语法检查配置├── package.json
├── dist/            # 目标目录├── node_modules/
└── src/             # 源码目录
    ├── app.js
    ├── app.json
    ├── app.less
    ├── components/  # 通用组件目录
    ├── pages/       # 页面目录
    └── utils/

注: dist ディレクトリ内のすべてのファイルは、labrador コマンドによってコンパイルおよび生成されます。直接変更しないでください

開発ツールを設定します

プロジェクトの初期化後、慣れているように WebStorm や Sublime などを使用します。IDE はプロジェクトのルート ディレクトリを開きます。次に、WeChat Web 開発者ツールを開いて新しいプロジェクトを作成し、ローカル開発ディレクトリの dist ターゲット ディレクトリを選択します。

開発プロセス

WebStorm や Sublime などの IDE の src ディレクトリにあるソース コードを編集し、プロジェクトのルート ディレクトリで labrador build コマンドを実行してプロジェクトをビルドし、デバッグの左側のメニューで [再起動] をクリックします。 WeChat Web 開発者ツール ボタンのインターフェイスで効果を確認します。

私たちの開発では、WeChat Web 開発者ツールはデバッグとプレビューにのみ使用されます。WeChat Web 開発者ツールの編集インターフェイスでコードを変更しないでください。

WeChat Web 開発者ツールでは、[再起動] ボタンをクリックしても応答がないというエラーが発生する場合があり、デバッグ コンソールではファイルを必要としない大量のエラーが出力され、コード ファイルは編集インターフェイスに表示されません。これは、labrador ビルド コマンドによって dist ディレクトリ全体が更新され、コードの変更を監視するときに WeChat Web 開発者ツールで例外が発生するためです。この場合、必要なのは WeChat Web 開発者ツールを閉じて、再度起動することだけです。

labrador watch コマンドを使用して src ディレクトリ内のコードを監視し、変更が発生したときに自動的にビルドすることもできます。コードを編集した後に毎回手動で labrador ビルドを実行する必要はありません。

したがって、最良の姿勢は次のとおりです:

プロジェクトで labrador watch を実行します

WebStorm でエンコードし、保存します

デバッグとプレビューのために WeChat Web 開発者ツールに切り替えます

WebStorm のコードに戻ります

以上がWeChat ミニ プログラム コンポーネント開発フレームワークである Labrador の機能インストール手順の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。