思凡资源网

思凡资源网

前端构建和打包工具进化史:从 Grunt 到 Vite

sifan10 0 33 次浏览 技术文章

随着项目的规模越来越大，对构建和打包工具的要求也越来越高。我们需要的不仅仅是简单的任务自动化，还需要高效的模块化管理、代码分割、树摇优化以及热更新等功能。因此，选择合适的构建和打包工具变得尤为重要。

Webpack

简介：Webpack 是一个强大的模块打包工具，支持加载器（loaders）和插件（plugins）来处理各种类型的资源，如JS、CSS、图片等。它能够将模块化的代码和资源打包成一个或多个bundle，便于管理和加载。

基本使用：

安装：首先，确保你已经安装了Node.js和npm。然后，在项目根目录下运行以下命令安装Webpack：

  npm install webpack webpack-cli --save-dev

配置：创建一个 webpack.config.js 文件来配置Webpack。一个简单的配置如下：

  const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 用于自动生成HTML文件
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); // 用于提取CSS到单独文件
const TerserPlugin = require('terser-webpack-plugin'); // 用于压缩JS
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin'); // 用于压缩CSS
const { CleanWebpackPlugin } = require('clean-webpack-plugin'); // 清理输出目录

module.exports = {
  // 入口点
  entry: './src/index.js',
  
  // 输出配置
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[contenthash].js', // 使用内容哈希提高缓存效率
    publicPath: '/' // 静态资源根路径
  },
  
  // 模式，影响代码优化程度和source map生成
  mode: 'production', // 或 'development'
  
  // 解析模块
  resolve: {
    extensions: ['.js', '.jsx', '.json'], // 自动解析这些扩展名
    alias: {
      '@': path.resolve(__dirname, 'src'), // 别名，简化导入路径
    },
  },
  
  // 模块规则，定义如何处理不同类型的模块
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader', // 使用Babel转换ES6+
        },
      },
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader', // 处理CSS
          'postcss-loader', // 应用PostCSS插件，如自动添加前缀
        ],
      },
      {
        test: /\.(png|jpe?g|gif|svg)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              outputPath: 'images', // 图片输出目录
            },
          },
        ],
      },
    ],
  },
  
  // 插件配置
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html', // HTML模板
      favicon: './public/favicon.ico', // 网站图标
      minify: { // HTML压缩选项
        collapseWhitespace: true,
        removeComments: true,
        removeRedundantAttributes: true,
        useShortDoctype: true,
        removeEmptyAttributes: true,
        removeStyleLinkTypeAttributes: true,
        keepClosingSlash: true,
        minifyJS: true,
        minifyCSS: true,
        minifyURLs: true,
      },
    }),
    new MiniCssExtractPlugin({
      filename: '[name].[contenthash].css', // 提取出的CSS文件名
    }),
    new CleanWebpackPlugin(), // 清理输出目录
    // 压缩JS和CSS的插件配置
    new TerserPlugin(),
    new OptimizeCSSAssetsPlugin(),
  ],
  
  // 开发服务器配置（仅在开发模式下有效）
  devServer: {
    contentBase: './dist',
    hot: true, // 热模块替换
    port: 3000, // 服务端口
  },
  
  // 性能提示配置，避免生成过大的包
  performance: {
    hints: process.env.NODE_ENV === 'production' ? 'warning' : false,
    maxEntrypointSize: 500000,
    maxAssetSize: 300000,
  },
};

打包：在命令行中运行以下命令开始打包：

  npx webpack

Rollup

Rollup 是一款轻量级的JavaScript模块打包工具，它专注于高效地打包库或应用程序，尤其是那些使用ES模块的项目。

安装 Rollup

首先，确保你已安装 Node.js 和 npm。接着，在项目根目录下，通过 npm 安装 Rollup 及其必要的插件：

npm init -y  # 初始化项目并生成 package.json 文件（如果还没有的话）
npm install rollup rollup-plugin-node-resolve rollup-plugin-commonjs @rollup/plugin-babel @rollup/plugin-json --save-dev

这里安装了几个常用的插件：

  • rollup-plugin-node-resolve：帮助 Rollup 查找外部模块。
  • rollup-plugin-commonjs：将 CommonJS 模块转换为 ES 模块。
  • @rollup/plugin-babel：使用 Babel 转换代码，支持最新的 JavaScript 特性。
  • @rollup/plugin-json：允许导入 JSON 文件。

