Vue2源码解析实现—rollup搭建环境

关注

原创最新推荐文章于 2026-09-21 10:55:03 发布 277 阅读 AI 写同款· GEO 优化 ›

vue原理前期准备工作之rollup 1.vue的打包工具 vue的源码打包工具用的是一款专门用来打包js的工具rollup rollup的常见配置如下和webpack的配置也类似 @bable/preset-env配置参考 import babel from "rollup-plugin-babel" import serve from "rollup-plugin-serve" export default { input:'./src/index.js', // 入口文件 output:{ form 阅读详情

Vue2源码解析实现

rollup搭建环境

项目初始化
执行 npm init -y 进行项目初始化，生成package.json
安装依赖
执行 npm install @babel/core @babel/preset-env rollup rollup-plugin-babel rollup-plugin-serve -D 安装依赖
打包文件的配置
创建rollup.config.js文件
1. input：打包的入口文件
2. output：打包的出口文件
  - file:出口文件的路径
  - format：打包的类型一般是umd 它支持前端也支持后端
  - name：全局变量名
  - sourcemap：是否进行映射
3. plugins：使用的插件
  - babel：高级语法转成初级语法，是一个函数，里面对象属性的exclude是排除不需要转换的文件
  - server：开启一个服务，port：开启服务的端口号，contentBase：空字符串就是当前目录，openPage：启动的文件
执行打包命令
在package.json中的scripts里面写入**“dev”:“rollup -c -w”**
在终端执行 npm run dev
代码

package.json


//=======package.json=======
{
  "name": "vue2-source-code",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev":"rollup -c -w"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.15.0",
    "@babel/preset-env": "^7.15.0",
    "rollup": "^2.56.0",
    "rollup-plugin-babel": "^4.4.0",
    "rollup-plugin-serve": "^1.1.0"
  }
}

rollup.config.js


//=======rollup.config.js=======

import babel from "rollup-plugin-babel";
import serve from "rollup-plugin-serve";

export default {
  input: "./src/index.js", // 打包的入口文件
  output: {
    file: "dist/vue.js",
    formData: "umd", // 支持前端也支持后端   在window上Vue
    name: "Vue", // 全局变量名
    sourcemap: true, // 进行映射
  },
  plugins: [
    // 高级语法转成初级语法
    babel({
      exclude: "node_modules/**", // 排除不需要转换的文件
    }),
    // 开启一个服务
    serve({
      port: 3000, // 开启服务的端口号
      contentBase: "", // 空字符串的话就是当前目录
      openPage: "/index.html",
    }),
  ],
};