一，前言

网上看了好多的vue2的源码学习记录，对自己的vue2认识还是有点帮助的，这段时间工作不是很忙，一直想着记录下自己对vue2的认识，趁着这段时间，静下心来写点东西记录下。参考文档

二，使用 Rollup 搭建 Vue2.x 源码环境

1. 初始化项目

npm init -y

package.json

{
  "name": "vue-dev-learn",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

参考官方源码实现逻辑，项目中也采用rollup进行打包编译，安装相关开发依赖

2. 安装开发依赖

// 1，安装 rollup：用于 Vue 源码的打包构建
npm install rollup

// 2，使用 babel：需要安装核心模块 @babel/core；
npm install @babel/core

// 3，rollup 与 babel 关联
npm install rollup-plugin-babel

// 4，浏览器兼容：将 ES6 语法转译为 ES5
npm install @babel/preset-env

// ==> 合并写法：一次性安装开发环境所需的全部依赖
npm install rollup @babel/core rollup-plugin-babel @babel/preset-env -D

3. 创建配置文件

rollup默认的配置文件是在项目根目录下rollup.config.js

import babel from 'rollup-plugin-babel'

// 导出 rollup 配置对象
export default {
  input: './src/index.js',   // 打包入口
  output: {                  // 打包出口：可定义为数组，输出多种构件
    file: 'dist/vue.js',   // 打包输出文件
    format: 'umd',         // 打包格式（可选项）：iife（立即执行函数）、esm（ES6 模块）、cjs（Node 规范）、umd（支持 amd + cjs）
    name: 'Vue',           // 使用 umd 打包需要指定导出的模块名，Vue 模块将会绑定到 window 上；
    sourcemap: true,       // 开启 sourcemap 源码映射，打包时会生成 .map 文件；作用：浏览器调试ES5代码时，可定位到ES6源代码所在行；
  },
  // 使用 Rollup 插件转译代码
  plugins: [
    babel({
      // 忽略 node_modules 目录下所有文件（**：所有文件夹下的所有文件）
      exclude: 'node_modules/**'
    })
  ]
}

可以看见配置文件中，入口是src/index.js，打包后会生成dist/vue.js,并且在window中绑定Vue属性

4. 创建入口文件

// Vue构造函数
function Vue () {

}

// 导出Vue
export default Vue;

ps: Vue的构造函数为什么是函数，而不是类？
官方源码中大量使用 Vue.prototype.xx去拓展Vue的功能，Vue 按功能把这些扩展分散到多个模块中去实现，而不是在一个模块里实现所有，这种方式是用 Class 难以实现的。这么做的好处是非常方便代码的维护和管理

5. 修改打包脚本

"scripts": { 
    "dev": "rollup -c -w"
 }

rollup 命令：默认会去找 node_module/bin/rollup；
-c：config 选项，使用配置文件，默认找 rollup.config.js；
-w：watch 选项，监听文件变化；当文件发生变化时重新打包；

6. 运行测试

npm run dev

查看目录结构变化

vue.js内容

6. 测试打包好后效果

创建html文件引用打包后生成的js文件，在浏览器中查看效果

测试结果OK，Vue成功绑定到window上

vue2.x 源码学习 一