今天的越写悦快乐之系列文章为大家带来如何快速开启一个Svelte项目，如何利用HTML、JavaScript和CSS构建Web应用。话说当下流行的Web开源的JavaScript框架当属React、Vue.js和Angular，那么除了这三款框架外，我们别无选择了吗？今天为大家介绍这款框架Svelte，就是其中很有名气的一员，我相信通过的介绍，你会有兴趣进一步了解它，让我们开始探索之旅吧。
介绍
它是什么
Svelte is a new way to build web applications. It's a compiler that takes your declarative components and converts them into efficient JavaScript that surgically updates the DOM.
Svelte是一款构建Web应用的新方式，通过它可以将声明式组件高效地编译成JavaScript，并且如外科手术般地更新DOM。
它有什么特点
- 减少代码量
- 无需操作虚拟DOM
- 无需使用状态管理
如何使用
环境要求
- Node 8.0
- JavaScript 或者TypeScript
- VSCode
开启一个新项目
创建项目
我们打开iterm2软件，然后定位到Desktop目录下，执行如下命令：
npx degit sveltejs/template svelte-go
执行完成后切换到svelte-go并使用VSCode打开项目：
cd svelte-go
code -r .
切换编程语言
打开项目后，我们注意到项目的结果如下：
切换到VSCode的终端页签下，执行以下命令：
node scripts/setupTypeScript.js
执行完成后会自动删除scripts目录。
来个满天星玩玩
打开App.svelte文件，输入以下内容：
<script>
import { onMount } from 'svelte';
let characters = ['🥳', '🎉', '✨'];
let confetti = new Array(100).fill()
.map((_, i) => {
return {
character: characters[i % characters.length],
x: Math.random() * 100,
y: -20 - Math.random() * 100,
r: 0.1 + Math.random() * 1
};
})
.sort((a, b) => a.r - b.r);
onMount(() => {
let frame;
function loop() {
frame = requestAnimationFrame(loop);
confetti = confetti.map(emoji => {
emoji.y += 0.7 * emoji.r;
if (emoji.y > 120) emoji.y = -20;
return emoji;
});
}
loop();
return () => cancelAnimationFrame(frame);
});
</script>
<style>
:global(body) {
overflow: hidden;
}
span {
position: absolute;
font-size: 5vw;
}
</style>
{#each confetti as c}
<span style="left: {c.x}%; top: {c.y}%; transform: scale({c.r})">{c.character}</span>
{/each}
随后在main.ts文件中加载App.svelte文件并绑定组件，文件内容如下：
import App from "./App.svelte";
const app = new App({
target: document.body,
});
export default app;
配置文件
我们打开项目的package.json文件看看，就知道这个项目依赖哪些第三方库了，文件内容如下：
{
"name": "svelte-app",
"version": "1.0.0",
"license": "MIT",
"scripts": {
"build": "rollup -c",
"dev": "rollup -c -w",
"start": "sirv public",
"validate": "svelte-check"
},
"devDependencies": {
"@rollup/plugin-commonjs": "^16.0.0",
"@rollup/plugin-node-resolve": "^10.0.0",
"rollup": "^2.3.4",
"rollup-plugin-css-only": "^3.1.0",
"rollup-plugin-livereload": "^2.0.0",
"rollup-plugin-svelte": "^7.0.0",
"rollup-plugin-terser": "^7.0.0",
"svelte": "^3.0.0",
"svelte-check": "^1.0.0",
"svelte-preprocess": "^4.0.0",
"@rollup/plugin-typescript": "^6.0.0",
"typescript": "^3.9.3",
"tslib": "^2.0.0",
"@tsconfig/svelte": "^1.0.0"
},
"dependencies": {
"sirv-cli": "^1.0.0"
}
}
看看效果
在项目的终端执行以下命令即可查看项目运行结果：
npm run start
如果您阅读过Svelte的官方教程，或许对这一结果不意外，我相信您能静下心来阅读官方的教程，这样有助于你进一步理解Svelte是怎么工作的。
参考
Gif制作工具
- QuickTime Player
- Gifski
个人总结及收获
我们的这篇文章入门了如何使用Svelte构建可交互基于组件的页面，该页面增强了HTML的内容表达的能力，更让我们可以借助JavaScript或者TypeScript来提升我们的开发体验，构建更加友好卓越的用户体验，提升用户的产品价值，我相信技术带来生产的变革，让我们一起构建无与伦比的用户体验，创造更大的价值。若是我的文章对你有所启发，那将是我莫大的荣幸。希望和您一起精进，成为更好的自己。
