• Snowpack: An Alternative Build Tool to Webpack
  • Nathan Sebhastian
  • The Nuggets translation Project
  • Permanent link to this article: github.com/xitu/gold-m…
  • Translator: felixliao
  • Proofread by: Niayyy, Joe, and Hoarfroster

Snowpack: a build tool to replace Webpack

Webpack has been the most popular JavaScript build tool in recent years, thanks to its flexible build configuration and a wealth of officially supported third-party plug-ins.

The main function of Webpack is to pack all your JavaScript files, along with all the modules, images, CSS and other web resources imported from NPM, into one file that can be executed by the browser.

But Webpack is also a complex tool, with a steep learning curve, because its flexibility means it has a lot of functionality to handle a variety of different usage scenarios. Furthermore, Webpack repackages and builds your entire JavaScript application with even minor changes to a single file. If you don’t have a good understanding of how Webpack works, you can wait more than half an hour to build an application.

But then again, Webpack was released in 2014. At the time, browsers basically didn’t support the import and export syntax of the ECMAScript Module (ESM), so the only way to run JavaScript in a browser was to pack all the modules in a project into a single file.

This includes other processes, such as using Babel to convert JavaScript from a newer version to a slightly older version so that the browser can run the application. But the main purpose of using Webpack is to create the best possible development experience, allowing JavaScript developers to use the latest features (ES6+).

ESM syntax is now supported by all major browsers, so packing all your JavaScript files together is no longer a requirement for running your application in a browser.

No packaging configuration is required with Snowpack

Snowpack is a JavaScript build tool that takes advantage of the browser’s ESM support, allowing us to build individual files and send them to the browser. Every file that is built is cached, and every time we modify a file, only this one will be rebuilt by Snowpack.

Snowpack’s development server has also been optimized to build the file only when the browser requests it. This allows Snowpack to start instantly (in less than 50 milliseconds) and does not increase startup speed when extended to large projects. I tried it myself and started the server in 35 milliseconds:

Snowpack’s build process

Snowpack will deploy your unpackaged applications to production by default, but you’ll also need to do some build-related optimizations like minimization, code splitting, tree-shaking, lazy loading, and so on.

Snowpack also supports the ability to package production versions of applications via plug-ins connected to Webpack. This way, since Snowpack has translated your code, your packaging tool (Webpack) only needs to package regular HTML, CSS, and JavaScript files. This is why you don’t need a complex Webpack configuration file during the packaging process.

Finally, you can also set the browserslist property in package.json to specify the supported browser versions:

/* package.json */
"browserslist": "> < span style = "max-width: 100%; clear: both;.Copy the code

This property is automatically applied when you execute the Snowpack Build directive to build projects in production. Snowpack does not perform any translation when building a development version, so this is not a problem because most of the time you will be developing under the latest browser version.

Overhand Snowpack

To start using Snowpack, you can immediately Create the Snowpack App using Create Snowpack App (CSA) and NPX. For example, you can create a React initializer using CSA:

npx create-snowpack-app react-snowpack --template @snowpack/app-template-react
Copy the code

A new react-Snowpack folder is created with the most basic dependencies:

{
  "scripts": {
    "start": "snowpack dev"."build": "snowpack build"."test": "web-test-runner \"src/**/*.test.jsx\""."format": "prettier --write \"src/**/*.{js,jsx}\""."lint": "prettier --check \"src/**/*.{js,jsx}\""
  },
  "dependencies": {
    "react": "^ 17.0.0"."react-dom": "^ 17.0.0"
  },
  "devDependencies": {
    "@snowpack/plugin-dotenv": "^ at 2.0.5." "."@snowpack/plugin-react-refresh": "^ 2.4.0." "."@snowpack/web-test-runner-plugin": "^ 0.2.0." "."@testing-library/react": "^ 11.0.0"."@web/test-runner": "^ 0.12.0"."chai": "^ 4.2.0"."prettier": "^ at 2.0.5." "."snowpack": "^ 3.0.1." "}}Copy the code

You can immediately run the application with the NPM start command. The local debug server will run on port 8080. The React template for CSA is very similar to the default template for Create React App:

Snowpack supports many official templates from mainstream libraries, such as React, Vue, and Svelte. All you need to do is add the –template option to the directive.

conclusion

You should use a packaging tool because you want to, not because you need to – Snowpack official documentation

Webpack and Snowpack were released several years apart, and while Webpack has always been the most popular choice for packaging JavaScript modules, browser support for ESM modules has opened up a new way of developing Web applications.

Snowpack is an exciting alternative to Webpack, along with the ability to develop without packaging and quickly build applications during development, making it easier to develop JavaScript applications. At the same time, it allows you to use Webpack to package production versions for build optimization of your application.

Don’t forget to check out Snowpack’s official documentation to learn more.

If you find any mistakes in your translation or other areas that need to be improved, you are welcome to the Nuggets Translation Program to revise and PR your translation, and you can also get the corresponding reward points. The permanent link to this article at the beginning of this article is the MarkDown link to this article on GitHub.

The Nuggets Translation Project is a community that translates quality Internet technical articles from English sharing articles on nuggets. The content covers Android, iOS, front-end, back-end, blockchain, products, design, artificial intelligence and other fields. If you want to see more high-quality translation, please continue to pay attention to the Translation plan of Digging Gold, the official Weibo, Zhihu column.