一，前言
2021 年 6 月 1 日，特意去看了一下，上次写博客的时间 2019 年 10 月 10 日，距今 1 年半+
如果时间允许，真想写篇文章回顾这一年多发生的事情，不过，那应该是在完成【6 月日更】以后
说道这里，其实我就是来薅个羊毛~
以目前的时间和写作水平来看，其实很难写出对大家有价值的东西，这也是一年多没写东西的原因之一
所以，请大家见谅，我的目标就是顺利水出 21 篇文章，做个成就
内容大多会集中在《vue2.x 源码学习笔记》，没啥技术难度，都是学来的，尽所能帮大家梳理一下
开水~
二，使用 Rollup 构建 Vue2 环境
目前前端主流构建工具有：巴拉巴拉，废话略过。。。Vue2 用 rollup
1，工程初始化
{ "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 打包依赖
// 安装 rollup 打包用npm install rollup// 低级语法转高级语法（使用 babel 需安装@babel/core核心模块）npm install @babel/core// rollup 与 babel关联npm install rollup-plugin-babel// 将 ES6 转译为 ES5npm install @babel/preset-env
// 合并（开发环境依赖）npm install rollup @babel/core rollup-plugin-babel @babel/preset-env -D
复制代码
3，编写 Vue.js 入口文件
打包入口 src/index.js
function Vue(){
}
export default Vue;
复制代码
4，编写 Rollup 配置文件
默认 rollup 配置文件名：rollup.config.js
import babel from 'rollup-plugin-babel'import resolve from 'rollup-plugin-node-resolve';
// 导出 rollup 配置对象export default { input:'./src/index.js', // 打包入口 output:{// 可定义为数组，输出多种类型 file:'dist/vue.js', // 打包出口 format:'umd',// 常用格式：IIFE（立即执行函数）、ESM（ES6模块）、CJS（Node规范）、UMD（AMD+CJS） name:'Vue', // 导出模块Vue，并绑定到window上 sourcemap:true, // 开启sourcemap }, plugins:[ resolve(), babel({ exclude:'node_modules/**' // 忽略node_modules下所有文件 }) ]}
复制代码
5，创建 rollup-script 构建脚本
{ "name": "source-learning-vue", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "dev": "rollup -c -w" //-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" }}
复制代码
6，执行构建脚本
7，查看打包后文件
(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';
function Vue() {}
return Vue;
})));
//# sourceMappingURL=vue.js.map
复制代码
8，创建 Html 使用 Vue.js
dist 目录中创建页面入口：index.html
<!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> <script src="vue.js"></script> <script> console.log(Vue) </script></body></html>
复制代码
查看控制台输出，打印 Vue 函数，开发环境构建成功
三，结束
已成功水出了第一步，有时间再补代码地址，
这篇主要使用 rollup 搭建了 Vue 源码的构建环境，
下一篇：Vue 的初始化
编辑器用着挺别扭：
新建文章时，代码片段冗余很多，一级二级标题需划上去才能看到
编辑文章时，上边两个情况就好了，不知道是不是浏览器兼容问题
使用--- 加回车 markdown 语法，并不能出现分割线
代码片段使用``` ```markdown 语法，会出现代码区域，但不会替换掉``` ```
代码片段配置 shell，发布后 shell 的高亮就没了
图片是只能居中显示吗？回头研究一下怎么居左
代码片段有没有自动换行的开关，还没注意到
评论