الشروع في العمل مع Svelte - برنامج تعليمي قصير

كيف تبدأ مع 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:


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 على الإنترنت!