Étapes d'installation des fonctionnalités de Labrador, le cadre de développement de composants du mini-programme WeChat

Fonctionnalités

Grâce au framework Labrador, les outils de développement WeChat peuvent prendre en charge le chargement massif de packages NPM

Prend en charge le code standard ES6/7 et utilise async/await pour éviter efficacement l'enfer des rappels

Réutilisation des composants, le cadre de l'applet WeChat est réencapsulé, réalisant la réutilisation et l'imbrication des composants

Tests automatisés, il est très facile d'écrire des scripts de tests unitaires et les tests automatisés peuvent être effectués sans aucune configuration supplémentaire

Utilisez Editor Config et ESLint pour standardiser le style de code afin de faciliter la collaboration en équipe

Installation

Installez d'abord Node.js et npm v3 sur votre système, et téléchargez Node.js. puis exécutez la commande suivante. La commande installera l'outil de ligne de commande Labrador globalement.

npm install -g labrador-cli

Initialiser le projet

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

Structure du répertoire du projet

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/

Remarque : tous les fichiers du répertoire dist sont compilés et générés par la commande labrador, veuillez ne pas les modifier directement

Configurer les outils de développement

Une fois le projet initialisé, utilisez votre IDE préféré tel que WebStorm ou Sublime pour ouvrir le répertoire racine du projet. Ensuite, ouvrez l'outil de développement Web WeChat pour créer un nouveau projet et sélectionnez le répertoire cible dist pour le répertoire de développement local.

Processus de développement

Modifiez le code source dans le répertoire src dans un IDE tel que WebStorm ou Sublime, puis exécutez la commande labrador build dans le répertoire racine du projet pour construire le projet, puis déboguer dans l'outil de développement Web WeChat, cliquez sur le bouton Redémarrer dans le menu de gauche de l'interface pour voir l'effet.

Au cours de notre développement, les outils de développement Web WeChat ne sont utilisés que pour le débogage et la prévisualisation. Ne modifiez pas le code dans l'interface d'édition des outils de développement Web WeChat.

Les outils de développement Web WeChat feront occasionnellement des erreurs, qui se manifesteront par une absence de réponse lorsque vous cliquerez sur le bouton Redémarrer, la console de débogage génère un grand nombre d'erreurs qui ne peuvent pas nécessiter de fichiers et les fichiers de code ne sont pas affichés dans le interface d'édition. En effet, la commande labrador build mettra à jour l'intégralité du répertoire dist et l'outil de développement Web WeChat rencontrera des exceptions lors de la surveillance des modifications de code. Dans ce cas, il vous suffit de fermer l'outil de développement Web WeChat et de le redémarrer.

Nous pouvons également utiliser la commande labrador watch pour surveiller le code dans le répertoire src et le construire automatiquement lorsque des modifications se produisent. Il n'est pas nécessaire d'exécuter manuellement labrador build à chaque fois après avoir modifié le code.

Donc, la meilleure posture est :

Exécutez labrador watch dans le projet

Codez dans WebStorm, enregistrez

Passer aux outils de développement Web WeChat Déboguer et prévisualiser dans WebStorm

puis revenez au codage dans WebStorm

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!