opening
The source code is handwritten, so let's analyze the source code by the way.
Construction of rollup environment
Just understand it. Need to use rollup to compile our own handwritten vue code.
You need to install rollup, rollup's babel plugin, as well as babel core and babel presets (which can be understood as initialization templates).
mkdir vue2-stage
cd vue2-stage
npm init -y
npm i rollup rollup-plugin-babel @babel/core @babel/preset-env -D
Then we manually create a rollup.config.js configuration file.
Write the code below. See notes for details. Create the entry file manually.
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/**'
})
]
}
Many plugins can be configured in the plugins of rollup.config.js. Here we need to configure babel, but generally we will create a separate .babelrc file.
{
"presets": [
"@babel/preset-env"
]
}
Finally, we need to configure the running script in package.json. -c means that the specified configuration file does not have a specific name, which means the default configuration file, and -w means monitoring.
"scripts": {
"dev": "rollup -cw"
},
Finally, everything is ready. Run the code below.
npm run dev
You can see that ./dist/vue.js generates the following code. In fact, it is an immediate execution function. The most important thing is to reserve a function, which is the starting point of the program.
(function (factory) {
typeof define === 'function' && define.amd ? define(factory) :
factory();
})((function () { 'use strict';
//程序启动点，从这个开始执行
}));
//# sourceMappingURL=vue.js.map
Let's add some code to ./src/index.js
const a=10
console.log(a);
Compile again, and you can see that const is converted to es5 var.
(function (factory) {
typeof define === 'function' && define.amd ? define(factory) :
factory();
})((function () { 'use strict';
var a = 10;//转为了es5
console.log(a);
}));
We export const a.
const a=10
console.log(a);
export default {
a
}
The generated code is very different this time. The most notable is the line global.Vue = factory(), which generates a global Vue object. Other codes can be seen now.
(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;
}));
Create a new ./dist/index.html
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<script src="./vue.js"></script>
<script>console.log(Vue)</script>
</body>
</html>
