Vue源碼解讀前必須要知道的Vue構建流程

MASAILA 發布于2019-08-26 13:39 / 1219人閱讀

摘要：了解的構建，可以從文件開始命令內關于構建的命令如下版本從命令看出是通過來進行構建的同樣的構建工具更強大一些，可以處理圖片等但是只做的處理，相比之下更輕量所以更適合框架的打包總共有三個版本的構建從版本的為起點來了解，版本的構建

了解Vue的構建，可以從package.json文件開始
sprits命令內關于構建的命令如下

{
    ...    
    "build": "node scripts/build.js”,  // web版本
     // sever
    "build:ssr": "npm run build -- web-runtime-cjs,web-server-renderer”, 
    // weex
    "build:weex": "npm run build -- weex”
    …
}

從命令看出:

vue是通過rollup來進行構建的
同樣的構建工具webpack更強大一些，可以處理圖片、 css、js等；但是rollup只做js的處理，相比之下更輕量, 所以rollup更適合js框架的打包

總共有三個版本的構建
從web版本的為起點來了解，Web版本的構建命令實際執行的是scripts/build.js
build文件的整個核心內容是build方法

et builds = require("./config").getAllBuilds()

if (process.argv[2]) {
    const filters = process.argv[2].split(",")
    builds = builds.filter(b => {
        return filters.some(f => b.output.file.indexOf(f) > -1 ||         b._name.indexOf(f) > -1)
    })
} else {
    //. 如果沒有參數就把weex給過濾掉
    builds = builds.filter(b => {
        return b.output.file.indexOf("weex") === -1
    })
}

build(builds)

得到的整個的構建流程是:

讀取./config 配置文件中的配置，再根據命令行中輸入的參數，

exports.getAllBuilds = () => Object.keys(builds).map(genConfig)
// Object.keys(builds) 對象key的數組：對應val的是不同版本的編譯配置
// genConfig 配置rollup構建的參數格式

其中getAllBuilds方法返回的是一個對象數組

去到這些配置中進行過濾,拿到對應的版本編譯所需要的config, 傳入到buildEntry方法去執行rollup編譯

rollup在.then內執行輸出的文件地址，以及代碼壓縮配置

其中config里的format 構建格式

最后config文件最后導出的是遵循rollup構建規則的所需要的數組對象

其中的別名配置暫不做分析，具體代碼在scripts/alias中，

補充：在我們常用的web版Vue中，又區分了兩種獨立構建和運行時構建

兩者直接的使用差別

Runtime Only 運行時構建，不包含模板編譯器，借助vue-loader將.vue文件編譯成js
優點: 代碼體積輕量
缺點: 運行時需要借助vue-loader，把template模版編譯成render函數
new Vue({

 render (h) {

   return h("div", this.hi)
 }

})

Runtime+Compiler 包含模板編譯器
優點：動態把模版編譯成render函數
缺點：體積大，對性能有損耗

new Vue({
     template: "{{ hi }}"
   })

GPU云服務器云服務器 vue源碼 vue webrtc 源碼 vue的計算屬性 vue的cdn加速

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/109238.html

前方來報，八月最新資訊--關于vue2&3的最佳文章推薦

摘要：哪吒別人的看法都是狗屁，你是誰只有你自己說了才算，這是爹教我的道理。哪吒去他個鳥命我命由我，不由天是魔是仙，我自己決定哪吒白白搭上一條人命，你傻不傻敖丙不傻誰和你做朋友太乙真人人是否能夠改變命運，我不曉得。我只曉得，不認命是哪吒的命。 showImg(https://segmentfault.com/img/bVbwiGL?w=900&h=378); 出處查看github最新的Vue...

izhuhaodev 2019-08-26 10:44 評論0 收藏0
(解析)vue源碼解讀

摘要：前言為什么要做源碼解讀我們新到一個環境，第一件事情就是熟悉環境熟悉項目，這個很考驗閱讀源碼的能力以及耐心。構造函數拉到最下面，導出的是一個構造函數。前言 A: 為什么要做源碼解讀？Q: 我們新到一個環境，第一件事情就是熟悉環境熟悉項目，這個很考驗閱讀源碼的能力以及耐心。vue是個很好的庫，知名度高，對js的學習具有向上性，所以搞清楚邏輯是有好處的。A: 閱讀源碼的程度？Q: 我們完全...

mingde 2019-08-23 12:38 評論0 收藏0
【Vue原理】Slot - 源碼版之普通插槽

摘要：我們都知道分為普通和作用域，兩個內容都很多，所以分兩部分進行講述。今天講的是普通其實普通，表示默認和具名，只是他們的處理方式都差不多，就只是是否有自定義名字而已，所以，表示一種類型。寫文章不容易，點個贊唄兄弟專注 Vue 源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基于 Vue版本【2.5.17】如果你覺得排版難看，請...

lansheng228 2019-08-23 18:28 評論0 收藏0
vue源碼解讀-目錄結構

摘要：目錄結構構建相關的文件，一般情況下我們不需要動鉤子別名配置目錄結構 ├── scripts ------------------------------- 構建相關的文件，一般情況下我們不需要動│ ├── git-hooks ------------------------- git鉤子│ ├── alias.js -------------------------- 別名配...

philadelphia 2019-08-23 13:51 評論0 收藏0
Webpack Loader 高手進階(三)

摘要：相關的內容為這樣對于一個處理的第二階段也就結束了，通過去攔截不同類型的，并返回新的，跳過后面的的執行，同時在內部會剔除掉，這樣在進入到下一個處理階段的時候，不在使用的范圍之內，因此下一階段便不會經由來處理。文章首發于個人github blog: Biu-blog，歡迎大家關注~ Webpack 系列文章： Webpack Loader 高手進階（一）Webpack Loader 高手...

ivydom 2019-08-23 16:12 評論0 收藏0