vue源码调试环境搭建-2020-01-06_01

课程来源: 开课吧

图片.png

迁代码出来先开始

1. git clone https://github.com/vuejs/vue.git
2. 第一步 安装依赖 npm i
3. 安装 rollup npm i rollup -g 打包工具适合纯js
4. 修改dev脚本
   图片.png
   可以尝试更改源码 or not 打包

npm run dev 查看走的目录是什么 以及替换的是什么

关注目录dist

• common 为 老版本打包器而准备的webpack 1.多 导出require
• esm 可能就是为 webpack 2.多 现代打包器导出而准备
• vue.js 和 vue.min.js 没有common 和 esm 输出格式说明 cjs
• esm.browser.js 浏览器专用版本,浏览器也支持es6的模块话的导入导出方式
  输出格式说明:
  cjs: webpack 1.xxx 或者 browserfiy
  esm: webpack 2.xxx
  umd: 兼容cjs和amd浏览器异步加载方式 node端
  runtime: 仅包含运行时,没有编译器,( 已经提前打包了,不需要浏览器写一个字符串模板实时编译 )

flow: 类型申明,用flow语法检查用的
packages: 独立于vue核心代码外的模块( 像服务端渲染 weex..)
scripts: 全部的打包脚本
src: 重要源码目录

• 有编译器compiler
• core核心代码
• 平台: 浏览器 和 移动端weex
• server: 服务端渲染
• sfc: 单文件解析器

• shared: 共用代码
  test: 测试代码
  types: 源码用flow写,所以用typescript专门写了一套

  
  图片.png

入口点:

packages.json里

目标:

• vue源码学习整体流程
• 调试环境
• 数据响应式