初始化Svelte+TailwindCSS网站


Svelte是一个为构建Web APP设计的javescript框架,类似于Vue或者React。TailwindCSS是一个用于网页设计的CSS框架。这两个框架在各自领域都是独树一帜的存在,本文介绍一下怎么同时使用这两个框架。

初始化Svelte

目前Svelte官方提供了多种初始化Svelte项目的方法。官方在博客 《The easiest way to get started with Svelte 》中提供了两种方法:

  1. Svelte REPL:在Svelte REPL中写好代码,然后下载,再通过npm install本地安装依赖。
  2. sveltejs/template:复制官方提供的一个使用Rollup作为打包工具的 模板项目

在20年11月,Svelte官方宣布开始开发 SvelteKit,提供一个更完整的Svelte开发套件。目前SvelteKit正处于开发阶段:

SvelteKit is in early development, and some things may change before we hit version 1.0. This document is a work-in-progress.

SvelteKit成熟以后,相信使用SvelteKit新建Svelte项目将是不二之选。但现在,然我们还是以第二种方法开始:复制sveltejs/template项目。

如果访问Github很顺畅,仅需依次执行下面的命令:

npx degit sveltejs/template my-new-project
cd my-new-project
npm install

如果无法通过https访问GitHub,可以通过下面的等价方案:

如果通过ssh依然无法使用GitHub,除了挂代理,也可以使用 FastGit提供的代理服务

git clone --depth 1 git@github.com:sveltejs/template.git my-new-project
cd my-new-project
# 删除`sveltejs/template`项目的git记录
rm -rf .git
npm install

安装完成后,在项目目录执行npm run dev即可启动项目,按照命令行中输出提示,打开 http://localhost:5000/,既可看到正常输出的HELLO WORLD!

添加TailwindCSS支持

TailwindCSS官方的 安装文档更适合基础的基于HTML文件的开发过程。这里,为了和Rollup与Svelte集成,需要的命令与官方的安装文档有所不同。

首先,让我们来安装一些开发依赖:

npm install -D tailwindcss postcss autoprefixer svelte-preprocess

这行命令安装了下面四个工具:

  1. tailwindcss: Tailwind CSS框架本体;
  2. postcss: Tailwind CSS将作为PostCSS的一个插件集成到项目中;
  3. autoprefixer:PostCSS的一个插件,能够为CSS添加兼容不同浏览器的前缀;
  4. svelte-preprocess: 帮助Svelte支持各种如PostCSS、SCSS语法的预处理器。

接着,我们初始化Tailwind CSS的配置文件:

npx tailwindcss init

创建配置文件之后,我们需要指定Tailwind CSS将要处理的模板文件:

module.exports = {
  content: [
    // 主要改这一项配置,添加包含Tailwind CSS的文件路径即可
    "./src/**/*.{html,svelte}"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

这里有个小问题,很多教程这里都是指定purge而不是content。这是因为Tailwind CSS自3.0版本之后,不再使用PurgeCSS,因此重命名了这项配置。具体内容可以参考Tailwind CSS的 升级指南

配置Rollup

最后,我们需要配置Rollup,即本项目中所使用的打包工具,以在Svelte中引入Tailwind CSS。

请打开rollup.config.js,导入svelte-preprocess依赖,然后用其配置使用tailwindcssautoprefixer

首先,导入sveltePreprocess

// 将这一行命令添加在其它import语句之后
import sveltePreprocess from "svelte-preprocess";

然后,在plugins对应的数组中的svelte({})内添加下面这个属性:

preprocess: sveltePreprocess({
  sourceMap: !production,
  postcss: {
    plugins: [
     require("tailwindcss"), 
     require("autoprefixer"),
    ],
  },
}),

你的rollup.config.js现在可能类似于:

...
import sveltePreprocess from "svelte-preprocess";

...

export default {
	input: 'src/main.js',
	output: {
		sourcemap: true,
		format: 'iife',
		name: 'app',
		file: 'public/build/bundle.js'
	},
	plugins: [
		svelte({
			compilerOptions: {
				// enable run-time checks when not in production
				dev: !production
			},
			preprocess: sveltePreprocess({
				sourceMap: !production,
				postcss: {
					plugins: [
						require("tailwindcss"),
						require("autoprefixer"),
					],
				},
			}),
		}),
		// we'll extract any component CSS out into
		// a separate file - better for performance
		css({ output: 'bundle.css' }),
...

使用Tailwind CSS

现在只差最后一步了!就是在项目中使用Tailwind CSS的语法来指定样式。

不如打开src/App.svelte,删除掉原本的CSS,用Tailwind CSS的语法替代:

<!-- src/App.svelte 文件内容 -->
<script>
	export let name;
</script>

<main class="text-center p-4 md:max-w-none max-w-xs m-auto">
	<h1 class="text-red-500 text-6xl uppercase font-thin p-4 m-8">
		Hello {name}!
	</h1>
	<p>
		Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> 
        to learn how to build Svelte apps.
	</p>
</main>

<style global lang="postcss">
	@tailwind base;
	@tailwind components;
	@tailwind utilities;
</style>

现在,运行npm run dev,然后访问 http://localhost:5000/

It works!

补充

发布项目

npm run build

Vercel部署项目

git初始化本项目,并上传Github。然后在Vercel Dashboard中关联项目。Vercel能自动检测到项目使用了Vercel,并设置默认参数。

# 本地执行该命令,然后一直enter,就可以在本地关联Vercel项目
vercel
# 之后,就可以在本地测试vercel部署的效果
vercel dev

版本信息

前端项目最大的一个特点就是JS依赖更新很快,当前可以使用的安装方法,过一阵子可能又不能用了😒。 为此,我列一下此时此刻package.json中的版本信息,以供参考。

{
  "name": "svelte-app",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "build": "rollup -c",
    "dev": "rollup -c -w",
    "start": "sirv public --no-clear"
  },
  "devDependencies": {
    "@rollup/plugin-commonjs": "^17.0.0",
    "@rollup/plugin-node-resolve": "^11.0.0",
    "autoprefixer": "^10.4.0",
    "postcss": "^8.4.5",
    "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-preprocess": "^4.10.1",
    "tailwindcss": "^3.0.7"
  },
  "dependencies": {
    "sirv-cli": "^1.0.0"
  }
}