Vue 에는 내가 단짝이라고 칭한 VueUse 를 기재했었다.
그리고 그 덕분에 VueUse에 관심을 가진 한국 개발자가 늘어났다.
[대충 흐뭇한 짤]
내가 Svelte 삽질하다가 슬럼프가 있었다. 그 틈에 많은 개발자들이 스벨트와 Kit 가지고 열심히 지지고 볶는 글을 많이 올려주었다.
뭐? 리액트 단짝? 일단 react-use 가 있긴 한데 나중에 다시 확인해서 소개하도록 하겠다.
오늘 소개할 것은 Svelte의 안내데스크, svelte-add 다.
왜 안내데스크냐고?
이 녀석의 목적은 Svelte boilerplate 성격이 강하다.
스벨트 프로젝트를 초기화할 때 필요한 라이브러리가 있다면, 이걸 손쉽게 세팅해서 바로 쓸 수 있게끔 해주는 프로젝트다.
그래서 내가 안내데스크라 칭한 거다.
svelte-add
/
svelte-add
Easily add integrations and other functionality to Svelte(kit) apps
svelte-add
svelte-add is a tool to add many different tools to your svelte/kit project.
This is a monorepo, containing the following packages:
| Package | Description |
|---|---|
| @svelte-add/ast-manipulation | Provides tools for manipulating JS, CSS and HTML AST's |
| @svelte-add/ast-tooling | Bundles different tools for parsing and serializing JS, CSS and HTML AST's |
| svelte-add | Allows you to apply different adders at once and guides you interactively through the adder initialization |
| @svelte-add/adders | That's the place where all official adders live |
| @svelte-add/core | Provides all utilities for easy application of adders |
| @svelte-add/dev-utils | Used to do some maintenance tasks inside the repository |
| @svelte-add/testing-library | Provides tools to test a adders with all it's option in different project templates |
| @svelte-add/tests | Uses testing-library to execute the tests for all official adders |
| @svelte-add/website | The website of this project |
Contributing
Please see the contribution guidelines
Licensing
Thanks to
- J who initially created svelte-add
- All contributors of svelte-add
- BlankParticle who initially brought up the idea…
일단 Svelte 에서 공식으로 제공하는 기본 템플릿을 불러오는 명령어다.
npm init svelte@next my-app
my-app 을 원하는 명칭 넣고 부르면 새 프로젝트 끝이다.
이번엔 svelte-add 에서 제공하는 기본 템플릿을 불러오는 명령어다.
npm init @svelte-add/kit@latest
그러면 안내문이 표시되는데, 안내하는대로 입력하면 프로젝트가 완성된다.
여기서 좋은 게 뭐냐면, 추가할 것들을 선택할 수 있다는 것.
게다가 즐기는 모듈과 같이 바로 프로젝트를 초기화할 수 있다.
npm init --yes @svelte-add/kit@latest -- --with postcss+mdsvex
이렇게 하면 해당 프로젝트에 Svelte Kit가 초기화되면서 postcss 와 mdsvex 모듈이 추가된 새 프로젝트를 초기화해줄 것이다.
mdsvex 가 뭐냐고? 마크다운에 svelte 구문도 쓸 수 있게 해주는 놈.
이게 다가 아니다. svelte-add 의 진가는 프로젝트 관리 중에 일어난다.
이미 초기화가 됐는데 모듈을 추가하고 싶다?
예를 들어 tailwindcss 를 추가하고 싶다면, 간단하게 이렇게 호출하면 된다.
npx svelte-add@latest tailwindcss
초기화할 때는 npm init 어쩌고를 썼지만,
운영 중 추가는 npx를 썼다.
위 명령어만 호출하면 tailwindcss 모듈을 추가하고 관련 초기 세팅을 알아서 해준다.
이 얼마나 기특한 기능이란 말인가!
만약 지원하는 모듈을 알고 싶다면, 공식 Github에서 확인하면 되고.
또한 npm init @svelte-add/kit@latest 에서도 확장 가능한 모듈이 표시되니 여기서도 확인 가능하다.
일단... Svelte 를 vite로 관리하는 프로젝트 중심으로 지원한다.
SvelteKit 가 vite 위주의 관리 체계를 가지고 있기 때문에.
한계이긴 하다. 그리고 Svelte가 공식적으로 Vite 중심으로 움직이기 때문에.
Vite를 선택한 이유가 바로 SSR과 HMR이 잘 지원되기 때문이다.
끗.
Top comments (0)