Svelte + Tailwind + Parcel = 太棒了！

2025-06-04

Svelte + Tailwind + Parcel = 太棒了！

我必须承认，出于某种原因，Svelte 项目默认使用的 Rollup.js 一直让我不太喜欢，所以我决定尝试一下Parcel。让我们看看如何使用它来搭建一个新的 Svelte 项目。同时，我们还会陆续添加一些其他有用的工具和插件。

基本基础知识

让我们首先使用 Yarn 创建一个简单的新项目。

$ mkdir -p app/src && cd app
$ yarn init -y
Enter fullscreen mode Exit fullscreen mode

添加 Parcel、Svelte 和所需的插件。

$ yarn add -D parcel-bundler svelte parcel-plugin-svelte
Enter fullscreen mode Exit fullscreen mode

我们几乎准备好了，但在此之前，我们需要添加一些内容package.json和一些实际的源文件。首先将以下属性添加到您的package.json.

  "scripts": {
    "start": "parcel src/index.html --port 3000",
    "build": "rm -rf dist && parcel build src/index.html --no-source-maps"
  },
  "browserslist": [
    "last 1 chrome versions"
  ]
Enter fullscreen mode Exit fullscreen mode

我们的服务器将监听端口 3000，并且在构建生产包时我们将跳过源映射生成。

现在，让我们添加一些实际的源文件。

src/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>My App</title>
  </head>

  <body>
    <script defer src="./main.js"></script>
    <noscript>You need to enable JavaScript to run this app.</noscript>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

src/main.js

import App from './App.svelte';

const app = new App({
  target: document.body
});

export default app;
Enter fullscreen mode Exit fullscreen mode

src/App.svelte

<script>
  let name = "friend";
</script>

<h1>Hello {name}!</h1>
Enter fullscreen mode Exit fullscreen mode

我们现在准备启动我们的应用程序了。

$ yarn start
yarn run v1.21.1
$ parcel src/index.html --port 3000
Server running at http://localhost:3000
✨  Built in 923ms.
Enter fullscreen mode Exit fullscreen mode

哇！太棒了！而且速度也很快！试着修改一些文本App.svelte，看看重新编译的速度有多快。

我们还可以构建生产包。


$ yarn build
yarn run v1.21.1
$ rm -rf dist && parcel build src/index.html --no-source-maps
✨  Built in 1.22s.

dist/main.a3795f1f.js    22.92 KB    895ms
dist/index.html             347 B    279ms
Done in 1.76s.
Enter fullscreen mode Exit fullscreen mode

看看构建速度有多快！太神奇了！

中级基础

让我们安装Tailwind - 一个功能性 CSS 框架，并使其与我们当前的设置兼容。

$ yarn add -D tailwindcss autoprefixer @fullhuman/postcss-purgecss
Enter fullscreen mode Exit fullscreen mode

我们必须添加一些额外的文件才能使 Tailwind 正常工作。

创建 Tailwind 配置文件。

$ yarn tailwind init
Enter fullscreen mode Exit fullscreen mode

创建基本样式文件 -src/global.pcss包含以下内容。

@tailwind base;
@tailwind components;
@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode

创建 PostCSS 配置文件 - postcss.config.js。

const plugins =
  process.env.NODE_ENV === 'production'
    ? ['tailwindcss', 'autoprefixer', '@fullhuman/postcss-purgecss']
    : ['tailwindcss'];

module.exports = { plugins };
Enter fullscreen mode Exit fullscreen mode

该配置会清除未使用的 CSS，并仅在生产版本中添加浏览器前缀。为什么？因为在开发过程中，您需要一个完整的 Tailwind CSS 文件，以便在浏览器的开发控制台中修改各种类。

最后，让我们添加一个 PurgeCSS 配置，以便 PostCSS 知道在生产构建期间需要清除哪些未使用的 CSS。创建一个purgecss.config.js包含以下内容的文件。

module.exports = {
  content: [
    './src/index.html',
    './src/**/*.svelte'
  ],
  whitelistPatterns: [/svelte-/],
  defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || []
};
Enter fullscreen mode Exit fullscreen mode

这里我们告诉它svelte-在清除时忽略类。这些类是当你在 Svelte 组件中编写作用域样式时 Svelte 生成的。

我们可以仅在中连接我们的配置postcss.config.js，但我认为将它们放在两个不同的文件中以便明确分离关注点会更好。

