什么是 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-blank
- @snowpack/app-template-react
- @snowpack/app-template-react-typescript
- @snowpack/app-template-preact
- @snowpack/app-template-svelte
- @snowpack/app-template-vue
- @snowpack/app-template-lit-element
- @snowpack/app-template-11ty
- See all community templates
这一选择其中一个进行初始化,而我这边是选择 @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