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

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

高洛峰
リリース: 2017-03-22 16:03:36
オリジナル
1900 人が閲覧しました

特徴

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

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート