这是我参与更文挑战的第1天，活动详情查看： 更文挑战
一，前言
掘金的伙伴们大家好，前段时间参加了作者招募，迁移了10多篇水文到掘金
工作繁忙很久不写了，这次尝试参加更文挑战，希望能够坚持下来找找写东西感觉
以目前的时间其实很难写出对大家有价值的内容，这也是一年多没写东西的原因之一
写一篇好文章很难：从选题、定纲，到提出问题、思路方案，再到图文动画排版等等
所以，本着“时间有限可以少写”的原则，尝试对 vue2.x 源码学习过程进行简单梳理
每篇文章的篇幅可能不会很长，但会争取聚焦在一个点上把事情讲明白
之后应该会创建一个专栏：《vue2.x 源码学习笔记》（更新：已经创建好了）
希望可以将知识点拆碎，把问题来龙去脉讲清楚，毕竟看得懂才是最重要的
自己先学会，有输出；别人能看懂，有收获；说明才是真的会了；
所以，文章有没有赞无所谓，欢迎大家多提宝贵建议，感谢！
首篇：使用 Rollup 完成 Vue 源码环境的搭建
2021090220230106 更新：《vue2.x 源码学习笔记》第二轮前言
目前为止，已经参加并完成了 2 次掘金的更文挑战活动，感谢掘金提供的活动奖品，整个过程也让我收获了很多，养成了每天坚持学习和写作的好习惯；
接下来，开始对 《vue2.x 源码学习笔记》专栏进行持续改进：
- 由于之前日更原因，很多内容没有进一步展开；
- 语言组织和描述不够准确，排版凌乱，阅读体验不佳；
- 缺少必要的示例、截图、流程图和动画来辅助理解；
- 刻意练习；持续完善、改进、扩充此专栏；
- 希望借此机会加深对 Vue 源码的理解；
完成了第一轮，仅仅是一个开始；
第二轮主要针对文章内容进行完善：不会做大量扩充，内容会适当的合并；
同时，也会跟着文章从头做一次，发现文章中存在的问题，并按章节附上源码；
感谢大家的留言和关注，近期工作比较忙，看到就会回复；
二，使用 Rollup 搭建 Vue2.x 源码环境
1，源码工程的初始化
npm init -y
// package.json
{
"name": "source-learning-vue",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
2，安装 Rollup 打包依赖
开发环境依赖：
// 1，安装 rollup：用于 Vue 源码的打包构建
npm install rollup
// 2，使用 babel：需要安装核心模块 @babel/core；
npm install @babel/core
// 3，rollup 与 babel 关联
npm install rollup-plugin-babel
// 4，浏览器兼容：将 ES6 语法转译为 ES5
npm install @babel/preset-env
// ==> 合并写法：一次性安装开发环境所需的全部依赖
npm install rollup @babel/core rollup-plugin-babel @babel/preset-env -D
3，创建 Vue.js 入口文件
创建打包入口：src/index.js
// src/index.js Vue 构造函数
function Vue(){
}
// 导出 Vue 函数，提供外部使用
export default Vue;
4，创建 Rollup 配置文件
rollup 默认配置文件：项目根目录下
rollup.config.js文件
创建 rollup.config.js，完成 rollup、babel 相关配置：
// src/rollup.config.js
import babel from 'rollup-plugin-babel'
// 导出 rollup 配置对象
export default {
input:'./src/index.js', // 打包入口
output:{ // 打包出口：可定义为数组，输出多种构件
file:'dist/vue.js', // 打包输出文件
format:'umd', // 打包格式（可选项）：iife（立即执行函数）、esm（ES6 模块）、cjs（Node 规范）、umd（支持 amd + cjs）
name:'Vue', // 使用 umd 打包需要指定导出的模块名，Vue 模块将会绑定到 window 上；
sourcemap:true, // 开启 sourcemap 源码映射，打包时会生成 .map 文件；作用：浏览器调试ES5代码时，可定位到ES6源代码所在行；
},
// 使用 Rollup 插件转译代码
plugins:[
babel({
// 忽略 node_modules 目录下所有文件（**：所有文件夹下的所有文件）
exclude:'node_modules/**'
})
]
}
5，创建 rollup 构建脚本
执行 Rollup 打包构建 Vue，创建 rollup-script 构建脚本：
// package.json
{
"name": "source-learning-vue",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "rollup -c -w"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.14.2",
"@babel/preset-env": "^7.14.2",
"rollup": "^2.47.0",
"rollup-plugin-babel": "^4.4.0"
}
}
dev 脚本解释：
- rollup 命令：默认会去找 node_module/bin/rollup；
- -c：config 选项，使用配置文件，默认找 rollup.config.js；
- -w：watch 选项，监听文件变化；当文件发生变化时重新打包；
6，打包构建 Vue
执行构建脚本npm run dev
将
src/index.js 输出至 dist/vue.js:
(其中，vue.js.map 为 sourcemap 源码映射文件)
查看输出文件 dist/vue.js ：
(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'; // 此处 this 为 window
function Vue() {}
return Vue; // 最终会导出 Vue 函数
})));
//# sourceMappingURL=vue.js.map
7，创建 Html 引入 Vue
(在 dist 目录下)创建 dist/index.html 引入 dist/vue.js，打印输出 Vue：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 引入 vue.js，将会绑定到 window-->
<script src="./vue.js"></script>
<script>
console.log(Vue)
</script>
</body>
</html>
查看控制台输出，打印出 Vue 函数，说明 Vue 打包构建成功
三，结尾
本篇，配置 rollup 完成 Vue 源码环境搭建，主要涉及以下几点：
- 工程初始化、依赖安装；
- 创建 vue 入口文件、Rollup 配置文件、构建脚本；
- 构建 Vue，创建 html 引入 vue.js，测试源码环境；
下一篇，Vue 的初始化流程；
维护日志
- 20210603：首次发布
- 20210604：添加文章封面、主题、前言、代码优化、关联专栏 TODO：添加截图、代码视觉调整、模块化介绍、 分析打包后global.Vue
- 20210902：更新第二轮前言
- 20210921：修复若川提出的错别字，感谢若川~
- 20211202：微调部分描述、排版、添加部分注释；
- 20230106: 修改代码注释、补充因果说明、添加配图、使内容表达更清晰；
