01-Vue源碼的構建過程解析

我把Vue源碼放到一個叫做reborn的目錄裏面了，因爲我想我的職業生涯和生活都得到重生！！

.editorconfig 從名字上能看出來這是編輯器的配置文件，可是問題來了是什麼編輯器呢？這次我終於沒能按捺住內心的好奇去網上查了一下，https://editorconfig.org/，這個玩意厲害了。竟然是誇編輯器的。可惜vsc沒有原生支持，需要自己安裝插件，也不難，裝就是了。
.github 這個我不想查了，就這樣吧
dist 沒啥說的
package.json 沒啥說的
src 沒啥說的
.eslintignore eslint忽略的文件
.gitignore git忽略的文件
examples 爲什麼會有示例的目錄？
packages 這個目錄裏包含了四個子目錄
1. vue-server-rendered 服務器端渲染
2. vue-template-compiler 把vue編譯成render函數
3. weex-template-compiler 適用於weex的vue編譯成render函數的解決方案吧
4. weex-template-framework
test 測試
.babelrc.js babel的配置文件
.eslintrc.js eslint的配置文件
BACKERS.md 支持者
flow flow使用的
README.md 沒啥說的
types typescript使用的
.circleci 持續集成工具circleci使用的
.flowconfig flow的配置文件
benchmarks 基準測試
LICENSE
scripts 一些腳本文件，會用在這個開發週期中
yarn.lock 沒啥說的

構建過程走起

剛纔說的都是基於dev這個分支的，我覺得我還是選個別的分支吧。git branch -a看到最新的分支是2.6,就這個吧。此時最新的tag是2.6.9。

git checkout -b reading origin/2.6

之後都是基於這個分支，而且也會在上面加上註釋！

要了解一個項目的構建過程，最好的起點應該是package.json中的scripts了，看看吧。

"dev": "rollup -w -c scripts/config.js --environment TARGET:web-full-dev",
    "dev:cjs": "rollup -w -c scripts/config.js --environment TARGET:web-runtime-cjs-dev",
    "dev:esm": "rollup -w -c scripts/config.js --environment TARGET:web-runtime-esm",
    "dev:test": "karma start test/unit/karma.dev.config.js",
    "dev:ssr": "rollup -w -c scripts/config.js --environment TARGET:web-server-renderer",
    "dev:compiler": "rollup -w -c scripts/config.js --environment TARGET:web-compiler ",
    "dev:weex": "rollup -w -c scripts/config.js --environment TARGET:weex-framework",
    "dev:weex:factory": "rollup -w -c scripts/config.js --environment TARGET:weex-factory",
    "dev:weex:compiler": "rollup -w -c scripts/config.js --environment TARGET:weex-compiler ",
    "build": "node scripts/build.js",
    "build:ssr": "npm run build -- web-runtime-cjs,web-server-renderer",
    "build:weex": "npm run build -- weex",
    "test": "npm run lint && flow check && npm run test:types && npm run test:cover && npm run test:e2e -- --env phantomjs && npm run test:ssr && npm run test:weex",
    "test:unit": "karma start test/unit/karma.unit.config.js",
    "test:cover": "karma start test/unit/karma.cover.config.js",
    "test:e2e": "npm run build -- web-full-prod,web-server-basic-renderer && node test/e2e/runner.js",
    "test:weex": "npm run build:weex && jasmine JASMINE_CONFIG_PATH=test/weex/jasmine.js",
    "test:ssr": "npm run build:ssr && jasmine JASMINE_CONFIG_PATH=test/ssr/jasmine.js",
    "test:sauce": "npm run sauce -- 0 && npm run sauce -- 1 && npm run sauce -- 2",
    "test:types": "tsc -p ./types/test/tsconfig.json",
    "lint": "eslint src scripts test",
    "flow": "flow check",
    "sauce": "karma start test/unit/karma.sauce.config.js",
    "bench:ssr": "npm run build:ssr && node benchmarks/ssr/renderToString.js && node benchmarks/ssr/renderToStream.js",
    "release": "bash scripts/release.sh",
    "release:weex": "bash scripts/release-weex.sh",
    "release:note": "node scripts/gen-release-note.js",
    "commit": "git-cz"

好多呀，看着頭皮都發麻，沒辦法，爲了沒好的生活，啃吧！

“dev”

rollup -w -c scripts/config.js --environment TARGET:web-full-dev

我的天哪，這都啥年代了，還用rollup。我們只能相信vue源碼用rollup有它非用不可的原因。看來我又要去溫習一下rollup了。

毫無疑問scripts/config.js就是rollup的配置文件了，我們放到後面說。先說命令行參數:

-w 開啓watch模式
-c 指定配置文件，默認是當前目錄的rollup.config.js
–environment這個都能看懂，就是設置環境變量唄可是我在rollup的文檔中沒有找到，這個等到scripts/config.js中應該能知道了

開始scripts/config.js吧

我顫抖了，config.js這個文件有點大，還是新開一個文章吧看這裏

此時我們知道這個命令的意思了，就是構建web-full-dev。那從config.js中把web-full-dev拿出來看一看

