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