Snowpack - 更快的前端构建工具

最近开发项目，偶然间发现了Snowpack这个库，它在开发环境中使用原生 ES 模块标准引入 js 文件，这让我眼前一亮，自己我就对前端标准的发展十分感兴趣，因此就阅读了一下文档。javascript

更快的前端构建工具html

Snowpack 在开发环境中使用原生 ES 模块代替以往的打包方式，每个文件只须要构建一次并缓存，当某个文件改变时 Snowpack 只会从新构建这个被改动的文件并经过模块热替换（HMR）技术更新变动。前端

在生产环境打包时，Snowpack 能够集成其余打包工具，好比 Webpack。vue

关键功能java

更快的开发速度，开发服务器能够在 50ms 之内启动
利用模块热替换（HMR）技术，代码的变动能够更快的在浏览器中体现出来
在打包生产环境时，能够结合其余相似 Webpack 这样的打包工具使用
内置了对 TypeScript，JSX，CSS Module 等功能，开箱即用
提供插件的方式提供对相似 Babel，Vue 等第三方库的支持

Snowpack 的工做原理

归纳#

Snowpack 是一种现代、轻量级的构建工具，用于加快 Web 开发。 每次保存单个文件时，像 webpack 和 Parcel 这样的传统 JavaScript 构建工具都须要从新构建和从新打包整个应用程序块。这个从新捆绑步骤会在点击保存更改和在浏览器中看到它们之间引入延迟。node

在开发过程当中， Snowpack 为您的应用程序提供未捆绑的服务。每一个文件只须要构建一次，而后永久缓存。当文件更改时，Snowpack 会重建该单个文件。无需浪费时间从新捆绑每一个更改，只需在浏览器中进行即时更新（经过热模块更换 (HMR)速度更快）。您能够在咱们的Snowpack 2.0 发布帖子中阅读有关此方法的更多信息。react

Snowpack 的非捆绑开发仍然支持您用于生产的相同捆绑构建。当您为生产构建应用程序时，您能够经过 Webpack 或 Rollup（即将推出）的官方 Snowpack 插件插入您最喜欢的捆绑器。因为 Snowpack 已经在处理您的构建，所以不须要复杂的打包器配置。webpack

Snowpack 为您提供一箭双鵰： 快速、非捆绑式开发，在捆绑式生产版本中优化性能。git

非捆绑开发#

非捆绑开发是在开发过程当中将单个文件传送到浏览器的想法。仍然可使用您喜欢的工具（如 Babel、TypeScript、Sass）构建文件，而后经过 ESMimport和export语法在浏览器中单独加载依赖项。每当您更改文件时，Snowpack 只会重建该文件。github

另外一种选择是捆绑开发。 当今几乎全部流行的 JavaScript 构建工具都专一于捆绑开发。经过捆绑器运行您的整个应用程序会给您的开发工做流程带来额外的工做和复杂性，如今 ESM 获得普遍支持，这些工做是没必要要的。每一次更改——每次保存时——都必须与应用程序的其他部分从新绑定，而后您的更改才能反映在浏览器中。

与传统的捆绑开发方法相比，非捆绑开发有几个优势：

单文件构建速度很快。
单文件构建是肯定性的。
单文件构建更容易调试。
项目大小不会影响开发速度。
单个文件缓存更好。

最后一点是关键：每一个文件都是单独构建并没有限期缓存。 您的开发环境永远不会屡次构建文件，您的浏览器永远不会下载文件两次（直到它发生变化）。这就是非捆绑开发的真正力量。

使用 NPM 依赖#

NPM 包主要使用模块语法（Common.js 或 CJS）发布，若是没有一些构建处理就没法在 Web 上运行。即便您使用浏览器原生 ESMimport和export直接在浏览器中运行的语句编写应用程序，尝试导入任何一个 npm 包都会迫使您从新进行捆绑开发。

Snowpack 采起了不一样的方法：Snowpack不是针对这一要求捆绑整个应用程序，而是单独处理您的依赖项。这是它的工做原理：

node_modules/react/**/*     -> http://localhost:3000/web_modules/react.js
node_modules/react-dom/**/* -> http://localhost:3000/web_modules/react-dom.js
复制代码

Snowpack 会扫描您的网站/应用程序以查找全部使用过的 npm 包。
Snowpack 从您的node_modules目录中读取这些已安装的依赖项。
Snowpack 将您的全部依赖项单独捆绑到单个 JavaScript 文件中。例如：reactandreact-dom分别转换为react.jsand react-dom.js。
每一个生成的文件均可以直接在浏览器中运行，并经过 ESMimport语句导入。
因为您的依赖项不多更改，所以 Snowpack 不多须要重建它们。

在 Snowpack 构建您的依赖项后，任何包均可以导入并直接在浏览器中运行，而无需额外的捆绑或工具。这种在浏览器中本地导入 npm 包的能力（没有捆绑器）是全部非捆绑开发和 Snowpack 其他部分构建的基础。

<!-- This runs directly in the browser with `snowpack dev` -->
<body>
  <script type="module"> import React from 'react'; console.log(React); </script>
</body>
复制代码

快速开始

安装 Snowpack#

# npm:
npm install --save-dev snowpack
# yarn:
yarn add --dev snowpack
# pnpm:
pnpm add --save-dev snowpack
复制代码

运行 Snowpack CLI#

npx snowpack [command]
yarn run snowpack [command]
pnpm run snowpack [command]
复制代码

在整个文档中，咱们将使用snowpack [command]来记录 CLI。要运行您的本地安装积雪的版本，添加npx/ yarn run/pnpm run前缀用于安装积雪了包管理器。

对于长期开发，使用 Snowpack 的最佳方式是使用 package.json 脚本。这减小了您本身记住确切 Snowpack 命令/配置的须要，并让您与团队的其余成员共享一些经常使用脚本（若是适用）。

// Recommended: package.json scripts
// npm run start (or: "yarn run ...", "pnpm run ...")
"scripts": {
    "start": "snowpack dev",
    "build": "snowpack build"
}
复制代码

除了 react 模版，Snowpack 还提供了其余模板

@snowpack/app-template-blank

在本地为您的项目提供服务#

snowpack dev
复制代码

这将启动本地开发服务器进行开发。默认状况下，这会将您当前的工做目录提供给浏览器，并将查找index.html要启动的文件。您能够经过“挂载”配置自定义要提供服务的目录。

构建你的项目#

snowpack build
复制代码

这会将您的项目构建到一个build/能够在任何地方部署的静态目录中。您能够经过配置自定义您的构建。

查看全部命令和选项#

snowpack --help
复制代码

该--help标志将显示有用的输出。

文中若有错误，欢迎在评论区指正，若是这篇文章帮到了你，欢迎点赞👍收藏加关注😊，但愿点赞多多多多...