Vue.js 3 项目构建：从 Webpack 到 Vite 的转变之路

我是全栈王校长

在上一课中，我们跳过了官方推荐的 Vite，选择了 Webpack 来搭建 Vue.js 3 项目，这主要是因为我们看重 Webpack 丰富的技术生态系统。Webpack 经历了近十年的发展，积累了许多问题处理的经验，企业级应用的打包编译方案也非常丰富。

然而，近两年 Vue.js 官方推出了 Vite，许多新项目也开始采用 Vite。Vite 作为 Vue.js 3 官方标配的开发工具，代表了官方技术的发展方向，因此作为后续 Vue 学习和进阶，绝对是不可跳过的重要环节。

所以这一讲，我们就来尝试一下，如何用 Vite 来搭建 Vue.js 3 项目。不过，在开始之前，我们还是需要简单介绍一下 Vite。

Vite：Vue.js 3 的官方标配

首先我们要明确一点，Vue.js 发展到现在，已经不再是一个纯粹的前端页面代码库或框架了，而是一整套技术体系。这里的技术体系是指围绕着 Vue.js 进行构建的技术生态，包括测试工具 Vitest、文档工具 VitePress 等等。这些工具开箱即用的能力，目前都是基于 Vite 来进行打造的，这也说明了 Vite 在整个 Vue.js 生态中的重要地位。

Vite 是 Vue.js 作者尤雨溪早期基于 Rollup 做的一个开发工具，核心是为了提高 JavaScript 项目的开发效率。那么相比同类型的开发工具来说，它的优势在哪里呢？

除了前面我们提到的 Vite 支持开箱即用，无需像 Webpack 要做一堆繁杂的配置之外，很重要的一点就是 Vite 确实能够提升我们的开发效率。Vite 利用现在最新版本的浏览器支持 ESM 的特性，可以在开发模式下直接让所有 npm 模块和项目里的 JavaScript 文件按需加载执行，减少了开发模式编译时间，让开发过程中每次修改代码后能快速编译，进而提升了开发效率。

这一点对大部分开发者来说，都是解决了开发过程中很大的体验痛点。那我们再深入一步，为什么 Vite 能在开发模式中快速编译代码呢？因为 Vite 用了 esbuild。而 esbuild 是用 Go 语言编写的构建器，和普通 JavaScript 实现的构建器相比，它的打包速度能快 10~100 倍。

不过，截至到 2022 年，在 Vue.js 官方发布的 Vite 最新版 3.x 中，只有开发模式是用 esbuild 进行代码编译，而生产模式依旧用 Rollup 进行打包和编译。

这里问题就来了，既然我们说过 esbuild 的打包速度能够比普通 JavaScript 实现的构建器快 10~100 倍，那么 Vite 为什么在生产模式不选择用 esbuild，而去选择 Rollup 呢？

这是因为两种模式的侧重点有所不同。开发模式是面向开发者的，开发效率是最重要的，生产模式是面向企业项目的实际用户，代码功能稳定是第一位。

我们都知道，esbuild 其实也刚诞生不久，在代码分割和 CSS 处理方面没有 Rollup 那么成熟灵活。虽然它能降低代码编译时间提高开发效率，但最大的问题是还不稳定。可以用于开发者使用，但要是直接用于生产模式打包编译代码给企业用户使用，就不太能令人放心了。然而 Rollup 从 2015 年发布至今已经积累了多年的技术沉淀，形成了比较稳定的技术生态，所以 Vite 在生产模式就选择了 Rollup，追求稳定。

到这里，我们再来对 Rollup 做个补充介绍，Rollup 一开始在技术社区里的定位是做小工具开发的代码打包构建，但其实也是能跟 Webpack 一样做应用级别的代码打包构建。接下来，我们先讲解一下只用 Rollup 如何进行 Vue.js 3 项目配置，之后再来介绍 Vite 的使用，同时对比两者的差异。

毕竟，Vite 是基于 Rollup.js 的 Plugin 思路来打造插件体系的，同时也是把 Rollup.js 作为目前生产模式的底层打包构建工具。先了解 Rollup.js，可以让我们对 Vite 的插件使用概念有更清楚的认识。

Rollup 如何配置 Vue.js 3 项目？

用 Rollup 来搭建 Vue.js 3 项目，可以分成以下几个步骤：

项目目录和源码准备；
安装依赖；
Vue.js 3 的 Rollup 编译脚本配置；
执行开发模式和生产模式的 Vue.js 3 编译。

第一步就是要先准备好项目目录，如下所示：

lua 复制代码

