Shopify 테마 개발용 이니시에이터 템플릿을 만들어 봤습니다.
이 기사는 Type Script와 SCSS를 활용한 보다 효율적이고 세련된 Shopify 테마 개발 환경을 소개합니다.창고는 모형화되어 있기 때문에 자신의 환경에서 간단하게 설치할 수 있다.
지원되지 않는Online Store 2.0 이전 테마 환경에서는 사용할 수 없습니다.
템플릿의 주요 특징
기존 주제의 사용자 정의부터 스크래치 주제의 개발까지 광범위한 장면에서 사용할 수 있다.
이용 조건
로컬 환경을 다음과 같이 하십시오.Node.지정된 버전 이외의 버전에 대해서는 js 및 Shopify CLI 가 작업을 보장하지 않습니다.특히 Shopify CLI 는 버전별로 사용할 수 있는 명령 및 명령 이름이 다릅니다.
이용 방법
shopify-quick-theme의 저장소에서
Use this template를 클릭하여 개발 환경을 복제합니다.
위 작업에서 준비한 창고를 복제하십시오.
YOUR-USERNAME 및 YOUR-REPOSITORY를 다시 작성해야 합니다.git clone https://github.com/YOUR-USERNAME/YOUR-REPOSITORY
매크로 패키지 설치
다음 명령을 사용하여 사용 패키지를 설치하십시오.아래의 해설은 사용Yarn을 전제로 한다.npm를 사용할 때 명령을 다시 읽고 실행하십시오.
yarn install
Shopify 스토어에 연결
로컬 환경과 개발된 상점의 테마를 연결하기 위해 아래 명령을 사용하여 인증합니다.
연결할 URL
myshopify.com을 지정하십시오.shopify login --store xxxxxxxxx.myshopify.com
새 테마를 만들 때
테마를 처음 만들 때 다음 명령을 실행하면 초기 파일을 간단하게 준비할 수 있습니다.
폴더에 자동으로 Dawn 복제본을 만듭니다.
yarn newTheme
기존 테마를 사용자 정의할 때
다음 명령은 저장된 기존 테마를 로컬 환경에 반영합니다.
yarn pull:new
E2E 테스트 실시 시
E2E 테스트를 수행할 때 다음 명령을 사용하여 지원 브라우저를 설치합니다.
yarn e2e:install
shopify 파일을 만드십시오.기재 내용은 참조.env.사용하지 않을 때는 상술한 설정을 할 필요가 없다.
필요한 파일 읽기
파일을 생성하려면 다음 명령을 사용합니다.
yarn build
{{ 'style.css' | asset_url | stylesheet_tag }}
<script src="{{ 'main.js' | asset_url }}" defer></script>
개발을 시작하다
개발을 시작할 때 다음 명령을 실행하십시오.파일을 변경할 때 핫 리로드가 수행됩니다.
yarn start
http://127.0.0.1:9292
추천 명령
개발 템플릿에는 다양한 편리한 명령이 준비되어 있습니다.자세한 내용은 README에서 확인하십시오.
Cheat 명령
Liquid의 레이블을 표시하는 명령입니다.개발할 때 실행하고 펼치면 편리해요.
yarn cheat
Pull 명령
사용자 정의 화면에서 조작된 내용과 응용 프로그램에서 생성된 파일 변경 내용 등을 가져오는 데 사용할 수 있다.
yarn pull
Deploy 명령
이것은 개발 주제의 내용을 상점 환경에 디자인할 때 추천하는 명령이다.동시에 파일을 만들고 업로드할 수 있습니다.
yarn deploy
Litt 명령
정적 분석 코드에 사용되는 명령입니다.정기적인 집행을 통해 프로젝트 내의 코드 품질을 일정하게 유지할 수 있다.
yarn lint
PostInstall 명령
유형 정의 패키지가 없는 명령을 자동으로 추가할 수 있습니다.
yarn postInstall
Test 명령
유닛 테스트와 E2E 테스트를 수행하는 명령입니다.유닛 테스트는 Jest, E2E 테스트는 Playwright를 사용합니다.
yarn test
yarn unit
yarn unit:watch
yarn e2e
yarn e2e:headed
yarn e2e:codegen
총결산
shopify-quick-theme 테마 설정 폴더와 개발 파일을 분리하여 개발할 수 있습니다.이렇게 하면 주제가 원래 가지고 있는 파일과 개발자가 가공한 파일의 범위를 명확하게 할 수 있다.다른 테마 개발에도 편리한 구조를 추가할 예정이니 꼭 활용해 보세요.
shopify-quick-theme 개발에 도움을 줄 수 있다면'지원'을 받고 싶습니다.
Reference
이 문제에 관하여(Shopify 테마 개발용 이니시에이터 템플릿을 만들어 봤습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://zenn.dev/kazuki_tam/articles/921d3191f51be3텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
