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”:

不看了

工作中用到的脚本合集

24-5-18 X

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以太網驅動總結