写在前头

本系列助力小伙伴们从零开始构建属于自己的小型vue框架，项目地址会同步更新到我的github中 yuizhixiaocaiji/vue-mini (github.com)，喜欢就点个收藏吧。

项目初始化

关于初始化项目仓库和初始化项目这里不多赘述了。不懂得小伙伴移步百度搜索，完成后的样子如图所示：

屏幕截图 2024-04-03 102249.png

初始化打包工具

对于工具库的打包选择方面，一般有三种选项，rollup、gulp、webpack，下面的他们各自的优势劣势。根据调研可知，对于我们本次研究的mini-vue，还是rollup最为合适。

工具	优势	劣势
Rollup	- 适合用于构建库和插件，生成的包更小	- 生态系统相对较小，可能缺少一些插件和功能
	- 支持 Tree-shaking，能够消除未使用的代码	- 对于复杂的应用程序，配置和使用相对复杂
	- 速度较快
Gulp	- 灵活，易于编写和维护自定义的构建任务	- 需要手动配置任务和插件
	- 适用于自动化处理各种任务，如文件压缩、合并等	- 对于大型项目，可能需要编写大量的任务和插件
	- 社区支持广泛，拥有丰富的插件库
Webpack	- 适用于构建复杂的应用程序，支持模块化开发	- 配置复杂，学习曲线较陡
	- 支持代码分割、懒加载等高级特性	- 构建速度较慢
	- 生态系统庞大，拥有丰富的插件和工具

下载rollup工具

下载pnpm

时代在进步，出现了越来越多的npm的先进工具，我们本次将使用pnpm来对我们的项目进行管理。

npm i -g pnpm

下载好后输入以下命令查看是否安装完成

pnpm --version

如果可以显示出版本号即为安装成功。

下载rollup

pnpm install rollup --save-dev

安装完成后，我们需要配置rollup打包命令，在package.json中添加以下代码

{  
    "name": "xxxxxxxx",  
    "version": "1.0.0",  
    "scripts": {  
        "build": "rollup -c"  
    }  
}

至此，我们的rollup已经安装完毕。

配置打包文件

单单完成rollup的下载工作是远远不够的，我们还需要对其进行配置。在根目录新建rollup.config.js。在其中加入以下配置代码：

export default {
  // 入口文件
  input:"./packages/vue/src/index.ts",  
  // 出口文件
  output: [
    {
      format: "cjs",
      file: "./packages/vue/dist/mini-vue.cjs.js",
      sourcemap: true,
    },
    {
      name: "vue",
      format: "es",
      file: "./packages/vue/dist/mini-vue.esm-bundler.js",
      sourcemap: true,
    },
  ],
  // 忽略模块相互引用导致的错误
  onwarn: (msg, warn) => {
    // 忽略 Circular 的错误
    if (!/Circular/.test(msg)) {
      warn(msg);
    }
  },
};

接下来，我们需要为rollup添加可用的插件，如果你想了解更多的rollup插件，请移步 rollup/awesome: ⚡️ Delightful Rollup Plugins, Packages, and Resources (github.com)

pnpm install --save-dev @rollup/plugin-typescript rollup-plugin-sourcemaps @rollup/plugin-node-resolve @rollup/plugin-commonjs @rollup/plugin-replace

下面，将下载好的插件用到我们的rollup.config.js中：

import typescript from "@rollup/plugin-typescript";
import sourceMaps from "rollup-plugin-sourcemaps";
import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import replace from "@rollup/plugin-replace";

export default {
  // 入口文件
  input:"./packages/vue/src/index.ts",
  plugins: [
    // 替换代码中的字符串
    replace({
      "process.env.NODE_ENV": JSON.stringify("development"),
      "process.env.VUE_ENV": JSON.stringify("browser"),
      "process.env.LANGUAGE": JSON.stringify(process.env.LANGUAGE),
    }),
    // 解析和处理Node.js模块依赖
    resolve(),
    // 于将CommonJS模块转换为ES模块
    commonjs(),
    // 集成TypeScript支持
    typescript(),
    // 用于生成和处理源映射文件,可以帮助开发者在调试阶段定位和解决问题。
    sourceMaps(),
  ],
  // 出口文件
  output: [
    {
      format: "cjs",
      file: "./packages/vue/dist/mini-vue.cjs.js",
      sourcemap: true,
    },
    {
      name: "vue",
      format: "es",
      file: "./packages/vue/dist/mini-vue.esm-bundler.js",
      sourcemap: true,
    },
  ],
  // 忽略模块相互引用导致的错误
  onwarn: (msg, warn) => {
    // 忽略 Circular 的错误
    if (!/Circular/.test(msg)) {
      warn(msg);
    }
  },
};

至此，rollup的配置工作已经完成，下面的文章我将从入口文件开始一步步教大家如何实现vue的各种模块以及内部工具。希望此系列的文章可以帮助到大家，喜欢就点个收藏吧。

从零开始搭建简易Vue框架——（一）vue-mini项目的初始化