Svelte Beta ํ์ฅ์ด ์ค์น๋์ด ์๊ณ ์ธ์ด ์๋ฒ๋ฅผ ๋ค์ ์์ํ์ต๋๋ค. ๋ด svelte.config.js
:
const sveltePreprocess = require('svelte-preprocess');
module.exports = {
preprocess: sveltePreprocess(),
};
๊ทธ๋ฌ๋ ํ์ฅ์ VS Code๊ฐ ๋ด ์ฝ๋๊ฐ Typescript๋ผ๋ ๊ฒ์ ์ดํดํ๋ ๋ฐ ๋์์ด ๋์ง ์๋ ๊ฒ ๊ฐ์ต๋๋ค. ์ ํ ์ฃผ์์ ์ค๋ฅ๊ฐ ๋ฐ์ํ๊ธฐ ๋๋ฌธ์ ๋๋ค.
์ ํ ์ฃผ์์ TypeScript ํ์ผ์์๋ง ์ฌ์ฉํ ์ ์์ต๋๋ค. ์๋ฐ์คํฌ๋ฆฝํธ
๋ํ ํฅ๋ฏธ๋กญ๊ฒ๋ lang="typescript"
๋ฅผ type="text/typescript"
๋ก ๋ณ๊ฒฝํ๋ฉด ๊ตฌ๋ฌธ ์์์ด ์์ ํ ์ฌ๋ผ์ง๊ณ ์ค๋ฅ๊ฐ ๋ฐ์ํฉ๋๋ค.
์์คํ (๋ค์ ์ ๋ณด๋ฅผ ์์ฑํ์ญ์์ค):
์ฌ๊ธฐ์ ์ ์ฒด ํ์ผ์ ์ฝ๋๋ฅผ ๊ฒ์ํ๊ฑฐ๋ ์์ ๋ฆฌํฌ์งํ ๋ฆฌ๋ฅผ ๊ฒ์ํ ์ ์์ต๋๊น? ์ฌ์์ฐํ ์ ์์ต๋๋ค. ๋ชจ๋ ์คํฌ๋ฆฝํธ๋ฅผ ํฌํจํ ํ์๋ ์์ง๋ง ๋ค๋ฅธ ์ต์์ ํ๊ทธ๊ฐ ํ์ํฉ๋๋ค.
๋ค์์ ์ต์ํ์ ์ฌ์์ฐ์ ๋๋ค.
<script lang="typescript">
let countExcludingUser: number = 0;
</script>
<p>Hi</p>
Svelte Beta๋ฅผ ์ ์ธํ ๋ชจ๋ ํ์ฅ์ ๋นํ์ฑํํ๊ณ VS Code๋ฅผ ๋ค์ ์์ํ์ง๋ง ์ฑ๊ณตํ์ง ๋ชปํ์ต๋๋ค.
๋๋ ํ ๋ฒ๋ง ์ฌ์์ฐํ๊ณ ๊ทธ ์ดํ์๋ ์ด์ด ์์์ต๋๋ค. ์ต์ ๋น๋ 99.0.22๋ก ๋ค์ ์๋ํ ์ ์์ต๋๊น? ์ด ๋ฒ์ ์๋ ์ ์ฒ๋ฆฌ์ ๋ํ ์ ๋ฐ์ดํธ๊ฐ ์์ต๋๋ค. ๊ทธ๋๋ ์ง์๋๋ฉด ์์ ์ ์ฅ์๋ฅผ ๋ง๋ค ์ ์์ต๋๊น?
๊ทํ์ ์ค๋ช
์์ SveltePlugin.ts
๋ "์๊ธฐ์น ์์ ํ ํฐ"๊ณผ ๊ฐ์ Svelte ๊ตฌ๋ฌธ ์ค๋ฅ๊ฐ ์๊ธฐ ๋๋ฌธ์ Typescript๋ก ์ฌ์ ์ฒ๋ฆฌํด์ผ ํ๋ค๊ณ ์๊ฐํฉ๋๋ค. ๋ฐ๋ฉด์ TypescriptPlugin.ts
๋ - ์ด๋ค ์ด์ ์์์ธ์ง - ์ฌ์ฉ์๊ฐ Typescript๋ฅผ ์ฌ์ฉํ๋ ๊ฒ์ ์ธ์ํ์ง ๋ชปํ์ง๋ง ๋์ Javascript๋ผ๊ณ ์๊ฐํฉ๋๋ค. ์ ๋ง ์ด์ํฉ๋๋ค. ์์ repo๊ฐ โโํ์คํ ๋์์ด ๋ ๊ฒ์
๋๋ค.
์, ๊ทธ๋์ ๋ฌธ์ ๋ ๋ด VS ์ฝ๋ "์ฌ์ฉ์"์ค์ ์ ์ด๊ฒ์ ๊ฐ์ง๊ณ ์์๊ธฐ ๋๋ฌธ์ ๋๋ค.
"files.associations": {
"*.svelte": "html"
},
์ด์ ์ ๊ฑฐํ ํ ๋ชจ๋ ๊ฒ์ด ์ ์๋ํ๋ ๊ฒ ๊ฐ์ต๋๋ค.
๊ฐ์ฅ ์ ์ฉํ ๋๊ธ
์, ๊ทธ๋์ ๋ฌธ์ ๋ ๋ด VS ์ฝ๋ "์ฌ์ฉ์"์ค์ ์ ์ด๊ฒ์ ๊ฐ์ง๊ณ ์์๊ธฐ ๋๋ฌธ์ ๋๋ค.
์ด์ ์ ๊ฑฐํ ํ ๋ชจ๋ ๊ฒ์ด ์ ์๋ํ๋ ๊ฒ ๊ฐ์ต๋๋ค.