snowpack 入门

什么是 snowpack

Snowpack是用于Web应用程序开发的现代轻量级工具链,可以对标 webpack, 像 webpack 这样的工具每次更新都会重新构建部分或全部代码,这就是他的不足之处了

Snowpack 每当更改文件时，都不会重建多个文件。没有捆绑可言，只有几毫秒的单文件重建，然后通过HMR在浏览器中进行即时更新

snowpack 的主要优点及支持

在50毫秒或更短时间内启动的开发环境。
更改会立即反映在浏览器中。
对TypeScript，JSX，CSS模块等的现成支持。

支持 react 和 Vue

工具支持
Babel,TypeScript,PostCSS,Sass

唯一的要求是在开发过程中，您必须使用现代的浏览器。 Firefox，Chrome或Edge的任何最新版本都可以。这是支持现代无捆绑ESM导入所必需的，该导入将您的应用程序加载到浏览器中。

关键点

 <body>
  <script type='module'>
    import * as React from 'react';
    console.log(React);
  </script>
</body>

snowpack 主要是利用了这个 script 的特性 type='module',关于这个属性,我之前在一篇文章中提到过:
https://www.cnblogs.com/Grewer/p/9518146.html

下载 snowpack

 # using npm
npm install --save-dev snowpack
 
# using yarn
yarn add --dev snowpack

snowpack 这个库是用来创建项目的,如果不想一直让他存在电脑里面,可以使用 npx 来创建

 npx create-snowpack-app new-dir --template [SELECT FROM BELOW] [--use-yarn]

这是模板创建列表:

这一选择其中一个进行初始化,而我这边是选择 @snowpack/app-template-react-typescript

 npx create-snowpack-app snowpacklearn --template @snowpack/app-template-react-typescript

创建完毕后目录是这个样子的:

 ├─.prettierrc
├─LICENSE
├─README.md
├─babel.config.json
├─jest.config.js
├─jest.setup.js
├─package-lock.json
├─package.json
├─result.txt
├─snowpack.config.json
├─tsconfig.json
├─types
|   ├─import.d.ts
|   └static.d.ts
├─src
|  ├─App.css
|  ├─App.test.tsx
|  ├─App.tsx
|  ├─index.css
|  ├─index.tsx
|  └logo.svg
├─public
|   ├─favicon.ico
|   ├─index.html
|   └robots.txt

目录说明

通过 npm run start 启动项目, 自动打开浏览器 localhost:8080

public 文件下用来存放公共文件以及模板, 可以直接通过路径访问,如 public 文件下的 favicon.ico 开启可以通过 http://localhost:8080/favicon.ico 来打开

src 文件放置组件和页面还有样式等 web 内容, src 里的静态内容通过编译以后可以通过 _dist_ 来访问,如 http://localhost:8080/_dist_/logo.svg

现在这个库是通过脚手架直接生成的, 支持 tsx ,但是还是很基础,相对于工业化的脚手架还是有一些差距,如 umi

关于 css 的问题

之前我看一些 snowpack 的介绍都是说有不能用 less 等缺点
有一些解决方案, 使用 css in js ,可以解决大部分问题
官网介绍了一个库 https://github.com/lukejacksonn/csz 也是 css in js
使用起来可以照顾大多数情况

使用 css modules

可以在文件命名上添加 module 来分别, 如 style.module.css

总结

时间点 (2020.6.29)
snowpack 基本的框架已经成型了,但是还是不够成熟,而且大框架,他们都有成熟的脚手架,如果官方愿意迁移过来还是很不错的
总的来说写一些练手的小项目是没什么问题,如果是复杂,多变的还是需要 webpack 等成熟方案的支持

最后附上 snowpack 的官方网站,他里面的说明是更加详尽一点 https://www.snowpack.dev/#overview

posted @ 2020-06-29 23:17 Grewer 阅读(2061) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

公告

昵称： Grewer
园龄： 7年8个月
粉丝： 20
关注： 0

+加关注

2025年3月

日

一

二

三

四

五

六

Grewer

my coding way

snowpack 入门

什么是 snowpack

snowpack 的主要优点及支持

关键点

下载 snowpack

目录说明

关于 css 的问题

总结

公告

最新随笔

随笔分类 (224)

随笔档案 (101)

友情链接

阅读排行榜

评论排行榜

推荐排行榜

最新评论

	<body>
	<script type='module'>
	import * as React from 'react';
	console.log(React);
	</script>
	</body>

	# using npm
	npm install --save-dev snowpack

	# using yarn
	yarn add --dev snowpack

	├─.prettierrc
	├─LICENSE
	├─README.md
	├─babel.config.json
	├─jest.config.js
	├─jest.setup.js
	├─package-lock.json
	├─package.json
	├─result.txt
	├─snowpack.config.json
	├─tsconfig.json
	├─types
	\| ├─import.d.ts
	\| └static.d.ts
	├─src
	\| ├─App.css
	\| ├─App.test.tsx
	\| ├─App.tsx
	\| ├─index.css
	\| ├─index.tsx
	\| └logo.svg
	├─public
	\| ├─favicon.ico
	\| ├─index.html
	\| └robots.txt