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

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",
    }),
  ],
};

• 项目目录