HarmonyOS开发者限时福利来啦!最高10w+现金激励等你拿~ 了解详情
写点什么

再也不需要打包器!Snowpack 2.0 发布,让打包速度快 10 倍的神奇工具

  • 2020-05-29
  • 本文字数:2626 字

    阅读完需:约 9 分钟

再也不需要打包器!Snowpack 2.0发布,让打包速度快10倍的神奇工具

在发布了超过 40 个 Beta 版本和候选版本之后,我们很高兴地宣布,Snowpack 2.0 今天正式发布了。


Snowpack 2.0 是一套为现代 Web 打造的构建系统。其特性包括:


  • 启动时间不到 50ms,在大型项目中速度也不会打折扣。

  • 无打包开发与生产构建打包。

  • 内置对 TypeScript、JSX 和 CSS 模块等特性的支持。

  • 可与 React、Preact、Vue、Svelte 和所有你喜欢的库一起使用。

  • Create Snowpack App(CSA)入门模板


# install with npmnpm install --save-dev snowpack# install with yarnyarn add --dev snowpack
复制代码

迈向 Snowpack 2.0 之路

Snowpack 1.0 是针对一个简单任务而设计的:安装 npm 软件包以直接在浏览器中运行。它背后的理念是,JavaScript 包是在开发过程中唯一 需要 使用打包器(bundler)的东西;只要能去掉这个要求,不再需要打包器,我们就能加快所有人的 Web 开发速度。


结果 Snowpack 大获成功。成千上万的开发人员开始使用 Snowpack 来安装他们的依赖项,简化了构建网站时使用的工具链。一夜之间,一种速度更快,更轻量级的开发环境呈现在人们面前。


Snowpack 2.0 则是为了这个 Web 开发的新时代而设计的构建系统。Snowpack 利用原生 ES 模块(ESM)支持,将构建好的文件直接提供给浏览器,这样你的开发环境就不再需要打包器了。它不仅是一种速度更快的工具,更是一种全新的 Web 构建系统和构建方法。

O(1) 构建系统的兴起


打包(bundling)是一种复杂度为 O(n) 的过程。当你更改一个文件时,你不能只重建这个文件。你往往需要针对多个相关文件,重建并重新打包应用程序中的一整块内容,这样才能正确完成更改过程。


Snowpack 则是一个复杂度为 O(1) 的构建系统。这个术语最初是由 Ives van Hoorne 提出的,它完美地体现了我们的 Web 开发未来愿景。用 Snowpack 构建的每个文件都可以表示为一个函数:build(file) => result。在开发过程中更改某个文件时,只需重建这一个文件就够了。


与传统的打包开发方法相比,它有诸多优点:


  • O(1) 构建速度更快。

  • O(1) 构建是可预测的。

  • O(1) 构建易于推理和配置。

  • 项目规模不会影响开发期间的构建时间。

  • 单个文件能更好地缓存。


最后一点很关键:每个构建的文件都会单独缓存,可随时重用。如果你从不更改某个文件,那就永远用不着重新构建它了

dev:更快的开发环境


运行 snowpack dev 就可以启动新的 Web 开发环境了,你会注意到的第一件事,就是 O(1) 构建工具链的速度竟然如此之快。Snowpack 的启动时间不到 50 毫秒。这里的单位没写错:是不超过 50 毫秒。


因为无需启动打包工作,所以服务器可以立即启动。在首次加载页面时,Snowpack 会构建你请求的第一批文件,然后将它们缓存起来以备将来使用。就算你的项目中包含一百万个不同的文件,Snowpack 也只会构建加载当前页面所需的那些文件而已。这就是为什么 Snowpack 能够一直提供飞快的运行速度。


snowpack dev 包括一个开箱即用的开发服务器,和一系列熟悉的功能:


  • TypeScript 支持

  • JSX 支持

  • 热模块更换(HMR)

  • 导入 CSS 和 CSS 模块

  • 导入图像和其他资产

  • 自定义路由

  • 代理请求

自定义构建

使用 Snowpack 内置的构建脚本,你就可以连接自己喜欢的那些构建工具。


在 Snowpack 中,你可以将每个构建表示为一个线性的"输入 ->构建 ->输出"工作流程。这样一来,Snowpack 便可以将文件纳入任何现有的 UNIX-y CLI 工具的管道,或者从管道中提取出来,而无需专门的插件生态系统支持。


// snowpack.config.json{  "scripts": {    // Pipe every "*.css" file through the PostCSS CLI    // stdin (source file) > postcss > stdout (build output)    "build:css": "postcss",  }}
复制代码


如果你用过 package.json 的“scripts”配置,应该会很熟悉这种格式。我们很喜欢这种直接使用 CLI,而无需非必要插件系统的简单方法。我们希望这种模式能提供与之类似的直观设计。


如果你想更好地掌控自己的构建(或者想编写自己的构建工具),Snowpack 还支持第三方 JavaScript 插件。可以查看我们的文档以了解有关自定义构建的更多信息

bulid:为生产环境打包


需要明确的是,Snowpack 并不反对生产环境中的打包。实际上我们推荐这种方法。在打包过程中的文件缩小、压缩、移除无用代码和网络优化等操作,都能让你的站点运行得更快,给用户带来更好的体验;这也是所有构建工具的终极目标。


Snowpack 将打包视为一种只用在最后一步,且只针对生产环境的构建优化过程。将打包放在最后一步后,你就不会将构建逻辑和打包逻辑混在同一个巨大的配置文件中了。相比之下,你的打包器可以获取已构建好的文件,并专注于它最擅长的工作:打包。


