Svelte 迷途求索（一） —— 构建第一个 Svelte 应用

Svelte 是一个全新的响应式框架，在开发体验上比较接近 Vue，具体的介绍可以参考尤雨溪大佬的评价

一、创建应用

Svelte 提供了模板项目，可以通过 degit 拉取到本地

npx degit sveltejs/template 

拉取项目默认使用的是 js，如果想用 ts 可以在项目根目录下执行：

node scripts/setupTypeScript.js

安装依赖，并启动项目

npm install
npm run dev

然后在浏览器中打开 http://localhost:5000/ 就能访问对应的页面

如果需要修改端口号，可以在 package.json 中的启动命令里修改环境变量 PORT

"scripts": {
  "dev": "PORT=4000 rollup -c -w",
},

由于 Svelte 的作者也是 rollup 的作者，所以默认模板使用的是 rollup 打包

如果想使用 vite, 可以使用 vite-plugin-svelte

二、在组件中使用 less

模板项目本身不携带任何插件，如果需要在 svelte 组件中写 less，需要安装相关的依赖：

npm install svelte-preprocess-less less -D

然后在 rollup.config.js 中添加相关的配置：

// 模板项目会自带 svelte-preprocess, 如果没有, 可以手动安装
import sveltePreprocess from 'svelte-preprocess';
import { less as svelteLess } from 'svelte-preprocess-less';
 
export default {
  plugins: [
    svelte({
      preprocess: sveltePreprocess({
        style: svelteLess(),
      }),
    }),
  ],
};

然后在组件中的