前言：

学习源码总需要一些准备工作，不能一股脑的就直接点开源码就是看。特别是像我这样基础比较薄弱的，那只会是看的云里雾里。废话不多说，最主要的就是先搭建一个开发环境，以便于手写源码，一点一点的吃透源码。

为了学习起来轻松一些，在这个我使用的是Rollup打包工具进行一个环境的搭建。（Rollup比较轻量级，用webpack也是可以的，自行选择）

初始化项目

首先，npm init -y 初始化生成package.json文件，再下载相关的rollup等依赖，如下：

> npm init -y  // 初始化生成package.json文件（用于记住开发相关的依赖）
    

> npm install rollup rollup-plugin-babel @babel/core @babel/preset-env --save-dev    
    // 安装rollup打包工具，主要目的就是打包我们js库（rollup比webpack小很多）
    // 除了安装我们rollup之外，可能还需要编译我们的高级语法，所以还需要用到babel
    // 表示在rollup里面去使用这个babel插件。用这个babel的话呢，需要安装它的核心模块，叫做 @babel/core 块。用这个插件的时候会去调这个 @babel/core 块，@babel/core 块会把高级语法转换成低级语法
    //那我们还需要去安装一些预设，比如怎么把let或const转换成var、箭头函数的转换、类的转换，这里需要安装一个差插件 @babel/preset-env --save-dev

指定打包脚本

安装好依赖之后，这里需要用到rollup的话呢，需要新建一个rollup.config.js配置文件，在执行打包命令的时候，它回去找这个rollup.config.js配置文件

指定一个脚本 "dev": "rollup -cw" ，当 npm run dev时，执行后面的语句 "rollup -cw"

"dev": "rollup -cw"
    // rollup -c 的意思是用 rollup来打包，并且用配置文件 rollup.config.js
    // -w 是监控文件变化

指定入口和出口

要打包的话，还需要一个入口文件：新建文件 src/index.js

顺便在index.js里填点东西，以便测试：

有了入口自然还需要指定出口，rollup.config.js默认可以导出一个对象，作为打包的配置文件

import babel from 'rollup-plugin-babel'
export default {
    input: './src/index.js', // 指定入口文件
    output: { // 指定出口
        file: './dist/vue.js', // 指定出口，打包的文件放到哪
        name: 'vue', // 打包以后在全局上给增加一个Vue（global.Vue）(打包以后可以在浏览器里面通过一个html来引用)
        format: 'umd', // 告诉打包的格式是什么，常见的打包的格式有：esm es6模块 commonjs模块 iife自执行函数 umd（umd兼容 commondjs amd iife）
        sourcemap: true, // 希望可以调试源代码
    },
    plugins: [ // 配置插件
        babel({ // 所有的插件都是函数
      exclude: 'node_modules/**' // 排除 node_modules 所有文件，因为 node_modules 的文件肯定是第三方提供的，不需要再把它转成 es5 语法，也不用检测了
        })
    ]
}