.
├── dist/*
├── index.html
├── package.json
├── rollup.config.js
└── src
    ├── app.vue
    └── index.js

我们来从上到下介绍一下这个项目目录的结构：

dist，是一个文件夹，为 Vue.js 3 代码的编译结果目录，最后的编译结果都是前端静态资源文件，例如 JavaScript、CSS 和 HTML 等文件；
index.html，是项目的 HTML 页面文件；
package.json，是一个 JSON 文件，为 Node.js 项目的声明文件，声明了模块依赖、脚本定义和版本名称等内容；
rollup.config.js，是一个 JavaScript 文件，是本次 Vue.js 3 项目核心内容，主要是 Webpack 配置代码。
src，是一个文件夹，为 Vue.js 3 项目的源码目录，主要开发的代码内容都放在这个文件夹里。

**接着我们开始准备代码文件的内容。**这里要先把项目 HTML 页面源码准备到 index.html 文件里，HTML 源码内容如下所示：

xml 复制代码

<html>
  <head>
    <link rel="stylesheet" href="./index.css" />
  </head>
  <body>
    <div id="app"></div>
  </body>
  <script src="./index.js"></script>
</html>

然后在 src 的文件夹里新增两个 Vue.js 3 的源码内容，为后续编译做准备。这里是 src/app.vue 的源码内容：

xml 复制代码

<template>
  <div class="app">
    <div class="text">Count: {{state.count}}</div>
    <button class="btn" @click="onClick">Add</button>
  </div>
</template>

<script setup>
  import { reactive } from 'vue';
  const state = reactive({
    count: 0
  });
  const onClick = () => {
    state.count ++;
  }
</script>

<style>
.app {
  width: 200px;
  padding: 10px;
  margin: 10px auto;
  box-shadow: 0px 0px 9px #00000066;
  text-align: center;
}
.app .text {
  font-size: 28px;
  font-weight: bolder;
  color: #666666;
}
.app .btn {
  font-size: 20px;
  padding: 0 10px;
  height: 32px;
  min-width: 80px;
  cursor: pointer;
} 
</style>

以下是 src/index.js 项目的入口文件源码：

javascript 复制代码

import { createApp } from 'vue';
import App from './app.vue';

document.addEventListener('DOMContentLoaded', () => {
  const app = createApp(App);
  app.mount('#app');
})

当你完成了步骤一的项目目录的结构设计和源码准备后，就可以进行第二步安装 Rollup 项目依赖的 npm 模块了，也就是安装项目所需要的 npm 模块。

第二步：安装 Rollup 项目依赖

在完成项目目录结构和源码准备之后，我们需要安装项目所需的 npm 模块。首先，我们需要初始化 package.json 文件，然后安装相关的依赖包。

为了使用 Rollup 构建 Vue.js 3 项目，我们需要安装以下核心依赖：

Vue.js 3 相关包：
- vue：Vue.js 3 的核心库
Rollup 相关包：
- rollup：模块打包器
- @rollup/plugin-node-resolve：帮助 Rollup 解析 node_modules 中的模块
- @rollup/plugin-commonjs：将 CommonJS 模块转换为 ES6 模块
- @rollup/plugin-replace：在构建时替换变量
- rollup-plugin-vue：用于处理 Vue 单文件组件
- @vue/compiler-sfc：Vue 3 的单文件组件编译器
开发依赖：
- serve：用于启动本地服务器
- mkdirp：用于创建目录

我们可以通过以下命令来初始化项目并安装这些依赖：

bash 复制代码

# 初始化 package.json
npm init -y

# 安装 Vue.js 3
npm install vue@next

# 安装 Rollup 及相关插件
npm install -D rollup @rollup/plugin-node-resolve @rollup/plugin-commonjs @rollup/plugin-replace rollup-plugin-vue@experimental @vue/compiler-sfc

# 安装开发工具
npm install -D serve mkdirp

安装完成后，你的 package.json 文件应该包含这些依赖项。这样就完成了第二步的依赖安装工作，为下一步的 Rollup 配置做好了准备。

第三步：Vue.js 3 的 Rollup 编译脚本配置

现在我们需要配置 Rollup 来处理 Vue.js 3 项目。创建 rollup.config.js 文件，内容如下：

javascript 复制代码

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import replace from '@rollup/plugin-replace';
import vue from 'rollup-plugin-vue';
import { defineConfig } from 'rollup';

export default defineConfig({
  input: 'src/index.js',
  output: {
    format: 'es',
    dir: 'dist'
  },
  plugins: [
    replace({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),
      preventAssignment: true
    }),
    vue({
      target: 'browser',
      exposeFilename: false
    }),
    resolve(),
    commonjs()
  ]
});

这个配置文件告诉 Rollup：

从 src/index.js 开始构建
将结果输出为 ES 模块格式到 dist 目录
使用 Vue 插件处理 .vue 文件
使用 resolve 插件处理 node_modules 中的模块
使用 commonjs 插件转换 CommonJS 模块
使用 replace 插件处理环境变量

第四步：执行开发模式和生产模式的 Vue.js 3 编译

最后，我们需要在 package.json 中添加构建脚本来执行开发模式和生产模式的编译：

json 复制代码

{
  "scripts": {
    "dev": "rollup -c -w",
    "build": "NODE_ENV=production rollup -c",
    "serve": "serve -s dist"
  }
}

现在，你可以通过以下命令来运行项目：

开发模式：npm run dev - 启动监听模式，当文件变化时自动重新构建
生产构建：npm run build - 构建优化后的生产版本
启动服务：npm run serve - 在本地启动服务器预览构建结果

通过以上四个步骤，你就成功地使用 Rollup 搭建了一个 Vue.js 3 项目。这种方法虽然配置相对复杂，但让你更好地理解了项目构建的内部机制。而 Vite 作为官方推荐的工具，正是在这样的基础上进行了封装和优化，提供了更快的开发体验。