Snowpack
什么是 Snowpack ?
Snowpack 是一种现代,轻量级的工具链,可加快 Web 开发速度。每次保存单个文件时,传统的 JavaScript 构建工具(例如 webpack 和 Parcel)都需要重新构建和重新打包应用程序的分片。 这个重新打包的步骤,在保存更改和在浏览器里看到更改的反映之间引入了一个时间延迟。
Snowpack 在开发的时候不用打包应用。 每个文件只需要构建一次,然后就可以永久缓存。 文件更改时,Snowpack 会重建该单个文件。 没有任何时间浪费在重新打包每个更改上,就是在浏览器中进行即时更新(通过热模块替换(HMR)更快地进行了更新)。 您可以在我们的 Snowpack 2.0 发布帖子中阅读有关 此方法的更多信息。
Snowpack 提供不用打包的开发环境,同时也支持你原来生产环境使用的打包方式。当您构建用于生产的应用程序时,可以通过 Snowpack 官方的 Webpack 或 Rollup(即将推出)插件插入您最喜欢的打包器。 Snowpack 已经可以处理您的构建,因此不需要复杂的打包器配置。
Snowpack 为您提供两全其美的优势:在线上打包的时候提供快速,性能优化过的无打包的开发体验。
关键特性
- 50ms 或更少的时间启动前端开发环境。
- 即时在浏览器显示变更。
- 集成你喜欢的打包器,优化生产环境打包。
- 对 TypeScript, JSX, CSS Modules 等现成支持。
- 连接你喜欢的第三方工具。
支持的库
- React
- Preact
- Svelte
- Vue
- lit-html
- lit-element
- Styled Components
- Tailwind CSS
- 更多
支持的工具
- Babel
- TypeScript
- PostCSS
- Sass
- esbuild
- 11ty
- 更多
浏览器支持
Snowpack 为现代和旧版浏览器构建您的网站。甚至支持 IE 11。您可以使用“ browserlist” package.json 属性控制和自定义此行为。
唯一的要求是,在开发期间必须使用现代的浏览器。 Firefox,Chrome 或 Edge 的任何最新版本都可以。 这是支持现代无打包 ESM 导入所必需的,该导入将您的应用程序加载到浏览器中。
开始
安装 Snowpack
# 使用 npm
npm install --save-dev snowpack
# 使用 yarn
yarn add --dev snowpack
Snowpack 可以通过 npm install -g Snowpack
全局安装。但是,我们建议在每个项目中通过 --save-dev
/--dev
将它安装到本地。你可以通过 package.json 中 scripts npm 的 npx snowpack,或者通过 yarn snowpack 运行 Snowpack 命令。
创建 Snowpack 应用 (CSA)#
最简单的开始使用 Snowpack 的方法是通过 Create Snowpack App (CSA). CSA 自动初始化一个配置好 Snowpack 开发环境的开始应用。
如果你曾经用过 Create React App,这个和它有些像。
npx create-snowpack-app new-dir --template [SELECT FROM BELOW] [--use-yarn]
官方应用模板#
- @snowpack/app-template-blank
- @snowpack/app-template-blank-typescript
- @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-lit-element-typescript
- @snowpack/app-template-11ty
- 查看所有社区模板
迁移一个现有的应用
将现有的应用程序迁移到 Snowpack 意味着很轻松,因为 Snowpack 支持大多数功能和构建工具,这些功能和构建工具已经在您今天使用(Babel,PostCSS 等)。 如果这是您第一次使用 Snowpack,则应从创建 Snowpack 应用程序(CSA)模板 开始,从旧应用程序复制“ src”和“公共”文件,然后运行 snowpack 开发人员,对所有剩余问题进行故障排除。
CSA 是现有应用程序的一个很好的起点,因为它默认情况下内置了一些常用工具(例如 Babel)来复制传统捆绑应用程序的全部功能集。 CSA 还可以替代 Create React App,因此任何现有的 Create React App 项目都应通过 CSA 运行且零更改。 如果您遇到问题,请在我们的文档站点的其余部分中搜索有关从 JS 和 CSS 导入 CSS 的信息,资产引用等。
主要概念
Unbundled Development#
Unbundled development is the idea of shipping individual files to the browser during development. Files can still be built with your favorite tools (like Babel, TypeScript, Sass) and then loaded individually in the browser with dependencies thanks to ESM import
and export
syntax. Any time you change a file, Snowpack only ever needs to rebuild that single file.
The alternative is bundled development. Almost every popular JavaScript build tool today focuses on bundled development. Running your entire application through a bundler introduces additional work and complexity to your dev workflow that is unnecessary now that ESM is widely supported. Every change – on every save – must be rebundled with the rest of your application before your changes can be reflected in your browser.
Unbundled development has several advantages over the traditional bundled development approach:
- Single-file builds are fast.
- Single-file builds are deterministic.
- Single-file builds are easier to debug.
- Project size doesn’t affect dev speed.
- Individual files cache better.
That last point is key: Every file is built individually and cached indefinitely. Your dev environment will never build a file more than once and your browser will never download a file twice (until it changes). This is the real power of unbundled development.
Using NPM Dependencies#
NPM packages are mainly published using a module syntax (Common.js, or CJS) that can’t run on the web without some build processing. Even if you write your application using browser-native ESM import
and export
statements that would all run directly in the browser, trying to import any one npm package will force you back into bundled development.
Snowpack takes a different approach: Instead of bundling your entire application for this one requirement, Snowpack processes your dependencies separately. Here’s how it works:
node_modules/react/**/* -> http://localhost:3000/web_modules/react.js
node_modules/react-dom/**/* -> http://localhost:3000/web_modules/react-dom.js
- Snowpack scans your website/application for all used npm packages.
- Snowpack reads these installed dependencies from your
node_modules
directory. - Snowpack bundles all of your dependencies separately into single JavaScript files. For example:
react
andreact-dom
are converted toreact.js
andreact-dom.js
, respectively. - Each resulting file can be run directly in the browser, and imported via ESM
import
statements. - Because your dependencies rarely change, Snowpack rarely needs to rebuild them.
After Snowpack builds your dependencies, any package can be imported and run directly in the browser with zero additional bundling or tooling required. This ability to import npm packages natively in the browser (without a bundler) is the foundation that all unbundled development and the rest of Snowpack is built on top of.
<!-- This runs directly in the browser with `snowpack dev` -->
<body>
<script type='module'> import React from 'react';
console.log(React);
</script>
</body>