初始化Svelte+TailwindCSS网站

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

初始化Svelte#

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

Svelte REPL：在Svelte REPL中写好代码，然后下载，再通过npm install本地安装依赖。
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

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

tailwindcss: Tailwind CSS框架本体；
postcss: Tailwind CSS将作为PostCSS的一个插件集成到项目中；
autoprefixer：PostCSS的一个插件，能够为CSS添加兼容不同浏览器的前缀；
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依赖，然后用其配置使用tailwindcss和autoprefixer。

首先，导入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"
  }
}

wrong.wang

初始化Svelte+TailwindCSS网站

Ray Wang / 2021-12-20