Flow

vue框架使用了Flow作為類型檢查，來保證項目的可讀性和維護性。vue.js的主目錄下有Flow的配置.flowconfig文件，還有flow目錄，指定了各種自定義類型。

在學習源碼前可以先看下Flow的語法 官方文檔

目錄結構

vue.js源碼主要在src下

src ├── compiler # 編譯相關 ├── core # 核心代碼 ├── platforms # 不同平臺的支持 ├── server # 服務端渲染 ├── sfc # .vue 文件解析 ├── shared # 共享代碼

compiler

template的編譯

core

core ├── components # 內置組件 ├── global-api # 全局 API 封裝 ├── instance # Vue 實例化，生命周期 ├── observer # 觀察者，響應式 ├── util # 工具函數 ├── vdom # virtual DOM

platform

存放2個主要入口，分別打包運行在web和weex上的vue.js

server

支持了服務端渲染

sfc

把.vue文件內容解析成js對象

shared

存放共享方法

vue.js構建

vue是基于Rollup構建的，類似于webpack
首先來看下package.json文件,先看下script字段：

{"script":{"build": "node scripts/build.js","build:ssr": "npm run build -- web-runtime-cjs,web-server-renderer","build:weex": "npm run build -- weex",} }

這3條都是構建vue的命令，后2條是根據需求添加對應環境參數。運行npm run build時會執行node scripts/build.js

構建過程

構建過程比較復雜，這里會簡化下構建過程，只分析主線流程

進入到scripts/build.js,

// 從配置文件讀取配置，拿到所有構建的path let builds = require('./config').getAllBuilds() // 過濾builds build(builds)

再看下配置文件scripts.config.js,

let builds= {'web-runtime-esm': {entry: resolve('web/entry-runtime.js'),dest: resolve('dist/vue.runtime.esm.js'),format: 'es',banner}, }

entry 屬性表示構建的入口 JS 文件地址，dest 屬性表示構建后的 JS 文件地址。format 屬性表示構建的格式，cjs 表示構建出來的文件遵循 CommonJS 規范，es 表示構建出來的文件遵循ES Module 規范。umd表示構建出來的文件遵循 UMD 規范。

resolve

看下 resovle 方法的定義

const resolve = p => {const base = p.split('/')[0]if (aliases[base]) {return path.resolve(aliases[base], p.slice(base.length + 1))} else {return path.resolve(__dirname, '../', p)} }

用到了 path.resolve([... paths]), path.resolve 是 node.js 提供的路徑解析方法,可以看下官方文檔了解下，主要是從右到左處理給定的路徑序列,直到構造出絕對路徑.

用resolve('web/entry-runtime.js')作分析， base 是 web , 找到 aliases[base] 即真實路徑 '../src/platforms/web' ,

entry: resolve('web/entry-runtime.js')

所以最終入口路徑是 ../src/platforms/web/entry-runtime.js，構建生成文件路徑是../dist/vue.runtime.esm.js

genConfig()

輸入builds前要先將builds轉換成rollup打包所對應的配置結構

if (process.env.TARGET) {module.exports = genConfig(process.env.TARGET) } else {exports.getBuild = genConfig// 返回config組成的數組exports.getAllBuilds = () => Object.keys(builds).map(genConfig) }

轉載于:https://www.cnblogs.com/huangnuoen/p/10237124.html

總結

以上是生活随笔為你收集整理的vue 源码学习（一） 目录结构和构建过程简介的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。