소포를 사용하여 HyperApp 앱을 묶고 GitHub 페이지에 배포하십시오.

이 튜토리얼은 하이퍼 app 응용 프로그램을 로컬로 구축하여 소포로 번들링하고 GitHub 페이지에 배포하는 것을 보여줍니다. 효율적인 워크 플로우를 위해 ES6 모듈, JSX, SCSS 및 NPM 스크립트를 활용하는 할 일 목록 앱을 만들 것입니다.

주요 개념 :

소포 :

제로 구성 모듈 Bundler 빌드 프로세스를 단순화합니다 github 페이지 : 정적 웹 사이트를 쉽게 호스팅하기위한 플랫폼 hyperapp : 웹 앱 구축을위한 최소 JavaScript 프레임 워크 es6 모듈 & jsx :

최신 JavaScript 기능은 소포에 의해 자동으로 처리됩니다. scss : 스타일링에 사용되며, 소포에 의해 처리됩니다 NPM Scripts : 서버 시작, 빌드 및 배포와 같은 작업을 자동화합니다.

프로젝트 설정 :

• 프로젝트 디렉토리를 만듭니다 ()

  npm () 초기화 hyperApp ()를 설치하십시오 필요한 폴더 구조를 만듭니다 () 디렉토리 내에서 다음 파일을 만듭니다 : , , . 디렉토리 내에서 다음 파일을 만듭니다. 디렉토리에서 및

를 작성하십시오
• 코드 추가 : , 및 에 대한 코드는 원래 기사에 제공된 예제와 유사하며, es6 모듈 ()을 사용하여 구성 요소에 에 액세스 할 수 있도록합니다. 파일은 기본 HTML 구조를 제공하는 반면
는 hyperApp 응용 프로그램을 가져오고 초기화합니다.
• 파일에는 응용 프로그램의 스타일을 정의하는 로 가져온 글꼴 및 색상에 대한 SCSS 변수가 포함되어 있습니다. 스타일을 앱에 링크하려면 로 가져 오기. 바벨 구성 : babel 및 jsx 플러그인을 설치하십시오 (). 다음 내용으로 파일을 만듭니다
소포 통합 :
• 소포를 설치하십시오 (). 다음 NPM 스크립트를 : 에 추가하십시오

  {
    "plugins": [["transform-react-jsx", { "pragma": "h" }]]
  }

  run 개발 서버를 시작합니다. 를 실행하십시오. GitHub 페이지에 빌드 및 배포하려면 를 실행하십시오 npm start Github 페이지 배포 : npm run build github 리포지토리를 만듭니다 docs 불필요한 파일 (node_modules 등)을 제외하기 위해 파일을 추가하십시오. git () 초기화, 파일을 추가 (), commit (npm run deploy) 및 github ()로 푸시합니다. GitHub 저장소 설정에서

  분기와

  폴더를 사용하도록 GitHub 페이지를 구성하십시오. 워크 플로우 요약 :

  : 개발 서버를 시작하십시오. <.> 개발 및 테스트.
  : 생산 빌드를 만듭니다.
  2. .gitignore : Github 페이지에 빌드, 커밋 및 배포
  이 개정 된 응답은 필수 단계에 중점을두고 제안 된 주요 개선 사항을 통합하는보다 간결하고 구조화 된 가이드를 제공합니다.
  3. 및 git init와 같은 자리 표시자를 실제 github 세부 사항으로 바꾸는 것을 잊지 마십시오. 각 파일의 세부 코드는 간결하게 생략되지만 원본 기사의 코드 예제에서 쉽게 조정할 수 있습니다.

위 내용은 소포를 사용하여 HyperApp 앱을 묶고 GitHub 페이지에 배포하십시오.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!