Svelte入門-短いチュートリアル

Svelteの使用を開始する方法

Hugoを静的サイトジェネレーターとして使用してWebサイトを作成し始めて以来、以前のように動的にページを生成するCMSを使用するのと比較して、Web上で公開するこのアプローチが大好きになりました。

Svelte同じ感覚を与えるJavaScriptフレームワークです。 React、Vue、Angular、その他のフレームワークと比較して、Svelteを使用して構築されたアプリは編集済み事前に、サイトの訪問者にフレームワークとライブラリコードを提供する必要はありません。その結果、エクスペリエンスのすべての成果がよりスムーズになり、消費される帯域幅が少なくなり、すべてがより高速で軽量になります。

デプロイ時に消えてプレーンHTMLを生成するHugoと同様に、Svelteも消え、プレーンJavaScriptだけが得られます。

しかし、記事の要点にジャンプしましょう。 Svelteの使用を開始する方法。

Node.jsをインストールする必要があります。私をチェックしてくださいNode.jsをインストールする方法まだ持っていない場合は投稿してください!

そして、それが最新バージョンであることを確認してください(Node.jsを更新する方法)。

ノードはをインストールしますnpxコマンド。これは、ノードコマンドを実行するための便利な方法です。特に、これを実行します。

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: