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>

根據需求構建合適的項目，然後就可以起飛了~