Steps for installing features of the micro-program componentized development framework Labrador

This article describes how to install the Labrador feature of the mini-program componentized development framework.

Features

Using the Labrador framework, developers can use tools to load massive NPM packages.

Supports ES6/7 standard code. using async/await can effectively avoid callback to hell.

Component reuse: the mini-program framework is encapsulated twice to implement component reuse and nesting.

Automated testing: it is very easy to write unit test scripts and can be automated without any additional configuration

Use Editor Config and ESLint to standardize the code style to facilitate team collaboration

Install

First, install Node. js and npm v3 in your system to download Node. js, and then run the following command to install the Labrador command line tool globally.

npm install -g labrador-cli

Initialize a project

Mkdir demo # Create a directory cd demo # jump to the directory npm init # Initialize the npm package labrador init # Initialize the labrador project

Project Directory structure

Demo # Project root directory ──. labrador # Labrador project configuration file ──. babelrc # babel configuration file ──. editorconfig # Editor Config ──. eslintignore # ESLint ignore configuration ──. eslintrc # ESLint syntax check configuration ── package. json ├ ── dist/# target directory ├ ── node_modules/└ ── src/# Source Code Directory ── app. js ── app. json ── app. less ── components/# General component directory ├ ── pages/# Page directory ── utils/

Note that all files in the dist directory are compiled and generated by the labrador command. do not modify them directly.

Configure development tools

After the project is initialized, use WebStorm or Sublime to open the project root directory as your favorite IDE. Open the web developer tool to create a project, and select the target dist directory in the local development directory.

Development process

Edit the source code under the src directory in the IDE such as WebStorm or Sublime, and then run the labrador build command in the project root directory to build the project, click the restart button in the left menu on the debugging interface of the web developer tool to view the effect.

During development, the web developer tool is only used for debugging and preview. do not modify the code on the editing interface of the web developer tool.

The web developer tool occasionally encounters errors, as it does not respond when you click the restart button. the debugging console outputs a large number of errors that do not support require files. the code files on the editing page are not displayed. This is because the labrador build command updates the entire dist directory, and the web developer tool encounters an exception when monitoring code changes. in this case, you only need to turn off the web developer tool and start it again.

You can also use the labrador watch command to monitor the code in the src Directory. the code is automatically built after the change. you do not need to manually run labrador build after every code edit.

So the best posture is:

Run labrador watch in the project

Encode and save in WebStorm

Switch to web developer tools for debugging and preview

Return to WebStorm encoding.

The above describes the detailed installation steps for the features of the mini-program componentized development framework Labrador. For more information, see other related articles in the first PHP community!