Svelte-Helloworld

今時のフロントエンドは Svelte と言われたので、Hello world を動かしてみました。

前準備

npx コマンドがインストールされていることを確認する。

1
2
$ npx --version
6.13.4

npx コマンドがインストールされていない場合は、別途 npm コマンドをインストールする。

1
$ npm install -g npx

プロジェクトを作成する

新規プロジェクトを作成する。

1
2
3
$ npx degit sveltejs/template helloworld
npx: installed 1 in 1.739s
> cloned sveltejs/template#master to helloworld

作成したプロジェクトのディレクトリーに移動する。

1
$ cd helloworld

必要なパッケージをインストールする。

1
2
3
4
5
6
7
8
9
10
11
12
13
$ npm install
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@~2.1.2 (node_modules\rollup\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN svelte-app@1.0.0 No repository field.
npm WARN svelte-app@1.0.0 No license field.

added 91 packages from 124 contributors and audited 92 packages in 2.314s

3 packages are looking for funding
run `npm fund` for details

found 0 vulnerabilities

以下の package.json が作成される。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{
"name": "svelte-app",
"version": "1.0.0",
"scripts": {
"build": "rollup -c",
"dev": "rollup -c -w",
" start": "sirv public"
},
"devDependencies": {
"@rollup/plugin-commonjs": "^14.0.0",
"@rollup/plugin-node-resolve": "^8.0.0",
"rollup": "^2.3.4",
"rollup-plugin-livereload": "^1.0.0",
"rollup-plugin-svelte": "^5.0.3",
"rollup-plugin-terser": "^7.0.0",
"svelte": "^3.0.0"
},
"dependencies": {
"sirv-cli": "^1.0.0"
}
}

サーバーを起動する

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$ npm run dev

> svelte-app@1.0.0 dev C:\Users\user\Documents\svelte\helloworld
> rollup -c -w

rollup v2.26.5
bundles src/main.js → public\build\bundle.js...
LiveReload enabled
created public\build\bundle.js in 230ms

[2020-08-24 11:50:41] waiting for changes...

> svelte-app@1.0.0 start C:\Users\user\Documents\svelte\helloworld
> sirv public "--dev"

Your application is ready~! 🚀

- Local: http://localhost:5000
- Network: Add `--host` to expose

────────────────── LOGS ──────────────────

ブラウザーから http://localhost:5000 にアクセスすると、アクセスログが表示される。

1
2
3
4
5
6
7
────────────────── LOGS ──────────────────

[11:51:25] 2002.77ms ─ /
[11:51:25] 2000.60ms ─ /global.css
[11:51:25] 2000.92ms ─ /build/bundle.css
[11:51:25] 2001.55ms ─ /build/bundle.js
[11:51:25] 2000.46ms ─ /favicon.png

ディレクトリー構成

新規プロジェクトの作成直後のディレクトリー構成は以下のようになっている。

1
2
3
4
5
6
7
8
9
10
11
project/
+- .gitignore
+- node_modules/
+- package-lock.json
+- package.json
+- public/
| +- build/
+- README.md
+- rollup.config.js
+- scripts/
+- src/

src/App.svelte

アプリ家ショーン表示部分。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<script>
export let name;
</script>

<main>
<h1>Hello {name}!</h1>
<p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p>
</main>

<style>
main {
text-align: center;
padding: 1em;
max-width: 240px;
margin: 0 auto;
}

h1 {
color: #ff3e00;
text-transform: uppercase;
font-size: 4em;
font-weight: 100;
}

@media (min-width: 640px) {
main {
max-width: none;
}
}
</style>

src/main.js

アプリケーションの本体。

1
2
3
4
5
6
7
8
import App from './App.svelte';

const app = new App({
target: document.body,
props: {
name: 'world'
}
});