可以替代Webpack的构建工具：Snowpack

Webpack是过去几年最流行的JavaScript构建和打包工具之一，这得益于其灵活的构建配置和丰富的官方支持的第三方插件。 Webpack 的主要功能是将你所有的 JavaScript 文件，以及从 NPM 导入的所有模块、图像、CSS 和其他网络资源打包成一个可以由浏览器执行的文件。 Webpack也是一个复杂的打包工具，学习曲线陡峭，因为它的灵活性意味着它有很多功能来应对各种使用场景。此外，即使您对一个文件进行很小的更改，Webpack 也会重新打包并构建整个 JavaScript 应用程序。如果您不完全了解 Webpack 的工作原理，您可能需要等待半个多小时才能构建应用程序。 Webpack 于 2014 年发布，当时的浏览器基本不支持 ECMAScript Module（ESM）的导入导出语法，因此在浏览器中运行 JavaScript 的唯一方法就是将项目中的所有模块打包到一个文件中。 这还包括其他过程，例如使用 Babel 将 JavaScript 从较新版本转换为稍旧版本，以便浏览器可以运行应用程序。使用Webpack的主要目的是创造最佳的开发体验，以便JavaScript开发人员可以使用最新的功能（ES6+）。 如今，所有主要浏览器都支持 ESM 语法，因此不再需要将所有 JavaScript 文件捆绑在一起才能在浏览器中运行应用程序。 使用 Snowpack，无需包装配置 Snowpack 是一个 JavaScript 构建工具，它利用浏览器对 ESM 的支持，使我们能够构建单个文件并将其发送到浏览器。每个构建的文件都会被缓存，每次我们修改一个文件时，Snowpack 只会重新构建这个文件。 Snowpack 的开发服务器也进行了优化，使其仅在浏览器请求后才构建文件。这使得 Snowpack 能够立即启动（不到 50 毫秒）并扩展到大型项目，而无需提高启动速度。我自己尝试了一下，启动服务器只用了35毫秒。雪包构建过程 Snowpack 默认会将您未打包的应用程序部署到生产环境，但您还需要执行一些与构建相关的优化，例如最小化、代码分割、tree-shaking、延迟加载等。 Snowpack还支持通过插件连接Webpack来打包应用程序的生产版本。这样，由于 Snowpack 已经转译了您的代码，因此您的捆绑工具 (Webpack) 只需捆绑常规 HTML、CSS 和 JavaScript 文件。 这就是为什么在打包过程中不需要复杂的 Webpack 配置文件。 最后，你还可以在package.json中设置browserslist属性来设置支持的浏览器版本： /* package.json */ "browserslist": ">0.75%，不是 ie 11，不是 UCAndroid >0，不是 OperaMini all", 当您执行 Snowpack build 命令来构建生产项目时，会自动应用此属性。 Snowpack 在构建开发版本时不会执行任何转译，因此这不是问题，因为您大部分时间都会在最新的浏览器版本下进行开发。 Snowpack 入门 要开始使用 Snowpack，您可以使用 Create Snowpack App (CSA) 和 NPX 立即创建 Snowpack 应用程序。例如，您可以使用以下命令使用 CSA 创建一个新的初始化 React 应用程序： npx 创建-snowpack-app 反应-snowpack 将创建一个新的react-snowpack文件夹，其中包含最基本的依赖项： { "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} \"" }, "dependency": { "react": "^17.0.0", "react-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/反应”：“^11.0.0”，“@web/test-runner”：“^0.12.0”，“柴”：“^4.2.0”，“更漂亮”：“^2.0.5”，“snowpack” ": "^3.0.1" } } 您可以使用 npm start 命令立即运行该应用程序。本地调试服务器将在端口 8080 上运行。CSA 的 React 模板与 Create React App 的默认模板非常相似： Snowpack 支持来自 React、Vue 和 Svelte 等主要库的许多官方模板。您只需将 --template 选项添加到指令中即可。结论 当你使用打包工具时，你应该因为你想用它而使用它，而不是因为你需要使用它 - Snowpack 官方文档 Webpack 和 Snowpack 发布时间相隔数年，虽然 Webpack 一直是打包 JavaScript 模块最受欢迎的选择，但浏览器对 ESM 模块的支持开辟了开发 Web 应用程序的新方式。 除了分拆开发和在开发过程中快速构建应用程序的能力之外，Snowpack 是 Webpack 的一个令人兴奋的替代品，它使开发 JavaScript 应用程序变得更加容易。同时，它还允许您使用 Webpack 打包生产版本并优化应用程序的构建。 观看 Snowpack 的官方文档以了解更多信息。 原文：https://www.sychzs.cn/snowpack-an-alternative-build-tool-to-webpack-9e8da197071d