创建 Rollup 配置文件

接下来，在项目根目录下创建 rollup.config.js 文件，并配置 Rollup：

// rollup.config.js
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import babel from '@rollup/plugin-babel';
import json from '@rollup/plugin-json';
import { terser } from 'rollup-plugin-terser'; // 用于生产环境代码压缩

export default {
  input: 'src/index.js', // 入口文件
  output: [
    {
      file: 'dist/bundle.cjs', // CommonJS 输出
      format: 'cjs',
    },
    {
      file: 'dist/bundle.esm.js', // ES模块输出
      format: 'es',
    },
    {
      file: 'dist/bundle.min.js', // 浏览器环境下使用的UMD格式，并压缩
      format: 'umd',
      name: 'MyLibrary', // UMD格式需要的全局变量名称
      plugins: [terser()], // 生产环境压缩代码
    },
  ],
  plugins: [
    resolve(), // 解析外部模块
    commonjs(), // 转换CommonJS模块
    babel({
      exclude: 'node_modules/**', // 排除 node_modules 目录下的文件
      babelHelpers: 'bundled',
      presets: ['@babel/preset-env'],
    }),
    json(), // 支持JSON文件导入
  ],
  external: ['lodash'], // 指定外部依赖，不会被打包进最终的bundle中
};

执行 Rollup 打包

配置完成后，你可以通过以下命令来运行 Rollup 进行打包：

npx rollup -c  # 使用配置文件进行打包

这个命令会根据 rollup.config.js 文件中的配置来打包你的代码，生成指定格式的输出文件。

注意事项

  • 根据项目的具体情况，你可能需要安装额外的插件来处理特定类型的资源，如 CSS、图片等。
  • @rollup/plugin-babel 的配置需要根据你的项目需求进行调整，例如添加对 TypeScript 的支持等。
  • 为了简化开发流程，可以将打包命令添加到 package.json 的脚本部分，如 "build": "rollup -c"。

Parcel

Parcel 是一个快速、零配置的 Web 应用打包工具，它旨在简化前端开发流程，自动处理 JavaScript、CSS、HTML、图片等资源的打包、优化和压缩。Parcel 的一大特点是开箱即用，无需繁琐的配置，非常适合快速原型开发或是小型至中型项目。

安装 Parcel

首先，确保你已经安装了 Node.js 和 npm。然后，在项目根目录下，通过 npm 安装 Parcel：

npm init -y  # 初始化项目并生成 package.json
 文件（如果还没有的话）
npm install parcel-bundler --save-dev  # 安装 Parcel 作为开发依赖

使用 Parcel

Parcel 的基本使用非常简单：

  1. 项目结构：在项目根目录下创建 src 文件夹，并在其中放入你的主入口文件，通常是 index.html 或 main.js。
  2. 启动开发服务器：在终端中，进入项目根目录，运行以下命令启动开发服务器：
   npx parcel serve src/index.html

这会自动监听文件变化，并在浏览器中打开你的应用。Parcel 会处理所有资源的打包、热模块替换（HMR）等。

完整配置（虽然Parcel主张零配置，但可以通过.parcelrc或环境变量进行有限的配置） 尽管 Parcel 主打零配置，但有时你可能需要对某些行为进行微调。这可以通过 .parcelrc 文件或环境变量来完成。

.parcelrc示例

{
  "extends": "@parcel/config-default",
  "transformers": {
    "*.svg": ["@parcel/transformer-svg-react"]
  },
  "resolvers": [
    ...
  ],
  "optimizers": {
    "*.png": ["@parcel/optimizer-png"]
  },
  "packagers": {
    "*.json": ["@parcel/packager-json"]
  }
}

在这个例子中，我们指定了一个 transformer 来将 .svg 文件转换为 React 组件，并配置了一个 optimizer 来优化 .png 图片。

环境变量配置 你也可以通过环境变量来控制 Parcel 的行为，例如：

  • PARCEL_PUBLIC_URL=/my-app 可以设置公共路径。
  • NODE_ENV=production 在构建时设置生产环境。

构建构建生产版本

当你准备部署应用时，可以运行以下命令来构建生产版本：

npx parcel build src/index.html

这将会在 dist 目录下生成经过优化的生产构建文件。

