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

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

 

一、创建应用

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

npx degit sveltejs/template <project-name>

拉取项目默认使用的是 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(),
      }),
    }),
  ],
};

然后在组件中的 <style> 标签添加 lang="less"

有个细节需要注意： 每个 .svelte 文件中 <style> 标签内的样式相互独立，就像 Vue 中的 <style scoped>

比如下面的两个组件：

 最终渲染的结果，只有组件A的 title 样式生效

再看看渲染之后 DOM 结构，就会发现具有 <style> 标签的组件，会携带额外的 class: svelte-hash

最终生成的样式表也是这样的：

 那么应该如何处理公共样式呢？请往下看~

 

 

三、完善 rollup.config.js

1. 处理 import 引入的 less 文件

首先安装 rollup 插件 

npm install rollup-plugin-less -D

然后在 rollup.config.js 中的 plugins 加入新的配置：

import less from 'rollup-plugin-less';

export default {
  plugins: [
    less({ 
      ooutput: 'public/build/bundle.css',
    }),
  ],
};

如果项目中使用了 rollup-plugin-css-only,  现在就可以删掉了

将 less 配置直接替换掉原有的 css 配置即可

---

这样就能直接编写 .less 文件, 然后在 main.js 中引入，从而解决上面提到的公共样式问题

 

---

2. 配置路径别名

路径别名可以解决一些很累赘的相对路径。首先安装依赖

npm install @rollup/plugin-alias -D

然后修改  rollup.config.js 配置

import path from 'path';
import alias from '@rollup/plugin-alias';

const projectRootDir = path.resolve(__dirname);

export default {
  plugins: [
    alias({
      entries: [
        {
          find: '@',
          replacement: path.resolve(projectRootDir, 'src')
        }
      ],
    }),
  ],
};

使用别名之后，上面引入 style/index.less 的相对路径就可以改成：

 

四、打包构建

可以直接使用 build 命令进行打包

npm run build

打包之后会按照 rollup.config.js 中的输出路径 output.file 生成目录

在模板项目 sveltejs/template 中，输出路径是 public，所以打包之后的整个 public 就是一个完成的项目

五、更多模板

以上内容都是基于 sveltejs/template 这个官方应用模板进行开发，这是一个“纯净版”项目

除此之外，在 svelte 的官方社区有很多开发者提交的模板项目

如果你更习惯使用 webpack，也可以尝试 template-webpack

如果你是一名成熟的 svelte 开发者，想开发一个 svelte 组件库，可以使用 component-template

或者你需要一个比较完整且成熟的项目模板，可以考虑 svelte-commerce

这些模板都可以使用 degit clone

npx degit <github-repository> <project-name>

根据需求构建合适的项目，然后就可以起飞了~