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>
根據需求構建合適的項目，然后就可以起飛了~