vue学习笔记（八）---源码学习

1、环境配置

在进行学习前需要搭建学习环境，采用rollup编译环境

npm i rollup rollup-plugin-babel rollup-plugin-serve @babel/core @babel/preset-env  -D

rollup打包代码用的； rollup-plugin-babel插件的关联；通过babel/core与babel/preset-env进行代码转义 ； rollup-plugin-serve可以配置一个可执行的端口以实现服务

添加配置文件rollup.config.js

import babel from 'rollup-plugin-babel'
import serve from 'rollup-plugin-serve'

export default {
    input: './src/index.js',        //项目的入口文件
    output: {
        format: 'umd',              //模块化的类型，比如有common.js esModule ...
        name: 'Vue',                //全局变量的名字,即所有的方法都会挂在这个变量下
        file: 'dist/umd/vue.js',    //表示打包到dist目录下的umd目录下的vue.js里
        sourcemap: true             //把ES6的语法转成es5的语法
    },
    plugins: [                      //打包的插件
        babel({
            exclude: 'node_modules/**' //表示编译的时候排除的目录以及文件夹
        }),
        serve({
            open: true,             //是否默认打开一个服务
            port: 3000,             //配置端口
            contentBase: '',        //表示当前打开的目录基准，即以哪个目录为当前目录，空表示以当前目录
            openPage: '/index.html'//表示当前打开的页面
        })
    ]
}

添加.babelrc配置文件

{
  "presets": [
    "@babel/preset-env"
  ]
}

修改package.js文件

"scripts": {
  "dev": "rollup -c -w"   //-c表示使用默认的rollup.config.js配置， -w表示实时监听js文件的变化
},

此时文件目录结构为

vueCode
 ├── dist
 │   └── umd
 │       ├── vue.js
 │       └── vue.js.map
 ├── index.html　　　　　　//展示的html模板
 ├── package-lock.json
 ├── package.json
 ├── rollup.config.js　　//rollup的配置文件
 ├── src　　　　　　　　　　//js文件夹
 │   └── index.js
 └── node_modules

2、