WeChat 미니 프로그램 구성 요소 개발 프레임워크인 Labrador의 기능 설치 단계

기능

WeChat 개발자 도구는 Labrador 프레임워크를 사용하여 대규모 NPM 패키지 로드를 지원할 수 있습니다

ES6/7 표준 코드를 지원하고 async/await를 사용하여 콜백 지옥을 효과적으로 방지합니다

구성 요소 재사용, WeChat 미니 프로그램 프레임워크가 다시 캡슐화되어 구성 요소 재사용 및 중첩을 실현

자동 테스트, 단위 테스트 스크립트 작성이 매우 쉽고 추가 작업 없이 자동 테스트 수행 가능 구성

Editor Config와 ESLint를 사용하여 코드 스타일을 표준화하여 팀 협업을 촉진하세요

설치

먼저 시스템에 Node.js와 npm v3를 설치하세요. 그런 다음 다음을 실행합니다. 이 명령은 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 웹 개발자 도구를 열어 새 프로젝트를 생성하고 로컬 개발 디렉터리에 대한 dist 대상 디렉터리를 선택합니다.

개발 과정

WebStorm, Sublime 등 IDE에서 src 디렉터리의 소스 코드를 편집한 후, 프로젝트 루트 디렉터리에서 labrador build 명령을 실행하여 프로젝트를 빌드한 후 디버그합니다. WeChat 웹 개발자 도구에서 인터페이스의 왼쪽 메뉴에 있는 다시 시작 버튼을 클릭하면 효과를 볼 수 있습니다.

개발 중에 WeChat 웹 개발자 도구는 디버깅 및 미리보기에만 사용됩니다. WeChat 웹 개발자 도구의 편집 인터페이스에서 코드를 수정하지 마세요.

WeChat 웹 개발자 도구에서는 때때로 오류가 발생하는데, 이는 다시 시작 버튼을 클릭할 때 응답이 없는 것으로 나타나고, 디버깅 콘솔은 파일을 요구할 수 없는 많은 오류를 출력하며, 코드 파일은 편집 인터페이스. 이는 labrador 빌드 명령이 전체 dist 디렉터리를 업데이트하고 WeChat 웹 개발자 도구에서 코드 변경 사항을 모니터링할 때 예외가 발생하기 때문입니다. 이 경우 WeChat 웹 개발자 도구를 닫고 다시 시작하기만 하면 됩니다.

또한 labrador watch 명령을 사용하여 src 디렉터리의 코드를 모니터링하고 변경 사항이 발생할 때 자동으로 빌드할 수 있습니다. 코드를 편집한 후 매번 labrador 빌드를 수동으로 실행할 필요가 없습니다.

따라서 가장 좋은 자세는 다음과 같습니다.

프로젝트에서 labrador watch 실행

WebStorm에서 코드, 저장

WeChat 웹 개발자 도구로 전환 디버그 및 미리보기 WebStorm

에서 WebStorm

코딩으로 돌아갑니다.

위 내용은 WeChat 미니 프로그램 구성 요소 개발 프레임워크인 Labrador의 기능 설치 단계의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!