Modern Build Tools: Build your Web Applications Faster

现代构建工具：更快地构建 Web 应用程序

比较最常见的构建工具 Webpack、Vite、Parcel 和 Snowpack 高效构建。

什么是建筑？

“构建”是指将源代码转换和捆绑成浏览器可以有效解释和执行的格式的过程。为此，我们使用构建工具。

转译：将现代 JavaScript （ES6+）或其他语言（如 TypeScript）转换为与更广泛的浏览器兼容的版本。
捆绑：将多个文件和模块合并为更少的文件，以减少加载应用程序所需的 HTTP 请求数量。
缩小：从代码中删除不必要的字符（如空格）以减小其大小，从而缩短加载时间。
优化：通过应用各种技术（如 tree shaking）来增强代码的性能，从而消除未使用的代码。

为什么需要构建工具？

效率：构建工具可自动执行重复性任务，显著加快开发过程并最大限度地减少人为错误。
兼容性：它们通过转换和填充代码来帮助确保您的应用程序在不同的浏览器和设备上工作。
性能：通过优化代码的大小和结构，构建工具可以缩短应用程序的加载时间和整体性能，从而有助于提供更好的用户体验。
现代功能：它们使开发人员能够使用现代编程语言和技术，例如 React 中的 JSX 或 JavaScript 中的模块，使开发更加健壮和可维护。

Webpack 网络包

Webpack 是一个功能强大的模块打包器，主要用于 JavaScript，但能够转换、捆绑或打包几乎任何资源或资产。它采用具有依赖项的模块，并生成代表这些模块的静态资产。

核心概念

入口：入口点告诉 Webpack 从哪里开始，并按照依赖关系图知道要捆绑什么。
Output：它是输出它创建的 bundle 以及如何命名这些文件的位置;通常在目录中。.dist
加载器：Webpack 只理解 JavaScript 和 JSON 文件。加载器允许 Webpack 处理其他类型的文件并将它们转换为可以捆绑的有效模块。
插件：虽然加载器用于转换某些类型的模块，但可以利用插件来执行更广泛的任务，例如捆绑包优化、资产管理和环境变量注入。
Mode：通过将 mode 参数设置为、、或，Webpack 可以根据每个环境启用优化。默认模式为。developmentproductionnoneproduction

使用 Webpack 的优势

优化：Webpack 提供了复杂的优化功能，包括用于删除未使用代码的 tree shaking、用于按需加载应用程序部分的代码拆分以及最小化用于生产的文件。
开发人员体验：热模块替换（HMR）等功能通过在浏览器中更新模块而不完全刷新来增强开发人员体验。
定制：通过使用加载器和插件，Webpack 可以根据任何项目的特定需求进行定制，使其用途广泛。

设置一个基本的 Webpack 项目

初始化您的项目：

mkdir webpack-demo && cd webpack-demo
npm init -y
npm install webpack webpack-cli --save-dev

配置您的入口和输出：

在项目根目录中创建一个：webpack.config.js

const path = require("path");

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist"),
  },
};

添加 Loader 和插件：

安装加载程序，例如，为 JavaScript：babel-loader

npm install --save-dev babel-loader @babel/core @babel/preset-env

将其添加到您的：webpack.config.js

module: {
  rules: [
    {
      test: /.js$/,
      exclude: /node_modules/,
      use: {
        loader: "babel-loader",
        options: {
          presets: ["@babel/preset-env"],
        },
      },
    },
  ];
}

在 Your 中添加一个脚本来运行 Webpack。运行 Webpackpackage.jsonnpm run build

维特

Vite 因其对速度和效率的关注而迅速受到欢迎，它利用了 ES 模块等现代 Web 技术。

速度：利用本机 ES 模块提供代码，从而实现极快的重新加载时间，使其成为开发的理想选择。
简单性：为 React、TypeScript 和其他现代 Web 技术提供开箱即用的支持，只需最少的配置即可开始使用。
优化：在生产构建中使用 Rollup，确保您的捆绑包针对性能进行了优化。
用例：最适合可以从其快速开发周期中受益的新项目和现代 Web 应用程序。对于需要 Webpack 提供的复杂定制的非常复杂的遗留项目，可能不太理想。

了解更多关于 Vite 的信息。请参考：为什么 Vite 是最好的？

包裹

Parcel Bundler 因其用户友好的捆绑 Web 应用程序的方法在 Web 开发领域中脱颖而出。Parcel 以其零配置设置而闻名，它允许开发人员快速捆绑他们的项目，而无需复杂的设置或配置文件。

包裹的主要特点

零配置：开发人员可以启动和捆绑他们的 Web 应用程序，而无需创建配置文件。
支持多种文件类型： Parcel 轻松处理 HTML、CSS、JavaScript 和许多其他文件类型。
性能：通过利用多核处理，Parcel 实现了更快的构建时间，使其成为大型项目的理想选择。打包器有效地跟踪和合并导入的文件，通过减少 HTTP 请求来优化应用程序的性能。

用法：

从 NPM 安装 parcel-bundler

npm install parcel-bundler

在 Your 中添加一个脚本来运行 Webpack。运行 Webpackpackage.jsonnpm run build

高级功能

代码拆分：允许将代码划分为各种捆绑包，这些捆绑包可以按需加载或并行加载，从而缩短应用程序的加载时间。
热模块替换（HMR）：使开发人员能够实时更新模块，而无需重新加载整个页面，从而简化开发过程。
自动转换：Parcel 通过 Babel、PostCSS 和其他转换器自动处理文件依赖项，以最少的工作量使您的项目适应生产。

积雪

这种现代构建工具与 Webpack 和 Parcel 等传统工具的不同之处在于，在开发过程中，无需将整个应用程序块与每个微小的更改重新捆绑在一起。

非捆绑式开发

此方法涉及在开发过程中将单个文件按原样提供给浏览器，并利用浏览器对 ES 模块（ESM）导入和导出语法的本机支持。

速度：由于每个文件只构建一次，然后被缓存，因此更改几乎会立即反映在浏览器中，而无需重新捆绑。
效率：开发过程明显变得更快、更具确定性，因为项目规模不会影响开发速度。
调试：单文件构建更易于调试，因为没有复杂的捆绑包遮挡源代码。
缓存：浏览器仅根据需要下载文件，从而更有效地缓存文件。

用法：

从 NPM 安装 parcel-bundler

npm install snowpack

在 Your 中添加一个脚本来运行 Webpack。运行 Webpackpackage.jsonnpm run build

对构建工具感到困惑：何时使用哪个？

开始一个新项目？如果您正在使用现代框架和标准，请考虑 Vite 的简单性和速度。Parcel 也是无需太多配置即可快速设置的不错选择。
正在处理复杂的大规模应用程序？Webpack 广泛的自定义选项使其成为处理复杂捆绑需求的可靠选择。
需要开发速度？借助 ESM，Snowpack 和 Vite 是您快速重建的首选。
正在寻找性能良好的简单设置？Parcel 提供了一种零配置和高效捆绑的平衡方法。