PHP프로젝트에서 Svelte를 사용해보자

PHP는 기본적으로 Svelte 컴포넌트를 인식하지 못하므로 Svelte 컴파일러를 사용하여 Svelte 컴포넌트를 JavaScript로 변환해야 한다.

다음은 PHP 프로젝트에서 Svelte를 사용하는 단계:

npm install svelte

npm install @sveltejs/vite-plugin-svelte

Vite는 Svelte 컴파일러를 포함하고 있어 Svelte 컴포넌트를 JavaScript로 컴파일할 수 있다.

npm install vite

vite.config.js 파일을 프로젝트 루트에 생성하고 다음 내용을 추가한다:

import { svelte } from '@sveltejs/vite-plugin-svelte';

export default {
  plugins: [svelte()],
};

프로젝트 내에 .svelte 파일을 생성하고 Svelte 컴포넌트를 작성한다.

Vite를 사용하여 Svelte 컴포넌트를 JavaScript로 컴파일한다:

npx vite build

이 명령은 dist 폴더에 컴파일된 JavaScript 파일을 생성한다.

컴파일된 JavaScript 파일을 PHP 파일에 포함시킨다:

<!DOCTYPE html>
<html>
<body>
    <div id="app"></div>
    <script type="module" src="./dist/main.js"></script>
</body>
</html>

이제 Svelte 컴포넌트를 PHP 프로젝트에서 사용할 수 있다.

새 Svelte 컴포넌트를 추가할 때마다 npx vite build 명령을 실행하여 JavaScript로 컴파일해야 한다.

개발 환경에서는 Vite를 dev 모드로 실행하고 PHP 서버와 통합하는 것이 더 편리할 수 있다.

Ton-Ton