كيف تبدأ مع Svelte
منذ أن بدأت في استخدام Hugo كمنشئ موقع ثابت لإنشاء مواقع ويب ، أصبحت أحب هذا الأسلوب للنشر على الويب ، مقارنةً باستخدام نظام إدارة المحتوى الذي ينشئ الصفحات ديناميكيًا ، كما اعتدت - في الماضي.
Svelteهو إطار عمل JavaScript يمنحني نفس الشعور. مقارنةً بـ React و Vue و Angular وغيرها من الأطر ، فإن التطبيق الذي تم إنشاؤه باستخدام Svelte هوتجميع وانتاجمسبقًا ، لا يتعين على زوار موقعك أن يحصلوا على رمز إطار العمل والمكتبات ، ونتيجة لذلك فإن كل ثمار التجربة أكثر سلاسة ، وتستهلك نطاقًا تردديًا أقل ، ويشعر كل شيء بأنه أسرع وخفيف الوزن.
كما هو الحال مع Hugo ، الذي يختفي عند النشر ويقوم بإنشاء HTML عادي ، يختفي Svelte وكل ما تحصل عليه هو JavaScript عادي.
لكن دعنا ننتقل إلى لحم المقال. كيف تبدأ مع Svelte.
تحتاج إلى تثبيت Node.js. تحقق من بلديكيفية تثبيت Node.jsنشر إذا لم يكن لديك بالفعل!
وتأكد من أنه أحدث إصدار (كيفية تحديث Node.js).
العقدة بتثبيت ملفnpx
الأمر ، وهي طريقة سهلة لتشغيل أوامر Node. على وجه الخصوص ، سنقوم بتشغيل هذا:
npx degit sveltejs/template firstapp
سيؤدي هذا إلى تنزيل وتشغيل ملفأمر ديجيت، والذي بدوره يقوم بتنزيل أحدث رمز لقالب مشروع 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:

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

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:

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:
- Getting started with Svelte - a short tutorial
- How to work with props in Svelte
- How to import components in Svelte
- How to export functions and variables from a Svelte component
- Svelte templates: conditional logic
- How to rerender a Svelte component on demand
- Svelte Slots
- How to add comments in Svelte templates
- Svelte Bindings
- Handling State Updates in Svelte
- Reactive Statements in Svelte
- Svelte Lifecycle Events
- Svelte templates: loops
- Resolve promises in Svelte templates
- Working with events in Svelte
- Cross-component State Management in Svelte
- How to access a URL parameter in Sapper outside of script module
- How to dynamically apply CSS in Svelte
- How to redirect to a URL in Sapper
- How to simulate a for loop in Svelte templates