特徴
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 サイトの他の関連記事を参照してください。