开篇
都手写源码了，那就顺便分析一下源码吧。
rollup环境的搭建
作为了解就行。需要使用rollup来编译我们自己手写的vue代码。
需要安装rollup,rollup的babel插件，以及babel核心和babel预设（可以理解为初始化模板）。
mkdir vue2-stage
cd vue2-stage
npm init -y
npm i rollup rollup-plugin-babel @babel/core @babel/preset-env -D
然后我们手动创建一个rollup.config.js配置文件。
写入下面的代码。具体看注释。把入口文件手动创建一下。
import babel from 'rollup-plugin-babel'
export default{
input:'./src/index.js',//入口
output:{//出口
file:'./dist/vue.js',//出口路径
name:'Vue',//给global添加一个Vue对象
format:'umd',//es6 esm cjs umd(adm+cjs)
sourcemap:true//表示可以调试源代码
},
plugins:[
babel({
exclude:'node_modules/**'
})
]
}
在rollup.config.js的plugins里面是可以配置很多插件的，这里我们需要配置babel，但一般我们会单独创建一个.babelrc文件。
{
"presets": [
"@babel/preset-env"
]
}
最后我们需要在package.json里面配置运行脚本。-c表示指定配置文件没跟具体名字就表示默认配置文件，-w表示监视。
"scripts": {
"dev": "rollup -cw"
},
最后，一切准备就绪。运行下面的代码。
npm run dev
可以看到./dist/vue.js生成下面的代码。实际上就是一个立即执行函数。最重要的地方就是预留了一个函数，这个函数就是程序的启动点。
(function (factory) {
typeof define === 'function' && define.amd ? define(factory) :
factory();
})((function () { 'use strict';
//程序启动点，从这个开始执行
}));
//# sourceMappingURL=vue.js.map
我们往./src/index.js里面添加一些代码
const a=10
console.log(a);
再次编译，可以看到，const被转化为了es5的var。
(function (factory) {
typeof define === 'function' && define.amd ? define(factory) :
factory();
})((function () { 'use strict';
var a = 10;//转为了es5
console.log(a);
}));
我们把const a导出。
const a=10
console.log(a);
export default {
a
}
这次生成的代码很不一样。最值得注意的是 global.Vue = factory()这行，生成了全局的Vue对象。 其他代码现在看个大概就行。
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
typeof define === 'function' && define.amd ? define(factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.Vue = factory());
})(this, (function () { 'use strict';
var a = 10;
console.log(a);
var index = {
a: a
};
return index;
}));
新建一个./dist/index.html
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<script src="./vue.js"></script>
<script>console.log(Vue)</script>
</body>
</html>
204
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
