snowpack-入门

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

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

在 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/Grewe…

# 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

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

使用 css modules

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

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

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

什么是 snowpack

snowpack 的主要优点及支持

关键点

下载 snowpack

目录说明

关于 css 的问题

总结