Snowpack의 SolidJS – 빠른 개발 가이드

Snowpack Solid Template 을 사용하는 SolidJS 앱 개발 가이드입니다. 템플릿은 node.jsv16.13.0 및 npmv8.1.0에서 테스트되었습니다. 다른 node.js 및/또는 npm 버전에서는 작동하거나 작동하지 않을 수 있습니다.

⋅ ⋅ ⋅

◆ ◆ ◆

⋅ ⋅ ⋅

1. 템플릿 설치

# Open terminal and clone the repo.
[email protected]:cy-park/snowpack-solid-template.git

# Install dependencies
npm install

⋅ ⋅ ⋅

◆ ◆ ◆

⋅ ⋅ ⋅

2. 설정 구성

필요한 유일한 단계는 Snowpack 별칭 설정입니다. '선택적' 태그가 있는 다른 모든 단계는 주요 템플릿 수정(예: 디렉토리 구조 변경)을 수행하지 않는 한 필요하지 않습니다.

⋅ ⋅ ⋅

2.1 별칭

🗎snowpack.config.js를 열고 값을 편집alias하세요.

⋅ ⋅ ⋅

2.2 Typescript 및 ECMAScript 설정(선택 사항)

Typescript 구성은 🗎tsconfig.json를 확인하세요. ECMAScript 버전 설정은 파일에서 target 값을 확인하세요.

⋅ ⋅ ⋅

2.3 PostCSS 및 Tailwind 설정(선택 사항)

PostCSS는 🗎snowpack.config.js를 참조하는 🗎.postcssrc를 참조하는 🗎tailwind.config.js에 의해 실행됩니다. 보다 정교한 CSS 컴파일 프로세스를 원하는 경우 이 순서에 따라 적절하게 구성하십시오.

⋅ ⋅ ⋅

2.4 PWA 설정을 위한 서비스 워커(선택 사항)

Workbox 설정은 🗎workbox-config.js를 확인하세요.

⋅ ⋅ ⋅

◆ ◆ ◆

⋅ ⋅ ⋅

3. 스크립트

📜 npm 시작

http://localhost:8080 에서 개발 모드를 시작합니다.

📜 npm 런 빌드

서비스 워커와 함께 build 디렉토리에 프로덕션 버전을 빌드합니다.

📜 npm run build_snowpack

서비스 워커 없이 build 디렉토리에 프로덕션 버전을 빌드합니다.

📜 npm run service_worker

서비스 워커를 빌드합니다.

📜 npm 런 린트

ts/js/tsx/jsx 파일이 깔끔한지 확인합니다.

📜 npm 실행 형식

🗎 .prettierrc 의 설정에 따라 ts/js/tsx/jsx 파일을 포맷하세요.

⋅ ⋅ ⋅

◆ ◆ ◆

⋅ ⋅ ⋅

4. 주의사항

It is required to use ✔️[email protected] with ✔️@snowpack/[email protected] to use CSS Modules.

2021년 11월 17일부터 Snowpack에는 CSS 모듈 컴파일 프로세스에 버그가 있습니다. 해결 방법으로 this hotfix 을 사용합니다. 이 문제가 해결되면 🗎snowpack.config.js를 🗎snowpack.config.future-cssmodules.js로 바꿀 수 있습니다.

이 문제에 대한 자세한 내용은 다음 문제 티켓을 확인하십시오. Issue 2998 , Issue 3219 , Issue 3243

⋅ ⋅ ⋅

🔥  Live Demo  🔥