【JS】JSフレームワークのSvelteを動かしてみた。（動作が超高速らしいよ！）

3942 ワード

Node.js JavaScript Svelte JavaScript テキストリンク

Svelte

JavaScript製超高速フレームワークであるSvelteを導入し、動かすところまでを紹介します。

動作環境

Node.js 7.6.0
yarn
macOS Sierra 10.12.3
svelte-cli v1.3.0

Svelte-cliのインストール

yarn global add svelte-cli

ファイル構成

実際にコーディング

ベースとなるhtmlファイルの作成

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>svelte</title>
</head>
<body>
<main></main>
</body>
<script src="MyApp.js"></script>
<script>
    new MyApp({
        target: document.querySelector('main'),
        data: { name: 'world' }
    });
</script>
</html>

MyApp.htmlファイルの作成

MyApp.html

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

コンパイル

svelte compile --format iife MyApp.html > MyApp.js

表示確認

実際のページ

雑感

開発側でコンパイルをしているため、閲覧者のページ読み込み速度が上がるのはすごい良いなと思った。
あと、依存関係が特に無いため、読み込む順番を気にする必要が無いのは楽。
ちょっとSvelteに興味が湧いたので、これを気に何か作ってみようと思う。
次はTodoアプリとか作るので、実装したらまた投稿することにする。

開発でストレスを無くすために

今は、チュートリアルとして、実行しただけですが、gulp-svelteっていうプラグインがあるので、
gulpでwatchして、変更がある毎にコンパイルするようにしたりしたい。

以上。

Author And Source

この問題について(【JS】JSフレームワークのSvelteを動かしてみた。（動作が超高速らしいよ！）), 我々は、より多くの情報をここで見つけました https://qiita.com/lv-kit/items/1c9abdb9c3cba1c09230

著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。

Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .

スプリングからメールを送信

[プログラマ]チュートリアル-JavaScript