Gulp

Gulp 是一个基于流的自动化构建工具，它允许开发者通过简单的代码定义一系列任务来自动化常见的前端开发工作，如编译、压缩、合并文件等。

安装 Gulp

首先，确保你的系统中安装了 Node.js 和 npm。然后，在项目根目录下，通过 npm 安装 Gulp 及其 CLI 工具：

npm init -y  # 初始化项目并生成 package.json
 文件（如果还没有的话）
npm install gulp gulp-cli --save-dev  # 安装 Gulp 及其 CLI 作为开发依赖

接下来，安装一些常用的 Gulp 插件，这些插件将帮助你处理特定任务，例如编译 Sass、压缩 CSS 和 JavaScript 等：

npm install gulp-sass gulp-clean-css gulp-uglify-es --save-dev

创建 Gulp 配置文件

在项目根目录下创建一个名为 gulpfile.js 的文件，这是 Gulp 的配置文件，所有任务都将在这里定义：

// 导入 Gulp
const gulp = require('gulp');

// 导入插件
const sass = require('gulp-sass')(require('sass')); // 编译 Sass
const cleanCSS = require('gulp-clean-css'); // 压缩 CSS
const uglify = require('gulp-uglify-es').default; // 压缩 JavaScript

// 定义任务
function styles() {
  return gulp.src('src/scss/**/*.scss') // 源文件路径
    .pipe(sass()) // 编译 Sass
    .pipe(cleanCSS({ compatibility: 'ie8' })) // 压缩 CSS
    .pipe(gulp.dest('dist/css')); // 输出目录
}

function scripts() {
  return gulp.src('src/js/**/*.js') // 源文件路径
    .pipe(uglify()) // 压缩 JavaScript
    .pipe(gulp.dest('dist/js')); // 输出目录
}

// 定义默认任务，可以同时运行多个任务
const build = gulp.parallel(styles, scripts);

// 导出任务，使其可被 Gulp CLI 调用
exports.default = build;

运行 Gulp 任务

配置文件准备好后，你可以在终端中使用以下命令来运行 Gulp 任务：

npx gulp  # 如果全局安装了 gulp-cli，则可以直接运行 gulp

这个命令会执行我们在 gulpfile.js 中定义的默认任务（在这个例子中是 build 任务），它会依次编译并压缩 Sass 文件，以及压缩 JavaScript 文件。

注意事项

  • Gulp 4 引入了新的任务声明方式，使用 gulp.series 和 gulp.parallel 来组合任务，确保你安装的是 Gulp 4 版本。
  • 你可以根据项目需求安装更多的 Gulp 插件来处理图片、字体、HTML 等资源。
  • Gulp 的魅力在于其高度的可定制性，你可以根据需要创建任意数量的任务，并通过管道（pipe）串联起来，形成复杂的构建流程。

Grunt

Grunt 是一个基于 Node.js 的任务运行器，它通过简单的配置文件来自动化常见的构建任务，如编译、测试、合并和压缩代码等。

安装 Grunt

  1. 安装 Node.js: 确保你的系统上安装了 Node.js。可以通过访问 nodejs.org/ 下载并安装最新版。
  2. 初始化项目: 在项目根目录下打开终端，运行以下命令来初始化一个新的 npm 项目：
   npm init -y

3.全局安装 Grunt CLI: Grunt 的命令行界面需要全局安装一次：

   npm install -g grunt-cli

4.安装 Grunt 到本地项目: 在项目根目录下运行以下命令：

   npm install grunt --save-dev

5.安装 Grunt 插件: 根据你的需求安装相应的 Grunt 插件。例如，安装 grunt-contrib-uglify 来压缩 JavaScript 文件：

   npm install grunt-contrib-uglify --save-dev

创建 Grunt 配置文件

在项目根目录下创建一个名为 Gruntfile.js（注意大写的 G）的文件，这是 Grunt 的配置文件。

module.exports = function(grunt) {
  // 加载 grunt 插件
  grunt.loadNpmTasks('grunt-contrib-uglify');

  // 配置任务
  grunt.initConfig({
    uglify: {
      options: {
        mangle: true, // 修改变量名
        compress: true, // 压缩代码
        preserveComments: 'some' // 保留版权注释
      },
      my_target: {
        files: {
          'dist/main.min.js': ['src/**/*.js'] // 源文件和目标文件的映射
        }
      }
    }
  });

  // 注册任务
  grunt.registerTask('default', ['uglify']); // 定义默认任务
};

