課程來源: 開課吧
圖片.png
遷代碼出來先開始
- git clone https://github.com/vuejs/vue.git
- 第一步 安裝依賴 npm i
- 安裝 rollup npm i rollup -g 打包工具適合純js
- 修改dev腳本
圖片.png
可以嘗試更改源碼 or not 打包
npm run dev 查看走的目錄是什么 以及替換的是什么
關注目錄dist
- common 為 老版本打包器而準備的webpack 1.多 導出require
- esm 可能就是為 webpack 2.多 現(xiàn)代打包器導出而準備
- 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: 僅包含運行時,沒有編譯器,( 已經(jīng)提前打包了,不需要瀏覽器寫一個字符串模板實時編譯 )
flow: 類型申明,用flow語法檢查用的
packages: 獨立于vue核心代碼外的模塊( 像服務端渲染 weex..)
scripts: 全部的打包腳本
src: 重要源碼目錄
- 有編譯器compiler
- core核心代碼
- 平臺: 瀏覽器 和 移動端weex
- server: 服務端渲染
- sfc: 單文件解析器
shared: 共用代碼
test: 測試代碼
types: 源碼用flow寫,所以用typescript專門寫了一套
圖片.png
入口點:
packages.json里
目標:
- vue源碼學習整體流程
- 調(diào)試環(huán)境
- 數(shù)據(jù)響應式
