FullStack JWT 인증: SvelteKit을 최신 버전으로 마이그레이션

소개

SvelteKit은 Fixing load, and tightening up SvelteKit's design before 1.0 #5748에서 논의한 대로 중단한 부분부터 몇 가지 주요 변경 사항을 거쳤습니다. 이 기사의 주제는 이러한 주요 변경 사항이 가치가 있는지 여부를 논의하는 것이 아닙니다. 우리는 기본적으로 SvelteKit의 최신 설계 결정을 통합하기 위해 이 기사 시리즈에서 빌드된 응용 프로그램을 성공적으로 업데이트하는 방법을 알고 싶습니다. 이Migration guide #5774를 광범위하게 참조할 것입니다.

소스 코드

이러한 변경 사항은 여기에서 볼 수 있습니다git commit.

라이브 버전

이 프로젝트는 heroku(백엔드) 및 vercel(프론트엔드)에 배포되었으며 라이브 버전에 액세스할 수 있습니다here.

애플리케이션 마이그레이션 가이드

최신 변경 사항을 통합하기 위해 현재 응용 프로그램을 완전히 마이그레이션하려면 다음 단계를 수행해야 합니다.

1단계: package.json에서 가능한 업데이트 확인

frontend 디렉토리에서 터미널을 열고 다음 명령을 실행하십시오.

╭─[Johns-MacBook-Pro] as sirneij in ~/Documents/Devs/django_svelte_jwt_auth/frontend using node v18.10.0 on (main)✔                                            09:16:47
╰─(๑˃̵ᴗ˂̵)و npx npm-check-updates -u

그 다음에:

╭─[Johns-MacBook-Pro] as sirneij in ~/Documents/Devs/django_svelte_jwt_auth/frontend using node v18.10.0 on (main)✔                                            09:16:47
╰─(๑˃̵ᴗ˂̵)و npm install

그런 다음 "dev" 파일에서 "build" , "package" , "preview" 및 scripts 부분을 다음과 같이 변경합니다.

{
    ...
    "scripts": {
    "dev": "vite dev",
    "build": "vite build",
    "package": "vite package",
    "preview": "vite preview",
    ...
  },
  ...
}

이를 통해 SvelteKit은 개발, 빌드, 패키징 또는 미리 보기 모드에서 파일을 제공하기 위해 package.json를 사용합니다.


이러한 명령은 프로젝트vite 파일의 모든 종속성을 업데이트해야 합니다. 그렇지 않은 Paradventure는 프로젝트의 package.json 및 node_modules 파일을 제거합니다.

╭─[Johns-MacBook-Pro] as sirneij in ~/Documents/Devs/django_svelte_jwt_auth/frontend using node v18.10.0 on (main)✔                                            09:16:47
╰─(๑˃̵ᴗ˂̵)و rm -rf node_modules package-lock.json

그런 다음 package-lock.json 파일의 package.json 및 "devDependencies" 섹션을 다음과 같이 수동으로 업데이트합니다.

{
    ...
    "devDependencies": {
        "@sveltejs/adapter-auto": "next",
        "@sveltejs/kit": "^1.0.0-next.511",
        "@typescript-eslint/eslint-plugin": "^5.39.0",
        "@typescript-eslint/parser": "^5.39.0",
        "eslint": "^8.24.0",
        "eslint-config-prettier": "^8.5.0",
        "eslint-plugin-svelte3": "^4.0.0",
        "prettier": "^2.7.1",
        "prettier-plugin-svelte": "^2.7.1",
        "svelte": "^3.50.1",
        "svelte-check": "^2.9.1",
        "svelte-preprocess": "^4.10.7",
        "tslib": "^2.4.0",
        "typescript": "^4.8.4"
    },
    ...
    "dependencies": {
        "@sveltejs/adapter-vercel": "^1.0.0-next.77"
    }
    ...
}

그런 다음 설치하십시오.

╭─[Johns-MacBook-Pro] as sirneij in ~/Documents/Devs/django_svelte_jwt_auth/frontend using node v18.10.0 on (main)✔                                            09:16:47
╰─(๑˃̵ᴗ˂̵)و npm install

2단계: SvelteKit의 마이그레이션 스크립트 실행

이전 코드베이스를 새 디자인으로 쉽게 마이그레이션하기 위해 SvelteKit의 관리자는 마이그레이션 스크립트를 작성했습니다. 아래 명령을 사용하여 마이그레이션 스크립트를 실행합니다.

╭─[Johns-MacBook-Pro] as sirneij in ~/Documents/Devs/django_svelte_jwt_auth/frontend using node v18.10.0 on (main)✔                                            09:16:47
╰─(๑˃̵ᴗ˂̵)و npx svelte-migrate routes

처음에는 귀하가 동의해야 하는 설치가 필요합니다. 스크립트는 파일 이름을 바꾸고 적절한 경우 디렉터리를 만드는 데 도움이 됩니다. 우리의 "dependencies" 는 routes/__layout.svelte , +layout.svelte 에서 routes/index.svelte 등으로 바뀝니다. 각 파일routes/+page.svelte의 모든 코드가 파일 또는 디렉토리<script context="module" lang="ts"> ... </script>로 이동되었습니다. 파일의 +page.ts가 이전에 <script context="module" lang="ts"> ... </script>에 있는 것과 같은 소품을 반환하는 경우 데이터만 반환해야 합니다. 이 경우에는 데이터를 routes/accounts/user/[username]-[id].svelte에 넣지 않고 userResponse 반환해야 합니다. 또한 디렉토리의 props에서 +page.svelte를 export let userResponse: UserResponse; 및 모든 해당 항목으로 바꿉니다.

이 외에도 git commit 에서 볼 수 있는 TypeScript 기반 조정도 수행했습니다. 이전에 export let data: any;에 살았던 browser가 $app/env로 이동되었습니다.

아웃트로

이 기사를 즐겼습니까? contacting me for a job, something worthwhile or buying a coffee ☕을 고려하십시오. Twitter에서 저와 연결/팔로우할 수도 있습니다. 또한 더 넓은 범위를 위해 공유하는 데 도움이된다면 나쁘지 않습니다. 감사히 받겠습니다...