Webpack是过去几年最流行的JavaScript构建打包工具之一，得益于其灵活的构建配置和丰富的官方支持的第三方插件。Webpack的主要功能是将你所有的JavaScript文件，连同从NPM、图片、CSS等网络资源导入的所有模块，打包成一个浏览器可以执行的文件。Webpack也是一个学习曲线陡峭的复杂打包工具，因为它的灵活性意味着它有很多特性来应对各种不同的使用场景。更进一步，即使对单个文件进行微小的更改，Webpack也会重新打包并构建您的整个JavaScript应用程序。如果你不了解Webpack是如何工作的，你可能要等待半个多小时才能构建一个应用程序。Webpack发布于2014年，当时浏览器基本不支持ECMAScriptModule(ESM)的导入导出语法，所以在浏览器中运行JavaScript的唯一方法是将项目中的所有模块打包到一个文件中。这包括其他过程，例如使用Babel将JavaScript从较新版本转换为稍旧版本，以便浏览器可以运行该应用程序。使用Webpack的主要目的是创造最佳的开发体验，让JavaScript开发者可以使用最新的特性（ES6+）。现在所有主流浏览器都支持ESM语法，因此不再需要将所有JavaScript文件捆绑在一起即可在浏览器中运行您的应用程序。使用Snowpack，不需要打包配置Snowpack是一个JavaScript构建工具，它利用了浏览器对ESM的支持，允许我们构建单个文件并将其发送到浏览器。每个构建的文件都会被缓存，每次我们修改一个文件时，Snowpack只会重建这个文件。Snowpack的开发服务器也经过优化，仅在浏览器请求后才构建文件。这允许Snowpack立即启动（少于50毫秒）并在不增加启动速度的情况下扩展到大型项目。我自己试了一下，启动服务器只用了35毫秒。Snowpack的构建过程Snowpack会默认将你未打包的应用程序部署到生产环境中，但你还需要进行一些与构建相关的优化，例如minification、codesplitting、tree-shaking、lazyloading等。Snowpack还支持通过插件连接Webpack来打包应用的生产版本。这样，由于Snowpack已经转译了您的代码，您的捆绑器(Webpack)只需要捆绑常规的HTML、CSS和JavaScript文件。这就是为什么在打包过程中不需要复杂的webpack配置文件。最后，你还可以在package.json中设置browserslist属性来设置支持的浏览器版本：/*package.json*/"browserslist":">0.75%,notie11,notUCAndroid>0,notOperaMiniall"，在你的这个属性中是当执行snowpackbuild命令为生产环境构建项目时自动应用。Snowpack在构建开发版本时不执行任何转换，因此这不是问题，因为大多数时候您将针对最新的浏览器版本进行开发。Snowpack入门要开始使用Snowpack，您可以立即使用CreateSnowpackApp(CSA)和NPX创建Snowpack应用程序。例如，您可以使用以下命令使用CSA创建一个新的初始React应用程序：:{"scripts":{"start":"snowpackdev","build":"snowpackbuild","test":"web-test-runner\"src/**/*.test.jsx\"","format":"prettier--write\"src/**/*.{js,jsx}\"","lint":"prettier--check\"src/**/*.{js,jsx}\""},"dependencies":{"react":"^17.0.0","re??act-dom":"^17.0.0"},"devDependencies":{"@snowpack/plugin-dotenv":"^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":"^2.0.5","snowpack":"^3.0.1"}}您可以使用npmstart命令立即运行该应用程序。本地调试服务器将在8080端口上运行。CSA的React模板与CreateReactApp的默认模板非常相似：Snowpack支持来自React、Vue和Svelte等流行库的许多官方模板。您只需要将--template选项添加到指令中。结论你应该使用一个打包工具，因为你想使用它，而不是因为你需要使用它-Snowpack官方文档浏览器对ESM模块的支持创造了一种开发Web应用程序的新方法。除了非捆绑开发和在开发过程中快速构建应用程序的能力，Snowpack将成为Webpack的令人兴奋的替代品，使开发JavaScript应用程序变得更加容易。同时，它还允许您将生产版本与Webpack捆绑在一起，以优化应用程序的构建。查看Snowpack的官方文档以了解更多信息。原文：https://blog.bitsrc.io/snowpack-an-alternative-build-tool-to-webpack-9e8da197071d