运行 Grunt 任务

配置文件准备好后，你可以在终端中使用以下命令来运行 Grunt 任务：

grunt  # 运行默认任务

或者运行特定的任务：

grunt uglify  # 运行 uglify 任务

注意事项

  • Grunt 配置基于 JavaScript 对象，你可以根据需要添加更多任务和配置项。
  • Grunt 插件众多，涵盖了从代码压缩、编译、测试到部署的各个环节，根据项目需求选择合适的插件。
  • Gruntfile.js 中的配置非常灵活，你可以定义多任务、任务依赖、自定义任务等。
  • 虽然 Grunt 曾经非常流行，但随着 Webpack、Rollup 等现代构建工具的兴起，Grunt 的使用有所下降。不过，对于一些特定场景或已有项目维护，Grunt 仍然是一个可靠的选择。

Vite

Vite 是一个由 Vue.js 作者尤雨溪开发的现代化的前端构建工具，它利用浏览器原生的 ES 模块导入功能，提供了快速的冷启动速度和高效的开发服务器体验。

安装 Vite

首先，确保你已经安装了 Node.js 和 npm。然后，在项目根目录下，通过 npm 初始化项目并安装 Vite：

npm init vite@latest

这个命令会引导你创建一个新的 Vite 项目，可以选择模板（如 Vue、React、vanilla JavaScript 等）并自动设置项目结构和依赖。

使用 Vite

一旦项目创建完成，你可以通过以下命令启动开发服务器：

npm run dev

这会启动一个热重载的开发服务器，你可以在浏览器中看到你的应用，并且任何更改都会几乎立即反映出来。

Vite 配置文件

Vite 使用vite.config.js作为配置文件，位于项目根目录。这是一个基本的配置示例：

// vite.config.js
import { defineConfig } from 'vite';

export default defineConfig({
  // 应用入口
  root: './',
  publicDir: 'public',
  base: './',
  server: {
    host: '0.0.0.0', // 允许外部访问
    port: 3000, // 服务端口
    open: true, // 自动打开浏览器
  },
  build: {
    outDir: 'dist', // 构建输出目录
    assetsDir: 'assets', // 静态资源目录
    target: 'es2015', // 设置兼容的目标浏览器版本
    minify: 'terser', // 压缩代码
    sourcemap: true, // 生成源码映射
  },
  // 配置别名
  resolve: {
    alias: {
      '@': '/src',
    },
  },
  // 插件配置
  plugins: [],
});

配置解释

  • root: 项目根目录。
  • publicDir: 静态资源目录，默认为 public。
  • base: 部署应用的基本URL路径。
  • server: 开发服务器配置。
  • build: 构建选项，包括输出目录、静态资源目录、兼容性目标、代码压缩等。
  • resolve.alias: 配置路径别名，方便模块导入。
  • plugins: 用于扩展 Vite 功能的插件列表。

运行构建

当准备部署应用时，可以运行以下命令来构建生产版本：

npm run build

这将在指定的 outDir 目录下生成生产环境的静态文件。

注意事项

  • Vite 的配置项非常灵活，可以根据项目需求进行调整。
  • Vite 支持 Vue、React、Preact、Svelte 等多种框架，并且有丰富的插件生态来满足不同开发需求。
  • Vite 的开发服务器提供了许多高级功能，如模块热更新、按需编译、ESM 服务工作线程支持等，无需额外配置即可享受这些特性。

Snowpack

Snowpack 是一个快速的前端构建工具，它利用现代浏览器的原生 ES 模块导入功能，提供近乎即时的开发体验。Snowpack 可以直接从源代码为开发服务器提供服务，仅在构建生产版本时才进行捆绑和优化。

安装 Snowpack

首先，确保你已经安装了 Node.js 和 npm。然后，创建一个新的项目目录，并初始化 npm：

mkdir my-snowpack-project
cd my-snowpack-project
npm init -y

接下来，安装 Snowpack：

npm install snowpack --save-dev

初始化 Snowpack 配置

Snowpack 会在项目根目录下自动生成一个 snowpack.config.js 配置文件，如果没有自动生成，你可以手动创建。以下是一个基本的配置示例：

