Snowpack with React：构建 Web 应用程序的绝佳方式
在本文中，我们将使用Snowpack构建一个 React 应用。Snowpack是我目前最感兴趣的技术之一。它有点像 Bundler，负责为 Web 应用准备第三方依赖项，但两者之间也存在诸多差异，使其成为一个值得探索的强大工具。Snowpack 不会在每次保存代码时都进行构建，而是在安装依赖项后自动执行。让我们一起来看看。（本文中我们将要构建的演示应用可在此处获取）
入门
我们将创建一个新项目。我们不会使用 Create React App、Gatsby、Next 等工具来创建项目，而是直接创建一个新文件夹，进入该文件夹，然后运行命令。npm init
> mkdir snowpack-demo
> cd snowpack-demo
> npm init
完成后，我们将安装一些开发依赖项。首先是引入snowpack，然后是@babel/core，@babel/cli和@babel/preset-react。
> yarn add --dev snowpack
> yarn add --dev @babel/core @babel/cli @babel/preset-react
传统上，我们可以snowpack直接运行npx，但稍后在这个示例中，我们将使用 snowpack 的 babel 插件。
为什么是巴别塔？
说到 Babel，你可能会问，为什么要在 Snowpack 中使用 Babel？这个问题问得好，因为 Snowpack 通常并不需要 Babel。
我们将在应用程序中使用 JSX。遗憾的是，浏览器无法直接处理 JSX，因此我们将使用 Babel 来帮助我们将代码转换为浏览器可以理解的格式。此外，由于我们已经在使用 Babel，我们将使用 Snowpacks 的可选 Babel 插件，该插件允许我们使用命名导入而不是通过 URL 导入。这意味着，按照 Snowpacks 的传统方式，我们会像这样导入 React 和 ReactDOM。
import React from "/web_modules/react.js"
import ReactDOM from "/web_modules/react-dom.js"
借助（可选的）Babel 插件，我们可以以更熟悉的方式导入模块，如果您习惯了 Create React App 等工具，这种方式可能会更适合您。
import React from "react"
import ReactDOM from "react-dom"
实际上，我们仍然在使用web_modulesSnowpack 创建的目录中的文件。Babel 插件会帮我们把文件名转换成这个路径。
包含 React
解决了这个问题后，我们将把 React 和 ReactDOM 添加到我们的项目中。目前，React 不支持 ES 模块。幸运的是，社区中有人提供了一个支持 ES 模块的 React 版本（如Snowpack 文档中所述），我们可以使用它。
yarn add react@npm:@reactesm/react react-dom@npm:@reactesm/react-dom
现在，如果我们运行程序yarn snowpack，就可以看到 Snowpack 对我们包含的模块执行一些操作。
> yarn snowpack
✔ snowpack installed: react, react-dom [0.79s]
✨ Done in 2.03s.
我们可以查看我们的web_modules目录，可以看到 Snowpack 为我们新添加的模块创建了文件，以及一个导入映射，我们可以将其用于支持这些模块的浏览器。
> ls web_modules
import-map.json
react.js
react-dom.js
接下来，我们将添加live-server，这是我们用来在本地提供文件的工具。
yarn add --dev live-server
我们终于可以开始编辑代码了。首先，我们将创建一个 HTML 样板页面。该页面将包含一个 id 为 `<link>` 的元素，app我们将把 React 应用附加到该元素上。此外，我们还会包含一个位于 `<script>` 中的 JavaScript 应用lib/app.js。该文件目前尚不存在，但我们稍后会处理它。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello world example!</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/lib/app.js"></script>
</body>
</html>
我们将添加一个.babelrc文件，用于添加我们的 Babel 配置。
{
"plugins": [["snowpack/assets/babel-plugin.js", {}]],
"presets": ["@babel/preset-react"]
}
接下来，我们将创建一个非常基础的 React 应用程序。src/app.js
import React from "react"
import ReactDOM from "react-dom"
const App = () => <h1>Hello everyone!</h1>
ReactDOM.render(<App />, document.getElementById("app"))
我们可以使用以下命令以监视模式运行此应用程序。
yarn babel src --out-dir lib --watch
这段代码会对我们的src目录运行 Babel 编译工具，并将编译后的文件写入一个lib目录（我们在其中引用的目录index.html）。
yarn live-server
这条命令会运行实时服务器来监视我们的 HTML/JavaScript 代码的更改。通常，我会编写一个脚本或使用类似concurrently 的工具来同时运行这两个命令。npm script.不过，为了便于举例，我更喜欢分别讨论这些内容。
如果我们打开浏览器并访问该页面（默认情况下为 localhost:8080），应该会看到以下内容：
最后，我们将对应用程序进行一些调整，以便在添加新依赖项时自动运行 Snowpack。回到我们的package.json文件，我们将prepare在对象中添加一个脚本scripts：
{
"name": "snowpack-demo",
...
"scripts": {
"prepare": "npx snowpack",
...
},
这段prepare脚本会在几种特定情况下运行，最值得注意的是，在我们安装新的依赖项之后。现在，如果我们引入styled-components，应该就能看到 Snowpack 自动运行，无需任何手动干预。
yarn add styled-components
yarn add v1.21.1
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
...
success Saved 1 new dependency.
info Direct dependencies
└─ styled-components@5.0.0
info All dependencies
└─ styled-components@5.0.0
$ npx snowpack
✔ snowpack installed: react, react-dom, styled-components. [0.75s]
✨ Done in 3.73s.
请注意，Snowpack 命令是在 yarn 完成依赖项添加之后执行的。我们可以像在未配置 Snowpack 的应用程序中一样继续使用 styled-components。
我对 Snowpack 可能带来的开发者体验和性能提升感到非常兴奋。我很想了解您在打包应用程序时使用的任何策略，或者您对本文的任何想法。请在 Twitter 上关注我：@ryanlanciaux
文章来源：https://dev.to/ryanlanciaux/snowpack-with-react-ch3