目标：手写迷你版Vue
一：使用rollup打包,打包后的代码体积更小，更适合写框架源码的打包
npm i rollup -D二：安装babel相关的包，以及实现静态服务，设置环境变量的包
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 name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="/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>
