npm i @babel/core @babel/preset-env rollup-plugin-babel roullup-plugin-serve cross-env -D
三：包的相关介绍
rollup (打包工具)
@babel/core(用babel核心模块)
@babel/preset-env（babel将高级语法转成低级语法）
rollup-plugin-serve(实现静态服务)
cross-env(设置环境变量)
rollup-plugin-babel(桥梁)
四：根目录书写rollup.config.js
import babel from 'rollup-plugin-babel'; import serve from 'rollup-plugin-serve'; export default { input:'./src/index.js', // 以哪个文件作为打包的入口 output:{ file:'dist/umd/vue.js', // 出口路径 name:'Vue', // 指定打包后全局变量的名字 format: 'umd', // 统一模块规范 sourcemap:true, // es6-> es5 开启源码调试 可以找到源代码的报错位置 }, plugins:[ // 使用的插件 babel({ exclude:"node_modules/**" }), process.env.ENV === 'development'?serve({ open:true, openPage:'/public/index.html', // 默认打开html的路径 port:3000, contentBase:'' }):null ] }
配置package.josn
{ "name": "vue_souce", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "build:dev": "rollup -c", "serve": "cross-env ENV=development rollup -c -w" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "@babel/core": "^7.9.0", "@babel/preset-env": "^7.9.5", "cross-env": "^7.0.2", "rollup": "^2.6.1", "rollup-plugin-babel": "^4.4.0", "rollup-plugin-serve": "^1.0.1" } }
五：新建index.html(public/index.html)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script src="https://www.jb51.net/dist/umd/vue.js"></script> <script> let vm = new Vue({ el:'#app', // 随便给些数据 data(){ return { name:'张三', age:11, address:{ number:0, name:'李四' }} }, }) vm._data.address = {a:1}; console.log(vm._data) </script> </body> </html>
六：编写Vue入口：index.js
// Vue的核心代码 只是Vue的一个声明 import {initMixin} from './init'; function Vue(options){ // 进行Vue的初始化操作 this._init(options); } // 通过引入文件的方式 给Vue原型上添加方法 initMixin(Vue); // 给Vue原型上添加一个_init方法 export default Vue
七：编写初始化操作 init.js
import {initState} from './state' // 在原型上添加一个init方法 export function initMixin(Vue){ // 初始化流程 Vue.prototype._init = function (options) { // 数据的劫持 const vm = this; // vue中使用 this.$options 指代的就是用户传递的属性 vm.$options = options; // 初始化状态 initState(vm); // 分割代码 } }
八：初始化数据
import {observe} from './observer/index.js' export function initState(vm){ const opts = vm.$options; // vue的数据来源 属性 方法 数据 计算属性 watch if(opts.props){ initProps(vm); } if(opts.methods){ initMethod(vm); } if(opts.data){ initData(vm); } if(opts.computed){ initComputed(vm); } if(opts.watch){ initWatch(vm); } } function initProps(){} function initMethod() {} function initData(vm){ // 数据初始化工作 let data = vm.$options.data; // 用户传递的data data = vm._data = typeof data === 'function'?data.call(vm):data; // 对象劫持 用户改变了数据 我希望可以得到通知 =》 刷新页面 // MVVM模式 数据变化可以驱动视图变化 // Object.defineProperty () 给属性增加get方法和set方法 observe(data); // 响应式原理 } function initComputed(){} function initWatch(){}
九：书写核心监听功能
// 把data中的数据 都使用Object.defineProperty重新定义 es5 // Object.defineProperty 不能兼容ie8 及以下 vue2 无法兼容ie8版本 import { isObject } from '../util/index' // 后续我可以知道它是不是一个已经观察了的数据 __ob__ class Observer{ constructor(value){ // 仅仅是初始化的操作 // vue如果数据的层次过多 需要递归的去解析对象中的属性，依次增加set和get方法 // 对数组监控 this.walk(value); // 对对象进行观测 } walk(data){ let keys = Object.keys(data); // [name,age,address] // 如果这个data 不可配置 直接return keys.forEach((key)=>{ defineReactive(data,key,data[key]); }) } } function defineReactive(data,key,value){ observe(value); // 递归实现深度检测 Object.defineProperty(data,key,{ configurable:true, enumerable:false, get(){ // 获取值的时候做一些操作 return value; }, set(newValue){ // 也可以做一些操作 if(newValue === value) return; observe(newValue); // 继续劫持用户设置的值，因为有可能用户设置的值是一个对象 value = newValue; } }); } export function observe(data) { let isObj = isObject(data); if (!isObj) { return } return new Observer(data); // 用来观测数据 }
十：编写工具类文件，存放校验对象
/** * * @param {*} data 当前数据是不是对象 */ export function isObject(data) { return typeof data === 'object' && data !== null; }
总结：