'web-full-dev': {
    entry: resolve('web/entry-runtime-with-compiler.js'), // 入口文件
    dest: resolve('dist/vue.js'), // 目標文件
    format: 'umd',
    env: 'development', // 環境變量process.NODE.env的替換字符串，也就是源碼中使用的process.NODE.env在構建過程中都會替換成'development'
    alias: { he: './entity-decoder' },
    banner
  }

這個配置的意思是從web/entry-runtime-with-compiler.js開始構建，最後把構建結果放在dist/vue.js裏面。至於web和dist具體的路徑是哪裏，需要去看scripts/alias.js文件了。

“dev:cjs”

rollup -w -c scripts/config.js --environment TARGET:web-runtime-cjs-dev

感覺看完scripts/config.js之後，再看這些東西，如有神助

看一下web-runtime-cjs-dev的配置吧

'web-runtime-cjs-dev': {
    entry: resolve('web/entry-runtime.js'),
    dest: resolve('dist/vue.runtime.common.dev.js'),
    format: 'cjs',
    env: 'development',
    banner
  }

“dev:esm”

rollup -w -c scripts/config.js --environment TARGET:web-runtime-esm

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

“dev:test”:

karma start test/unit/karma.dev.config.js

天，又有新東西了。karma，這是一個test runner。挺好的，我認爲它是從jstestdriver那裏受到了啓發。可以在不同的web平臺上進行測試。

學不動了，我就是想看一下vue的源碼。karma這個以後在具體的vue項目中再討論吧。

“dev:ssr”

rollup -w -c scripts/config.js --environment TARGET:web-server-renderer

這是騙人的吧，我根本找不到web-server-renderer的配置

“dev:compiler”

rollup -w -c scripts/config.js --environment TARGET:web-compiler

// Web compiler (CommonJS).
  'web-compiler': {
    entry: resolve('web/entry-compiler.js'),
    dest: resolve('packages/vue-template-compiler/build.js'),
    format: 'cjs',
    external: Object.keys(require('../packages/vue-template-compiler/package.json').dependencies)
  }

“dev:weex”:

rollup -w -c scripts/config.js --environment TARGET:weex-framework

"dev:weex:factory": "rollup -w -c scripts/config.js --environment TARGET:weex-factory",
"dev:weex:compiler": "rollup -w -c scripts/config.js --environment TARGET:weex-compiler ",

不貼了，都大同小異，我又不是來湊字數的

“build”

node scripts/build.js

又要開始新的腳本的閱讀了:)
scripts/build.js

傳送門

“build:ssr”:

npm run build -- web-runtime-cjs,web-server-renderer

    "build:weex": "npm run build -- weex"

沒啥好解釋的

不看了

    "test": "npm run lint && flow check && npm run test:types && npm run test:cover && npm run test:e2e -- --env phantomjs && npm run test:ssr && npm run test:weex",
    "test:unit": "karma start test/unit/karma.unit.config.js",
    "test:cover": "karma start test/unit/karma.cover.config.js",
    "test:e2e": "npm run build -- web-full-prod,web-server-basic-renderer && node test/e2e/runner.js",
    "test:weex": "npm run build:weex && jasmine JASMINE_CONFIG_PATH=test/weex/jasmine.js",
    "test:ssr": "npm run build:ssr && jasmine JASMINE_CONFIG_PATH=test/ssr/jasmine.js",
    "test:sauce": "npm run sauce -- 0 && npm run sauce -- 1 && npm run sauce -- 2",
    "test:types": "tsc -p ./types/test/tsconfig.json",
    "lint": "eslint src scripts test",
    "flow": "flow check",
    "sauce": "karma start test/unit/karma.sauce.config.js",
    "bench:ssr": "npm run build:ssr && node benchmarks/ssr/renderToString.js && node benchmarks/ssr/renderToStream.js",
    "release": "bash scripts/release.sh",
    "release:weex": "bash scripts/release-weex.sh",
    "release:note": "node scripts/gen-release-note.js",
    "commit": "git-cz"

以後有空再回來，大體已經瞭解了vue源碼的構建過程。

覺得好的給我點贊哦:)

01-Vue源碼的構建過程解析

先過一下根目錄的目錄結構

構建過程走起

“dev”

“dev:cjs”

“dev:esm”

“dev:test”:

“dev:ssr”

“dev:compiler”

“dev:weex”:

“build”

“build:ssr”:

不看了

釘釘打卡速度慢

Nginx R31 doc 官方文檔-01-nginx 如何安裝

Qt/C++音視頻開發74-合併標籤圖形/生成yolo運算結果圖形/文字和圖形合併成一個/水印濾鏡

挑戰程序設計競賽 2.2章習題 POJ - 3617 Best Cow Line 貪心

字節面試：MySQL什麼時候鎖表？如何防止鎖表？

.NET8連接SQL SERVER 2008 R2 報：證書鏈是由不受信任的頒發機構頒發的

golang開發環境搭建(win10)

python計算機視覺學習筆記——PIL庫的用法

Golang初學：獲取程序內存使用情況，std runtime

04-Vue的插件機制

01-Vue源碼的構建過程解析

01-Vue源碼的構建過程解析之scripts/build.js

04-Vue的響應式機制淺談

0x-Vue選項的合併策略core/util/options.js

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結