DEV Community

Composite
Composite

Posted on

Svelte의 안내데스크, svelte-add

Vue 에는 내가 단짝이라고 칭한 VueUse 를 기재했었다.
그리고 그 덕분에 VueUse에 관심을 가진 한국 개발자가 늘어났다.

[대충 흐뭇한 짤]

내가 Svelte 삽질하다가 슬럼프가 있었다. 그 틈에 많은 개발자들이 스벨트와 Kit 가지고 열심히 지지고 볶는 글을 많이 올려주었다.
뭐? 리액트 단짝? 일단 react-use 가 있긴 한데 나중에 다시 확인해서 소개하도록 하겠다.
오늘 소개할 것은 Svelte의 안내데스크, svelte-add 다.
왜 안내데스크냐고?

이 녀석의 목적은 Svelte boilerplate 성격이 강하다.
스벨트 프로젝트를 초기화할 때 필요한 라이브러리가 있다면, 이걸 손쉽게 세팅해서 바로 쓸 수 있게끔 해주는 프로젝트다.
그래서 내가 안내데스크라 칭한 거다.

GitHub logo 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

MIT

Thanks to

일단 Svelte 에서 공식으로 제공하는 기본 템플릿을 불러오는 명령어다.

npm init svelte@next my-app
Enter fullscreen mode Exit fullscreen mode

my-app 을 원하는 명칭 넣고 부르면 새 프로젝트 끝이다.

이번엔 svelte-add 에서 제공하는 기본 템플릿을 불러오는 명령어다.

npm init @svelte-add/kit@latest
Enter fullscreen mode Exit fullscreen mode

그러면 안내문이 표시되는데, 안내하는대로 입력하면 프로젝트가 완성된다.
여기서 좋은 게 뭐냐면, 추가할 것들을 선택할 수 있다는 것.

게다가 즐기는 모듈과 같이 바로 프로젝트를 초기화할 수 있다.

npm init --yes @svelte-add/kit@latest -- --with postcss+mdsvex
Enter fullscreen mode Exit fullscreen mode

이렇게 하면 해당 프로젝트에 Svelte Kit가 초기화되면서 postcss 와 mdsvex 모듈이 추가된 새 프로젝트를 초기화해줄 것이다.

mdsvex 가 뭐냐고? 마크다운에 svelte 구문도 쓸 수 있게 해주는 놈.

이게 다가 아니다. svelte-add 의 진가는 프로젝트 관리 중에 일어난다.
이미 초기화가 됐는데 모듈을 추가하고 싶다?
예를 들어 tailwindcss 를 추가하고 싶다면, 간단하게 이렇게 호출하면 된다.

npx svelte-add@latest tailwindcss
Enter fullscreen mode Exit fullscreen mode

초기화할 때는 npm init 어쩌고를 썼지만,
운영 중 추가는 npx를 썼다.
위 명령어만 호출하면 tailwindcss 모듈을 추가하고 관련 초기 세팅을 알아서 해준다.
이 얼마나 기특한 기능이란 말인가!

만약 지원하는 모듈을 알고 싶다면, 공식 Github에서 확인하면 되고.
또한 npm init @svelte-add/kit@latest 에서도 확장 가능한 모듈이 표시되니 여기서도 확인 가능하다.

일단... Svelte 를 vite로 관리하는 프로젝트 중심으로 지원한다.
SvelteKit 가 vite 위주의 관리 체계를 가지고 있기 때문에.

한계이긴 하다. 그리고 Svelte가 공식적으로 Vite 중심으로 움직이기 때문에.
Vite를 선택한 이유가 바로 SSR과 HMR이 잘 지원되기 때문이다.

끗.

Image of Docusign

Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

Top comments (0)

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay