Introducing Snowpack 2.0

栏目: IT技术 · 发布时间: 3年前

内容简介:After 40+ beta versions & release candidates we are very excited to introduceSnowpack 1.0 was designed for a simple mission: install npm packages to run directly in the browser. The theory was that JavaScript packages are the only thing stillGuess what? It

After 40+ beta versions & release candidates we are very excited to introduce Snowpack 2.0: A build system for the modern web.

  • Starts up in <50ms and stays fast in large projects.
  • Bundle-free development with bundled production builds.
  • Built-in support for TypeScript, JSX, CSS Modules and more.
  • Works with React, Preact, Vue, Svelte, and all your favorite libraries.
  • Create Snowpack App (CSA) starter templates.
# install with npm
npm install --save-dev snowpack

# install with yarn
yarn add --dev snowpack

The Road to Snowpack 2.0

Snowpack 1.0 was designed for a simple mission: install npm packages to run directly in the browser. The theory was that JavaScript packages are the only thing still requiring the use of a bundler during development. Remove that requirement, remove the bundler, and speed up web development for everyone.

Guess what? It worked! Thousands of developers started using Snowpack to install their dependencies and build websites with less tooling. A whole new type of faster, lighter-weight development suddenly became possible.

Snowpack 2.0 is a build system designed for this new era of web development.Snowpack removes the bundler from your dev environment, leveraging native ES Module (ESM) support to serve built files directly to the browser. This isn’t just a faster tool, it’s a new approach to web build systems.

The Rise of O(1) Build Systems

Introducing Snowpack 2.0

Bundling is a process of O(n) complexity. As your project grows, your dev bundler takes longer to start up and react to changes. Some bundlers may even have O(n^2) complexity: as your project grows, your dev environment gets exponentially slower as it handles code splitting, tree-shaking, and other bundle permutations on startup and on every change. Neither scenario is ideal during development when you’re working with hundreds or even thousands of files.

Snowpack is an O(1) build system.The term was first coined by Ives van Hoorne and it perfectly encapsulates our vision: Every file goes through a linear input -> build -> output build pipeline and then out to the browser (or the final build directory, if you’re building for production). Instead of having to rebuild & rebundle multiple files every time you make a change during development, you only need to rebuild that one file.

This has several advantages over the traditional bundled dev approach:

  • O(1) builds are faster.
  • O(1) builds are predictable.
  • O(1) builds are easy to reason about & configure.
  • Project size doesn’t effect build time.
  • Individual files cache better.

That last point is key: every built file is cached individually and reused indefinitely. If you never change a file, you will never need to re-build it again.

dev A Faster Dev Environment

Introducing Snowpack 2.0

Run snowpack dev to start your new web dev environment and the first thing you’ll notice is how flippin’ fast O(1) build tooling is. Snowpack starts up in less than 50ms. That’s no typo: 50 milliseconds or less.

With no bundling work needed to start, your server spins up immediately. On your very first page load, Snowpack builds your first requested files and then caches them for future use. Even if your project contains a million different files, Snowpack only builds the files needed to load the current page. This is how Snowpack stays fast.

snowpack dev includes a development server and a bunch of familiar features right out of the box:

  • TypeScript Support
  • JSX Support
  • Hot Module Replacement (HMR)
  • Importing CSS & CSS Modules
  • Importing Images & Other Assets
  • Custom Routing
  • Proxying Requests

Customizing Your Build

Build Scripts let you connect your favorite build tools. With Snowpack, you express every build as a linear input -> build -> output workflow. This allow Snowpack to pipe your files into and out of any existing UNIX-y CLI tools without the need for a special plugin ecosystem.

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

If you’ve ever used your package.json “scripts” config, this format should feel familiar. We love the simplicity of using your CLIs directly without an unnecessary plugin system. We hope this pattern offers a similar intuitive design.

If you want more control over your build (or want to write your own build tool) Snowpack also supports third-party JavaScript plugins .Check out our docs to learn more about customizing your build.

build Bundling for Production

Introducing Snowpack 2.0

To be clear, Snowpack isn’t against bundling for production. In fact, we recommend it. File minification, compression, dead-code elimination and network optimizations can all make a bundled site run faster for your users, which is the ultimate goal of any build tool.

Snowpack treats bundling as a final, production-only build optimization. By bundling as the final step, you avoid mixing build logic and bundle logic in the same huge configuration file. Instead, your bundler gets already-built files and can focus solely on what it does best: bundling.

Snowpack maintains official plugins for both Webpack & Parcel. Connect your favorite, and then run snowpack build to build your site for production.

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

If you don’t want to use a bundler, that’s okay too. Snowpack’s default build will give you an unbundled site that also runs just fine. This is what the Snowpack project has been all about from the start: Use a bundler because you want to, and not because you need to.

Try Snowpack Today

We are so excited to share this all with you today. Download Snowpack to experience the future of web development.

npm i snowpack@latest --save-dev

If you already have an existing Snowpack application, Snowpack 2.0 will walk you through updating any outdated configuration. Snowpack’s original package installer still works as expected, and with the new dev & build commands Snowpack even manages your web packages for you.

Check out our docs site to learn more.

Create Snowpack App

The easiest way to get started with Snowpack is with Create Snowpack App (CSA) . CSA automatically initializes a starter application for you with a pre-configured, Snowpack-powered dev environment.

npx create-snowpack-app new-dir --template [SELECT FROM BELOW] [--use-yarn]

:hamster: Happy hacking!

Thank you to all of our 80+ contributors for making this release possible.

Thanks to Melissa McEwen & @TheoOnTwitch for helping to edit this post.


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

独角兽之路

独角兽之路

三节课产品社区 / 电子工业出版社 / 2016-7 / 79.00元

对2~3年以上经验的互联网人来说,最好的学习可能不是听课,而是分析各类真实的产品和运营案例。而《独角兽之路:20款快速爆发且极具潜力的互联网产品深度剖析(全彩)》正好提供了对滴滴出行、百度外卖、懂球帝、快手App等20款极具代表性的准独角兽产品的发展路径的深度分析。 通过阅读《独角兽之路:20款快速爆发且极具潜力的互联网产品深度剖析(全彩)》,你可以发现互联网产品发展的背后,或许存在着某些共......一起来看看 《独角兽之路》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具