WeChat 애플릿을 개발하고 npm 패키지를 로드하는 방법은 무엇입니까? 방법 소개

이 글은 WeChat 미니 프로그램 개발에서 npm 패키지 기능을 사용하는 방법을 소개하며, 이는 WeChat 미니 프로그램의 개발 효율성을 크게 향상시킵니다. 또한 WeChat 미니 프로그램 시리즈 튜토리얼의 비디오 버전에 대한 업데이트이기도 합니다. [관련 학습 추천 : Mini 프로그램 개발 튜토리얼]

WeChat Mini 프로그램은 처음 출시되었을 때 npm을 지원하지 않았습니다. 이는 현재 많은 프론트엔드 개발자들이 npm 생태 환경에 익숙해진 후 WeChat Mini 프로그램에 대해 비판하고 있는 부분이기도 합니다. .

WeChat 미니 프로그램은 버전 2.2.1 이후 npm 패키지 로딩에 대한 지원을 추가하여 미니 프로그램이 npm을 사용하여 타사 패키지를 설치할 수 있도록 지원합니다.

WeChat 미니 프로그램의 기능 업데이트가 최근 업데이트되었으며 매우 강력합니다. 예를 들어, 빠르게 시작하고 경험할 수 있도록 WeChat 미니 프로그램 개발 플랫폼의 새로운 기능인 "클라우드 개발"을 소개했습니다.

미니 프로그램에 npm 패키지 로드

WeChat 미니 프로그램은 npm 패키지를 로드하기 위해 공식 문서를 사용합니다. 여기서는 npm 타사 라이브러리 miniprogram-datepicker를 로드합니다. 라이브러리는 음력의 날짜 선택 기능과 달리 그레고리력을 구현하는 데 사용됩니다. WeChat 애플릿의 공식 구성 요소는 그레고리력 시간만 선택할 수 있습니다.

터미널에서 WeChat 애플릿의 프로젝트 폴더를 찾아 npm 설치 명령을 통해 설치하세요.

여기서 –production 옵션을 사용하세요. 이렇게 하면 일부 비업무용 npm 패키지의 설치를 줄여 전체 소규모 프로그램 패키지의 크기를 줄일 수 있습니다.

Build npm 패키지

WeChat 미니 프로그램 개발 도구의 "도구" 메뉴에서 "Build npm" 명령을 클릭하면 npm 패키지를 빌드할 수 있습니다. 이 빌드는 npm 패키지를 로드 가능하고 사용 가능한 미니 프로그램으로 빌드할 수 있습니다. 가방.

모든 사람이 npm 패키지 게시에 언급된 다양한 요구 사항을 더 잘 이해할 수 있도록 원칙에 대한 간략한 소개는 다음과 같습니다.

우선 node_modules 디렉터리는 컴파일, 업로드 및 패키징에 관여하지 않으므로 작은 프로그램 npm 패키지를 사용하려는 경우 "npm 구축" 과정을 거친 후 가장 바깥쪽 node_modules와 동일한 수준 디렉터리 아래에 miniprogram_npm 디렉터리가 생성됩니다. 이 디렉터리에는 실제로 npm 패키지인 빌드 및 패키징된 npm 패키지가 저장됩니다. 미니 프로그램에서 사용됩니다.

빌드 및 패키징은 두 가지 유형으로 나뉩니다. 미니 프로그램 npm 패키지는 빌드 파일 생성 디렉터리의 모든 파일을 miniprogram_npm에 직접 복사합니다. 다른 npm 패키지는 js 파일 항목부터 시작하여 종속성 분석 및 패키징 프로세스를 거칩니다. 웹팩과 유사).

npm 패키지를 찾는 프로세스는 npm 패키지에 의존하는 파일이 있는 디렉터리에서 시작하여 사용 가능한 npm 패키지 또는 애플릿의 루트 디렉터리를 찾을 때까지 계층별로 검색합니다.

빌드가 완료되면 프로젝트에서 "npm 모듈 사용"이 선택되었는지 확인해야 합니다.

프로젝트에서 타사 모듈 사용

이전 실제 프로젝트에서 홈페이지에 이 npm 모듈이 로드되는 것을 테스트했습니다.

페이지에 날짜 선택기를 배치한 후 프로젝트를 저장하고 컴파일을 완료한 후 버튼을 클릭하면 컴포넌트의 로딩 상태를 확인할 수 있습니다.

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 소개를 방문하세요! !

위 내용은 WeChat 애플릿을 개발하고 npm 패키지를 로드하는 방법은 무엇입니까? 방법 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!