Начало работы со Svelte - краткое руководство

Как начать работу со Svelte

С тех пор, как я начал использовать Hugo в качестве генератора статических сайтов для создания веб-сайтов, я полюбил этот подход к публикации в Интернете по сравнению с использованием CMS, которая генерирует страницы динамически, как я привык - в прошлом.

Svelteэто фреймворк JavaScript, который вызывает у меня то же чувство. По сравнению с React, Vue, Angular и другими фреймворками, приложение, созданное с использованием Svelte, являетсясоставлензаранее, посетителям вашего сайта не нужно обслуживать код фреймворка и библиотек, и в результате весь процесс работает более плавно, потребляет меньше трафика, и все кажется быстрее и легче.

Как и в случае с Hugo, который исчезает при развертывании и генерирует простой HTML, Svelte исчезает, и все, что вы получаете, - это простой JavaScript.

Но давайте перейдем к сути статьи. Как начать работу со Svelte.

У вас должен быть установлен Node.js. Посмотри мойкак установить Node.jsотправьте сообщение, если у вас его еще нет!

И убедитесь, что это последняя версия (как обновить Node.js).

Узел устанавливаетnpxcommand, которая представляет собой удобный способ запуска команд узла. В частности, мы собираемся запустить это:

npx degit sveltejs/template firstapp

Это загрузит и запуститкоманда degit, который, в свою очередь, загружает последний код шаблона проекта Svelte, находящегося по адресуhttps://github.com/sveltejs/template, вfirstappпапка.

Теперь войдите в этоfirstappпапку и запуститьnpm installчтобы скачать дополнительные зависимости шаблона. На момент написания это зависимости этого шаблона проекта:

"npm-run-all"
"rollup"
"rollup-plugin-commonjs"
"rollup-plugin-livereload"
"rollup-plugin-node-resolve"
"rollup-plugin-svelte"
"rollup-plugin-terser"
"svelte"
As you can see, it’s the Svelte core, plus Rollup (a Webpack alternative) and some of its plugins. Plus npm-run-all, a CLI tool that is used to run multiple npm scripts in parallel, or sequential.


We’re now ready to run our Svelte site in development mode, by running


npm run dev


This will start the app on localhost, on port 5000, by default:


CLI


If you point your browser there, you’ll see the “Hello world!” example:


Browser


You’re now ready to open the code in your favorite editor. The src folder contains all you need to tweak the app: the main.js file:


Editor


This file is the entry point and in this case initializes the App component, which is defined in App.svelte, a single file component:


<script>
export let name;
</script>

<style>
h1 {
color: purple;
}
</style>


<h1>Hello {name}!</h1>


If you are familiar with Vue.js, it’s a similar concept. You define the markup, the style and the JavaScript for each component in a single .svelte file.

  

  
Download my free Svelte Handbook

  




More svelte tutorials:

Tech Wiki Online!