snowpack 快速开始
前端精髓
共 1464字,需浏览 3分钟
· 2021-01-20
先准备一个空目录来创建项目
mkdir my-first-snowpack
cd my-first-snowpack
初始化操作
npm init
安装依赖
npm install --save-dev snowpack
创建一个 index.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 Apptitle>
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
直接在浏览器中使用浏览器原生的 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 软件包不能直接在浏览器中运行,因此在实际使用它们之前,需要额外的做处理,进行 webpack 打包构建。
snowpack 完全跳过“ npm install”步骤,而是通过 ES Module 导入,按需获取相关的预构建的软件包代码。
// 之前是这样
import * as React from 'react';
// 之后是这样
import * as React from 'https://cdn.skypack.dev/react@17.0.1';
评论
某大公司为逼迫员工离职,竟然把他的工位安排到厕所旁,没想到他直接开始记录领导的如厕时间,还发到公司大群...
上一篇:字节的跳动职级与薪资(2024年)我们与公司间的合作,宛如两艘船只在茫茫大海上相互依靠,共同抵御风浪,携手驶向成功的彼岸。然而,当航向开始产生分歧,或是波涛汹涌的风浪改变了我们的初衷,我们或许应当冷静地选择和平分手,而非在风雨中硬撑。最近,一位网友的遭遇引起了广大职场人的关注和热议。这位网友
开发者全社区
0
测试新人,如何快速上手一个陌生的系统!
大家好,我是狂师!作为刚入行不久的测试新人,面对一个陌生的系统时,可能会感到有些手足无措。面对一个全新的系统系统,如何快速上手并展开有效的测试工作是一个重要的挑战。本文将探讨测试新人如何通过一系列步骤和策略,快速熟悉并掌握新系统的测试要点,从而提高测试效率和质量。本文旨在为测试新手提供一份指导,帮助
测试开发技术
0
“为什么裁员先从技术人员开始?”
将Python客栈设为“星标⭐”第一时间收到最新资讯作者 | 纯洁的微笑来源 | 纯洁的微笑(ID:keeppuresmile)很多公司裁员,都会先从技术入手。有一个网友做了这样一个比喻,城市里面的房子如果盖起来后,还需要农民工么?这句话引起引起了很多程序员共鸣,因为我们常常说程序员是IT
Python客栈
0
腾讯开始收费,这软件的良心操作彻底没了
腾讯作为互联网巨头,也曾出品过不少良心软件,比如QQ影音就因安装包小、CPU占用少、界面简洁无广告无插件等备受用户喜爱。但因为没有合适的赚钱盈利模式,QQ影音逐渐要被腾讯放弃。腾讯文档也因其实用性,受到不少办公族用户的关注。其实对于微信用户来说,腾讯文档还有许多鲜为人知的使用技巧。比如,我们在微信里
逆锋起笔
10
Spring Boot + flowable 快速实现工作流
关注我们,设为星标,每天7:40不见不散,架构路上与您共享回复架构师获取资源大家好,我是你们的朋友架构君,一个会写代码吟诗的架构师。来源:blog.csdn.net/zhan107876/article/details/120815560总览一、flowable-ui部署运行二、绘制流程图绘图细节:
Java架构师社区
0
2025年有望破万亿,AIoT助力下,物流行业正在迎来快速发展
作者:王飞鹏物联网智库 原创3月底,正在赶赴港股上市的菜鸟网络被阿里总部召回,上市进程按下了暂停键。在阿里去年定下“大拆分”战略后,菜鸟本是最有希望率先独立IPO的企业,但是在临门一脚之际,阿里却做出了不上市的决策。这一举动引发了外界热议。分析人士普遍认为,阿里之所以做出这一决策,很重要的一个原因是
物联网智库
0
Linux 新变革已经开始,文本三剑客地位不保!
众所周知,在 Linux 系统中,awk、grep、sed 这三个命令,因其功能强大,日常使用频繁,在 Linux 系统下处理文本是个非常不错的神器,grep 用于查找,sed 用于取行和替换,awk 用于运算。因此,这三个命令一直都有着文本三剑客的称号!但是,随着这个命令的出现,怕是三剑客的地位要
良许Linux
0
腾讯开始收费,这软件的良心操作彻底没了
转自:电脑报腾讯作为互联网巨头,也曾出品过不少良心软件,比如QQ影音就因安装包小、CPU占用少、界面简洁无广告无插件等备受用户喜爱。但因为没有合适的赚钱盈利模式,QQ影音逐渐要被腾讯放弃。腾讯文档也因其实用性,受到不少办公族用户的关注。其实对于微信用户来说,腾讯文档还有许多鲜为人知的使用技巧。比如,
dotNET全栈开发
10