wxapp boilerplate 다운로드 - wxapp boilerplate 소스 코드 다운로드

wxapp boilerplate

AI 소스 코드

1.0.0

다운로드

wxapp-상용구

webpack , babel , scss 사용하여 개발된 WeChat/Alipay 미니 프로그램 프로젝트 스캐폴딩

기능

node_modules 모듈 참조 지원
../../../ 와 같은 모듈 참조를 방지하기 위한 alias 구성 지원
async/await 포함하여 babel 통해 더욱 풍부한 ES6 호환성을 지원합니다.
내장된 promise 및 lodash ( lodash 요청 시 해당 모듈을 도입하지만 전부는 아님)
scss 사용하여 유용한 mixins 과 extends 내장된 .wxss 파일을 작성하세요.
개발을 지원하기 위해 __DEV__ 및 process.env.NODE_ENV 전역 상수를 제공합니다.
WeChat 및 Alipay 애플릿으로의 자동 컴파일 지원
__WECHAT__ 및 __ALIPAY__ 전역 상수를 제공하여 WeChat 애플릿인지 Alipay 애플릿인지 확인합니다.
명령줄을 통해 WeChat 애플릿 페이지를 빠르게 생성하세요
production 환경에서 코드 압축 지원

시작하기

Node.js(>= v4.2 )와 Yarn 또는 npm이 설치되어 있는지 확인하세요.

git clone 이 프로젝트
명령줄 도구를 사용하여 이 디렉터리로 cd 하고 yarn 실행하여 종속 모듈을 설치합니다.
yarn start 개발 시작
WeChat 개발자 도구를 통해 프로젝트에 dist/wechat 디렉터리를 추가합니다.

내장 명령

yarn start 파일 변경 사항을 모니터링하고 자동으로 다시 컴파일할 수 있는 WeChat 애플릿 프로젝트를 개발하기 위해 webpack 시작합니다.
yarn start:alipay 파일 변경 사항을 모니터링하고 자동으로 다시 컴파일할 수 있는 Alipay 애플릿 프로젝트를 개발하기 위해 webpack 시작합니다.
yarn build production 환경에 대한 코드를 dist/wechat 및 dist/alipay 로 컴파일하고 생성합니다.
yarn lint:build yarn build 명령을 실행하고 eslint 및 stylelint를 사용하여 코드 사양을 확인합니다.
yarn prettier prettier 를 실행하여 src 디렉터리의 코드 형식을 지정합니다.
yarn create-page WeChat 애플릿 페이지를 빠르게 생성합니다( create-page 에 대한 자세한 사용법은 create-wxapp-page를 참조하세요).

WeChat 및 Alipay 미니 프로그램과 호환 가능

개발자는 WeChat 및 Alipay 애플릿을 개발하기 위해 소스 코드 세트를 선택할 수 있습니다. 이 스캐폴딩은 wxml axml 로의 자동 컴파일, wx:attr 에서 a:attr 로의 변환, API wx 에서 my 로의 변환 및 그 반대로를 지원합니다. 그러나 개별 인터페이스는 플랫폼에 따라 조금씩 다르며 개발자는 __WECHAT__ 또는 __ALIPAY__ 통해 이를 동적으로 처리할 수 있습니다.

파일 복사

wxml 또는 axml 에 동적으로 가져온 파일(예: src="{{'images/' + type + '.png'}}" )이 있는 경우 webpack은 해당 파일을 동적으로 가져올 수 없으므로 패키징 후 파일이 누락될 수 있습니다. .

이런 상황이 발생하면 copy-webpack-plugin을 통해 문제를 해결하고 전체 images 디렉터리를 dist 에 복사할 수 있습니다.

이 플러그인에는 이미 이 스캐폴딩에 이 플러그인이 내장되어 있습니다. 사용 편의성을 위해 package.json 에 copyWebpack 문자열 배열을 추가하여 디렉터리나 파일을 자동으로 복사할 수도 있습니다. 예를 들어:

패키지.json

 {
  // ...
  "copyWebpack" : [ "images" , "icons" ]
}

yarn start 또는 yarn build 실행하면 src/images 및 src/icons 디렉터리가 dist/wechat/images 및 dist/wechat/icons 디렉터리에 자동으로 복사됩니다(Alipay 애플릿에도 동일하게 적용됨).