我现在就去试试 Snowpack 📦
我们来看一看
沸腾电镀
哇哦
让我们回到样板代码的话题上来。
TypeScript + Alpine
概括
关于早午餐
TypeScript Web 包样板
安装
发展
建造
发布包
上周没什么可写的，所以我就尝试了解了一下Brunch，并记录了我的体验过程。我会把这段体验过程的链接放在文章末尾。用户YJDoc2建议我也看看Snowpack。之前我听说过Snowpack（主要是看到一两条推文说它有多棒），但我自己还没用过。是时候改变一下了！
我们来看一看
好的，网站上说 Snowpack 是“速度更快的前端构建工具”：
Brunch 的启动时间在 70 到 100 毫秒之间。我估计 Snowpack 也差不多，毕竟它总得执行点什么吧？Brunch 之前在构建过程中加入 Tailwind 时就出现过问题，当时我们讨论的就是 70 到 100 百毫秒（呃，百毫秒，基本上就是秒数除以 10……我应该直接写 7 到 10 秒。或者分秒？ds？随便吧。）。但那主要是 PostCSS 的问题。我怀疑这里的情况也一样：很多工具（比如 TypeScript、JSX、CSS 等）理论上是开箱即用的，但 PostCSS 需要插件。TypeScript 目前只支持“构建”，额外的类型检查也需要额外的插件。好吧，我并不指望我的构建工具一开始就能处理所有事情。不过 TypeScript 听起来确实很有意思。
（细心的读者可能已经注意到我是在引用文档。我不会再犯同样的错误，在不了解方法的情况下贸然行动了！）
沸腾电镀
和上次一样的配置：Tailwind + Alpine。或许我应该换个更复杂的配置，看看这工具在哪些方面会对我造成不利影响，找出潜在的陷阱，但目前这两个应该够用了。
我开始琢磨有没有用 TypeScript 写的类似 Alpine 的框架。Alpine 是用纯 JavaScript 写的，所以用我上面提到的技术栈，如果不写自定义代码，就没法测试构建工具的 TypeScript 功能。只是随便想想……不过也许我可以写个 TypeScript 的显示/隐藏组件，配合 Alpine 使用，看看效果怎么样。
总之，我现在很想试试 Snowpack。npm init看来得不停地按回车键了。我很好奇这个工具的速度到底怎么样。所以，我没有安装一大堆东西，而是只安装了 Snowpack 本身，然后在 package.json 文件中添加了“start”和“build”命令，并添加了一个包含“Hello World”的 index.html 文件：
<!DOCTYPE html>
<html>
<head></head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
现在我打字npm run start，然后慢慢按下回车键……
哇哦
哇，真的！那个开发服务器简直是瞬时启动。等我一下，我有点懵……
我确实在 CLI 中记录了一些内容，这一点我可以确定，但我还没来得及看清一个字，我的浏览器就迫不及待地跳到我面前，就像一只精力过剩的仓鼠在梦想工作的第一天就迫不及待地迎接这个世界一样。
不过，我想知道在浏览器中断之前，雪层数据想要告诉我什么，所以我们来看看：
> snowpack dev
[snowpack] Hint: run "snowpack init" to create a project config file. Using defaults...
[snowpack] Welcome to Snowpack! Because this is your first time running
this project, Snowpack needs to prepare your dependencies. This is a one-time step
and the results will be cached for the lifetime of your project. Please wait...
[snowpack] No dependencies detected. Ready!
[snowpack] Server started in 8ms.
[snowpack] Local: http://localhost:8080
[snowpack] Network: http://192.168.1.50:8080
你好，Snowpack。浏览器速度更快。
等等——8毫秒？你在开玩笑吧？它是怎么做到的？不过感觉确实挺准的。（好像我能分辨出8毫秒和80毫秒的区别似的……）
Snowpack 显然使用了内置的默认设置。我觉得添加一个基本的配置文件应该不会让它慢多少。它居然还能作为一台普通的服务器运行，这让我很惊讶。我以前通常会serve快速浏览一些已构建的内容，但 Snowpack 的速度感觉快得多。我想我会卸载系统上的 serve 命令，只用 Snowpack。
言归正传。Snowpack 提示我创建一个项目配置文件snowpack init，所以我照做了，然后重新运行，看看是否有影响。
不，没有影响。那东西速度依然很快。
让我们回到样板代码的话题上来。
Snowpack 文档中有关于如何设置 PostCSS 的指南。我将按照指南操作，修改 package.json 文件，并添加 postcss.config.js 和 index.css 文件。
雪包配置：
// Snowpack Configuration File
// See all supported options: https://www.snowpack.dev/reference/configuration
/** @type {import("snowpack").SnowpackUserConfig } */
module.exports = {
mount: {},
plugins: [
"@snowpack/plugin-postcss"
],
packageOptions: {},
devOptions: {},
buildOptions: {},
}
package.json 文件：
{
"name": "snowpack-tryout",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "snowpack dev",
"build": "snowpack build"
},
"author": "",
"license": "",
"devDependencies": {
"@snowpack/plugin-postcss": "^1.2.2",
"autoprefixer": "^10.2.5",
"snowpack": "^3.1.2"
},
"dependencies": {
"tailwindcss": "^2.0.4"
}
}
Postcss 配置：
// postcss.config.js
// Taken from: https://tailwindcss.com/docs/installation#using-tailwind-with-postcss
module.exports = {
plugins: [
require('tailwindcss'),
require('autoprefixer'),
],
}
还有 index.css：
@tailwind base;
@tailwind components;
@tailwind utilities;
一切正常，对吧？没错。我们再试一次：
正如你所见，服务器启动速度仍然在 10 毫秒左右，这很棒，但整个 Tailwind 流程需要这 10 秒。与其等待浏览器窗口打开，我不如等待内容加载完毕。这很合理，它总得在某个时候执行完所有 Tailwind 相关的操作。不过，热重载速度确实非常快：
还不错！现在我想把 TypeScript 和 Alpine 也加进去。
TypeScript + Alpine
我通过执行以下命令安装 Alpine npm i alpinejs，并创建了一个简单的 index.ts 文件：
import 'alpinejs'
（嗯，目前就这些）
我稍微修改了一下index.html文件：
<!-- ... -->
<h1
class="text-4xl text-red-600"
x-data="{ text: 'Hello, World' }"
x-text="text"
></h1>
<script type="module" src="index.js"></script>
<!-- ... -->
无需重启服务器，什么都不用做，它就这么正常运行了™。热重载速度一如既往地快，所以整个过程显然完全没有拖慢 Snowpack 的速度。我仍然感到惊叹。
接下来，是一点高山元素：
interface TabNav {
init: () => void
show: (selector: string) => void
}
export default (): TabNav => ({
init (): void {
console.log(this.$el)
},
show (selector: string): void {
this.$el
.querySelectorAll(`.content:not(${selector})`)
.forEach((el: HTMLElement) => {
el.classList.add('hidden')
})
this.$el.querySelector(selector).classList.remove('hidden')
}
})
我可以将它导入到我的 index.ts 文件中：
import 'alpinejs'
import tabNav from './tabNav'
// @ts-ignore
window.tabNav = tabNav
然后它可以与一些 DOM 元素一起使用：
<!-- ... -->
<div x-data="tabNav()" x-init="init">
<ul class="flex">
<li class="p-4 cursor-pointer" @click="show('#a')">Show A</li>
<li class="p-4 cursor-pointer" @click="show('#b')">Show B</li>
<li class="p-4 cursor-pointer" @click="show('#c')">Show C</li>
</ul>
<div id="a" class="content">
Content A
</div>
<div id="b" class="content hidden">
Content B
</div>
<div id="c" class="content hidden">
Content C
</div>
</div>
<!-- ... -->
立竿见影。它真的就是管用。太神奇了。我信服了。
概括
我还没试过原生 Svelte 集成，但如果它像其他功能一样好用，那肯定会让我更加惊艳。TypeScript 支持无需任何额外配置，甚至不需要额外的包。如果你的 IDE 会像 Snowpack 提到的那样进行额外的类型检查，那就更不需要它了。
零配置，运行速度快得惊人，TypeScript 开箱即用。我的天，还有什么理由不喜欢它呢？
关于早午餐
这就是我上面提到的那篇文章：
希望您喜欢这篇文章，就像我喜欢写这篇文章一样！如果喜欢，请点个赞❤️或🦄 ！我会在空闲时间写一些科技文章，偶尔也喜欢喝杯咖啡。
如果你想支持我的工作， 请我喝杯咖啡☕ 或 在推特上关注我🐦 ！ 你也可以直接通过PayPal支持我！
我要感谢两周前支持我的玛蒂娜！
文章来源：https://dev.to/thormeier/im-going-to-give-snowpack-a-try-now-3ohm