最后，在 head 标签中包含以下行index.html。

<link rel="stylesheet" href="./global.pcss" />
Enter fullscreen mode Exit fullscreen mode

将以下类添加到 H1 标签中，App.svelte以查看一切是否按预期工作。

<h1 class="text-teal-700 text-5xl">Hello {name}!</h1>
Enter fullscreen mode Exit fullscreen mode

太棒了！现在启动应用，你应该能看到一个带样式的标题。注意：如果由于某种原因无法正常工作，请删除 Parcel.cache文件夹并重新启动应用。

好了，现在就到这里。全新、流畅的 Svelte 设置就完成了。你可以先停在这里，去构建你的下一个精彩作品，也可以继续阅读，或许还能学到一些新东西。

奖金基础知识

如果您正在构建 UI， Inter字体会非常实用。以下是如何通过tailwindcss-font-inter插件将其添加到我们的新设置中。

$ yarn add -D tailwindcss-font-inter
Enter fullscreen mode Exit fullscreen mode

替换tailwind.config.js为以下内容。

module.exports = {
  theme: {
    interFontFeatures: {
      default: ['calt', 'liga', 'kern'],
      numeric: ['tnum', 'salt', 'ss02']
    },
    fontSize: {
      xs: '0.75rem',
      sm: '0.875rem',
      base: '1rem',
      lg: '1.125rem',
      xl: '1.25rem',
      '2xl': '1.5rem',
      '3xl': '1.875rem',
      '4xl': '2.25rem',
      '5xl': '3rem',
      '6xl': '4rem',
      '7xl': '6rem',
      '8xl': '8rem',
      '9xl': '9rem',
      '10xl': '10rem'
    },
    extend: {}
  },
  variants: {},
  plugins: [
    require('tailwindcss-font-inter')({
      importFontFace: true,
      disableUnusedFeatures: true
    })
  ]
};
Enter fullscreen mode Exit fullscreen mode

现在将以下类添加到 body 标签中index.html。

<body class="font-inter">
Enter fullscreen mode Exit fullscreen mode

你的应用现在应该使用 Inter 字体了。字体的渲染方式有很多配置选项。就当做家庭作业吧。

额外奖励基础知识

代码检查和代码格式化非常重要。我个人在编写代码时会使用 Vim 和 coc.vim 的Svelte扩展。不得不说，它确实运行得非常好！不过，为了让它正常工作，你需要安装一些额外的插件并添加更多配置。

$  yarn add -D prettier prettier-plugin-svelte eslint eslint-plugin-svelte3
Enter fullscreen mode Exit fullscreen mode

添加.prettierrc.json

{
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true,
  "plugins": ["prettier-plugin-svelte"],
  "svelteSortOrder": "styles-scripts-markup",
  "svelteStrictMode": true,
  "svelteBracketNewLine": true,
  "svelteAllowShorthand": true
}
Enter fullscreen mode Exit fullscreen mode

和.eslintrc.json

{
  "env": {
    "browser": true,
    "es6": true
  },
  "parserOptions": {
    "ecmaVersion": 2019,
    "sourceType": "module"
  },
  "plugins": ["svelte3"],
  "extends": ["eslint:recommended"],
  "overrides": [
    {
      "files": ["**/*.svelte"],
      "processor": "svelte3/svelte3"
    }
  ],
  "rules": {
    "prettier/prettier": "error",
    "svelte3/lint-template": 2
  }
}
Enter fullscreen mode Exit fullscreen mode

瞧！现在 Linting 和代码格式化应该可以正常工作了。

结论

如你所见，将 Svelte 与 Parcel 搭配使用并不难。设置起来非常简洁明了。Parcel 的所有功能几乎开箱即用。我非常喜欢它。

如果您想学习和了解事物是如何连接在一起的，您可以重复上述所有步骤来了解发生了什么，但如果您很懒（像我一样）并且只想敲出一些代码，您可以使用我的样板并完成它。

$ npx degit codechips/svelte-tailwind-parcel-starter facebook-killer
Enter fullscreen mode Exit fullscreen mode

感谢您的阅读，祝您编码愉快！

文章来源：https://dev.to/codechips/svelte-tailwind-parcel-awesome-4891
Devto 翻译
PREV
JavaScript 的奇怪历史
NEXT
Node.js 的升级和执行应用