打开 http://localhost:8080

进阶

使用 css

由于浏览器不支持直接使用 JS 导入 CSS, 因此以下代码无法使用。

// ✘ NOT SUPPORTED OUTSIDE OF BUNDLERS
import './style.css';

如果想要引入css， 需要通过 style 标签直接引入资源。

官方推荐的使用方式是

1.简单应用，使用内敛 style

2.复杂应用推荐使用 CSS-in-JS

因此这里采用 styled-components

npm i styled-components -S
npx snowpack

修改 index.js

import React, { useState } from "react";
import ReactDOM from "react-dom";
import styled from 'styled-components';
const UI = styled.div`
color: red
`
function App() {
return (

hello world

);
}
window.addEventListener("load", () =>
ReactDOM.render(, document.getElementById("app"))
);

修改下 package.json

"start": "babel src/ --out-dir dist --watch & servor --reload"npm run start

使用图片

// ✘ NOT SUPPORTED OUTSIDE OF BUNDLERS
import './photo.png';

如今，没有浏览器支持直接从JS导入图像。相反，您将要使用以下库/解决方案之一：

使用TypeScript

npm i @babel/preset-typescript typescript -D

修改 .babelrc

{
"presets": ["@babel/preset-react", "@babel/preset-typescript"],
"plugins": [
"snowpack/assets/babel-plugin.js"
]
}

将 src/index 修改成 src/index.tsx 并加入声明。

import React, { useState } from "react";
import ReactDOM from "react-dom";
import styled, { ThemeProvider } from 'styled-components';
const ThemeColor = {
default: 'red'
}
interface Theme {
themeColor: typeof ThemeColor
}
const UI = ({ children }: { children?: React.ReactNode }) => {
return (
<>
{children}
>
);
};
const AppStyle = styled.div((props: Theme) => {
console.log(props);
return {
color: props.theme.default
}
}
)
function App() {
return (


hello world


);
}
window.addEventListener("load", () =>
ReactDOM.render(, document.getElementById("app"))
);

修改 启动命令，让 babel 包含对 后缀 tsx 的转义。

{
"start": "babel src/ --out-dir dist --watch --extensions \".ts,.tsx,.js,.jsx\" & servor --reload"
}

优化

默认情况下，snowpack会安装最小化的依赖关系并针对开发进行了优化。准备好进行生产时，请使用--optimize标志运行snowpack以启用某些仅针对生产的优化:

1.最小化依赖关系

2.转义低级语法

3.Tree-Shaking(通过--include启动自动模式)

4.支持旧版浏览 --nomodule

如果要构建单页应用程序（SPA），请使用--nomodule运行snowpack并传入应用程序入口点。然后，在你的应用程序中创建第二个脚本标签,带有nomodule 标识的入口。

完成此操作后，运行snowpack生成一个/web_modules/app.nomodule.js脚本，这个脚本会自动在旧的旧版浏览器上运行。

缓存处理

通过传入 addVersion

/* .babelrc */
"plugins": [
["snowpack/assets/babel-plugin.js", {"addVersion": true}],
]

可以输出带有版本号的脚本

// src/ File Input
import Foo from 'package-name';
// lib/ Babel Output
import Foo from '/web_modules/package-name.js?v=1.2.3';

结尾

snowpack 优势

1.减少了打包的时间成本，只要一次 snowpack。修改源码能够实时反馈在浏览器上。2.代码可移植能力强，相当于纯写 Javascript 语言。3.模块和源码相互独立，有点类似于 webpack 的 DDL。4.对于简单应用可以快速搭建，对于一些在线编辑的网站可以使用类似的方案进行构建。

snowpack 劣势

1.对 ES Modules 的依赖性强，在npm 上虽然 ES Modules 的包在逐渐增加，但是短期内需要包都需要做额外的处理。例如我想引入 Antd, 发现其中依赖了很多 CommonJS 的模块以及样式未使用 CSS-in-JS, 引入较为繁琐。

1.对于一些 css，images 资源处理不够友好，需要额外手动处理，并且底层使用 rollup 来进行一次 ES Modules 的导出太过于生硬, 没有强大的自定义的插件或者配置。

2.太多依赖包会造成网络问题

以上例子：https://github.com/hua1995116/snowpack-demo

对于现阶段的 snowpack 来说还是太年轻，但是年轻总是充满希望和可能。

https://mp.weixin.qq.com/s/hCigmhviknSTDgZYADB57Q