snowpack 快速开始-摩杜云开发者社区

先准备一个空目录来创建项目

mkdir my-first-snowpack
cd my-first-snowpack

初始化操作

npm init

安装依赖

npm install --save-dev snowpack

创建一个index.html文件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="Starter Snowpack App" />
    <title>Starter Snowpack App</title>
  </head>
  <body>
    <h1>Welcome to Snowpack!</h1>
  </body>
</html>

在 package.json 里面添加一个 start 命令来启动服务

"scripts": {
   "start": "snowpack dev",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

然后运行服务

npm run start

snowpack 快速开始_依赖关系

直接在浏览器中使用浏览器原生的 JavaScript 模块功能。

// my-first-snowpack/hello-world.js
export function helloWorld() {
  console.log('Hello World!');
}

// my-first-snowpack/index.js
import { helloWorld } from './hello-world.js';

helloWorld();

在 html 里面引入 JS 文件

<body>
    <h1>Welcome to Snowpack!</h1>
   <script type="module" src="/index.js"></script>
  </body>

修改文件页面会自动化刷新。除了使用自己写的模块，还可以使用 npm 模块

npm install --save canvas-confetti

在 index.js 添加下面代码

import confetti from 'canvas-confetti';
confetti.create(document.getElementById('canvas'), {
  resize: true,
  useWorker: true,
 })({ particleCount: 200, spread: 200 });

打开页面会出现一个动画效果。

snowpack 的一大特点是快 —— 全量构建快，增量构建也快。

因为不需要打包，所以它不需要像 webpack 那样构筑一个巨大的依赖图谱，并根据依赖关系进行各种合并、拆分计算。snowpack 的增量构建基本就是改动一个文件就处理这个文件即可，模块之间算是“松散”的耦合。

官方文档：https://www.snowpack.dev/tutorials/getting-started

典型的 Web 开发人员安装和管理他们的依赖关系是使用包管理器像 npm，yarn。这些 npm 软件包不能直接在浏览器中运行，因此在实际使用它们之前，需要额外的做处理，进行打包构建。

snowpack 完全跳过“ npm install”步骤，而是通过 ES Module 导入，按需获取相关的预构建的软件包代码。

// 之前是这样
import * as React from 'react';

// 之后是这样
import * as React from 'https://cdn.skypack.dev/react@17.0.1';

vite 的热度上升，与 vite 类似的 snowpack 的关注度也逐渐增加了。