Snowpack 维护了一套针对 Webpack 和 Parcel 的官方插件。你可以选择自己喜欢的那一款,然后运行 snowpack build 来构建生产站点。


// snowpack.config.json{  // Optimize your production builds with Webpack  "plugins": [["@snowpack/plugin-webpack", {/* ... */}]]}
复制代码


如果你不想使用打包器也是可以的。Snowpack 的默认构建将为你提供一个没有打包过的网站,它运行起来也不会有任何问题。这就是 Snowpack 项目从一开始就坚持的理念:你想用打包器的时候才会用它,不想用的时候就可以不用,没有硬性要求

现在就尝试 Snowpack

我们很高兴能和大家分享所有这些内容,现在就下载 Snowpack,体验 Web 开发的未来吧。


npm i snowpack@latest --save-dev
复制代码


如果你已经装过 Snowpack 应用程序,那么 Snowpack 2.0 会引导你更新那些过时的配置。Snowpack 原来的软件包安装程序仍然可以正常运行,而且现在有了新的 dev 和 build 命令,Snowpack 甚至可以为你管理 Web 软件包。


请查看我们的文档站点以了解更多信息


https://www.snowpack.dev/

创建 Snowpack 应用

入门 Snowpack 的最简单方法是使用 Create Snowpack App(CSA)模板。CSA 使用预先配置的,由 Snowpack 驱动的开发环境为你自动初始化一个入门应用程序。


npx create-snowpack-app new-dir --template [SELECT FROM BELOW] [--use-yarn]
复制代码


Snowpack 的模板包括:


  • @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


这里可以查看 snowpack 社区提供的模板:


https://github.com/pikapkg/create-snowpack-app


感谢超过 80 位贡献者为新版做出的努力,编程愉快!


原文链接:


https://www.snowpack.dev/posts/2020-05-26-snowpack-2-0-release/


2020-05-29 00:024756
用户头像
蔡芳芳 InfoQ主编

发布了 799 篇内容, 共 548.8 次阅读, 收获喜欢 2789 次。

关注

评论 1 条评论

发布
用户头像
拉下来试了下,npm包都无法加载是什么情况...
`import dayjs from "dayjs"`
直接就整个崩溃了
2020-06-01 08:45
回复
没有更多了
发现更多内容

从技术宝库到云上机遇:华为云开天aPaaS的“修路记”

脑极体

23. 大部分工作将发生转变而非消失

Databri_AI

人工智能

模块八作业 一 消息队列存储模型设计

babos

#架构实战营

如何用 Java 判断一个给定的数是不是素数

HoneyMoose

技术分析| 音视频服务集群如何实现全球多中心化调度

anyRTC开发者

区块链 音视频 WebRTC 中心化调度

把低代码开发平台推给开百货店的朋友,对他有帮助吗?

低代码小观

低代码 企业 企业管理 管理者 管理工具

精灵图在现代前端中到底有用没,css中显示和隐藏竟有两种不同方式

你好bk

CSS JavaScript html css3 大前端

用明道云搭建一个住宅式物业管理系统

明道云

网络协议之:WebSocket的消息格式

程序那些事

网络协议 HTTP websocket 程序那些事

如何看待游戏世界的未来:解析去中心化区块链游戏的优缺点

CECBC

照妖镜纳米“相机”:让反应历程无处遁形

脑极体

Java 中的 NaN

HoneyMoose

架构实战课程 模块四作业

Frank

深入 iOS 静态链接器(一)— ld64

字节跳动终端技术

ios 移动终端 火山引擎 静态链接器

数据仓库的基本要求

奔向架构师

数据仓库 9月日更

WeTest云手机升级,支持iOS 15全新系统

WeTest

linux之service命令

入门小站

Linux

JDK 内置命令行工具学习笔记二

风翱

JVM 9月日更

CANN 5.0硬核技术抢先看

华为云开发者联盟

架构 AI 计算 CANN 异构计算架构

OpenKruise v0.10.0 新特性 WorkloadSpread 解读

阿里巴巴云原生

阿里云 容器 云原生 OpenKruise Workload

EMQ 映云科技加入信通院可信开源社区共同体,加速共建开源生态

EMQ映云科技

云计算 开源 物联网 开源社区 信通院

VEGA:诺亚AutoML高性能开源算法集简介

华为云开发者联盟

机器学习 AutoML 网络结构 VEGA AutoML算法

绝绝子!阿里这套并发图册+JDK源码速成笔记可以封神!

Java 程序员 架构 面试 计算机

公众服务常用电话号码大全

入门小站

工具

JavaScript进阶(八)generator(生成器)实现

Augus

JavaScript 9月日更

告别Kafka Stream,让轻量级流处理更加简单

阿里巴巴云原生

kafka 阿里云 云原生 ETL

Linux创建/删除用户组

在即

9月日更

第 3 章 -《Linux 一学就会》- 文件的基本管理和XFS 文件系统备份恢复

学神来啦

Linux 运维 文件存储 linux云计算

九月的更文生活

卢卡多多

生活 9月日更

Prometheus 2.26.0 新特性

耳东@Erdong

release Prometheus 9月日更

网络攻防学习笔记 Day145

穿过生命散发芬芳

VXLAN 9月日更

再也不需要打包器!Snowpack 2.0发布,让打包速度快10倍的神奇工具_移动_Fred K. Schott_InfoQ精选文章