写点什么

【Vue2.x 源码学习】第一篇 - 源码环境搭建

用户头像
Brave
关注
发布于: 2021 年 06 月 01 日
【Vue2.x源码学习】第一篇-源码环境搭建

一,前言


2021 年 6 月 1 日,特意去看了一下,上次写博客的时间 2019 年 10 月 10 日,距今 1 年半+

如果时间允许,真想写篇文章回顾这一年多发生的事情,不过,那应该是在完成【6 月日更】以后

说道这里,其实我就是来薅个羊毛~


以目前的时间和写作水平来看,其实很难写出对大家有价值的东西,这也是一年多没写东西的原因之一

所以,请大家见谅,我的目标就是顺利水出 21 篇文章,做个成就


内容大多会集中在《vue2.x 源码学习笔记》,没啥技术难度,都是学来的,尽所能帮大家梳理一下

开水~


二,使用 Rollup 构建 Vue2 环境


目前前端主流构建工具有:巴拉巴拉,废话略过。。。Vue2 用 rollup


1,工程初始化


npm init -y
复制代码



{  "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,执行构建脚本

npm run dev
复制代码



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 的高亮就没了

  • 图片是只能居中显示吗?回头研究一下怎么居左

  • 代码片段有没有自动换行的开关,还没注意到


用户头像

Brave

关注

还未添加个人签名 2018.12.13 加入

还未添加个人简介

评论

发布
暂无评论
【Vue2.x源码学习】第一篇-源码环境搭建