// snowpack.config.js
module.exports = {
  // 入口点
  entryPoints: ["src/index.js"],

  // 输出目录
  outDir: "build",

  // 预处理器配置，例如 TypeScript、SASS 等
  preprocess: {
    // 添加 TypeScript 预处理器
    typescript: {},
  },

  // 构建选项
  buildOptions: {
    // 是否生成 source map
    sourcemap: true,

    // 静态资源目录
    publicDir: "public",
  },

  // 插件列表
  plugins: [],

  // 额外的包别名配置
  aliases: {
    components: "./src/components",
  },

  // MIME 类型映射
  mimeTypes: {
    ".ts": "text/typescript",
  },
};

开发服务器

启动 Snowpack 开发服务器：

npx snowpack dev

这会启动一个开发服务器，监听文件变化并自动刷新浏览器。

构建生产版本

构建生产版本的静态文件：

npx snowpack build

这会根据配置文件中的设置，将源代码编译并输出到 build 目录。

注意事项

  • Snowpack 支持原生 ES 模块导入，这意味着它可以很好地与现代前端框架和库协同工作，如 React、Vue、Preact 等。
  • Snowpack 通过插件系统支持额外的功能，如类型检查、样式预处理器、自动导入 polyfills 等。
  • 由于 Snowpack 直接从源代码提供服务，因此在开发过程中，你可能需要在浏览器中直接导入 .jsx、.ts 等源文件，而不是传统的 .js 输出文件。

Esbuild

Esbuild 是一个快速的 JavaScript 打包工具，以其惊人的构建速度和低内存占用而著称。Esbuild 支持原生 ES6 模块、TypeScript、JSX 以及 Tree Shaking 等特性，并且提供了命令行工具和 API 两种使用方式。

安装 Esbuild

首先，确保你已经安装了 Node.js。然后，通过 npm 安装 esbuild：

npm install esbuild --save-dev

基本使用

通过命令行 Esbuild 提供了一个命令行界面 (CLI)，可以直接用来打包文件：

npx esbuild entry.js --bundle --outfile=bundle.js
  • entry.js 是你的入口文件。
  • --bundle 表示将所有依赖一起打包成一个文件。
  • --outfile=bundle.js 指定输出文件的名称。

通过 JavaScript APIEsbuild 也支持通过 JavaScript API 进行更灵活的配置：

const esbuild = require('esbuild');

esbuild.build({
  entryPoints: ['src/index.js'],
  outfile: 'dist/bundle.js',
  bundle: true,
  minify: true, // 压缩代码
  sourcemap: true, // 生成源代码映射
  loader: {
    '.js': 'jsx', // 将 .js 文件当作 JSX 处理
  },
}).catch(() => process.exit(1));

高级配置

Esbuild 的配置非常灵活，可以通过传递选项给 build 方法进行细致控制。以下是一个包含更多配置的示例：

const esbuild = require('esbuild');

esbuild.build({
  entryPoints: ['src/index.js'],
  outfile: 'dist/bundle.js',
  bundle: true,
  minify: process.env.NODE_ENV === 'production', // 根据环境变量决定是否压缩
  sourcemap: true,
  target: 'es2015', // 设置目标浏览器版本
  format: 'iife', // 使用立即执行函数表达式格式输出
  define: {
    'process.env.NODE_ENV': `"${process.env.NODE_ENV}"`, // 定义环境变量
  },
  plugins: [
    // 自定义插件示例
    {
      name: 'my-plugin',
      setup(build) {
        build.onResolve({ filter: /^react$/ }, args => {
          return { path: args.path, external: true };
        });
      },
    },
  ],
}).catch(() => process.exit(1));

注意事项

  • Esbuild 的速度优势主要来自于它是用 Go 语言编写的核心，并通过 WASM 提供给 Node.js 使用。
  • 虽然 Esbuild 功能强大，但它相对年轻，生态系统相比 Webpack 或 Rollup 较小，可能某些特定的插件或功能支持不如其他工具全面。
  • Esbuild 本身不支持 CSS、图片等资源的处理，但可以通过插件系统集成第三方工具来实现这些功能。
原文链接：，转发请注明来源！
思凡资源网 › 技术文章 › 前端构建和打包工具进化史:从 Grunt 到 Vite