0x0001 vue 3.0 源码环境搭建

环境准备

git、yarn1.19.0、node10+、npm、vscode

vscode 插件
Code Spell Checker -- 用于检查单词拼写
Prettier -- 用于格式化代码
Gitlens -- git 的可视化插件

开发环境搭建

git clone https://github.com/vuejs/vue-next
yarn

工程整体介绍

采用 rollup 作为模块打包工具,
prettier 作为代码 lint 工具,
lerna 作为前端 packages 包管理工具,
采用了 typescript 作为开发语言

运行开发环境及部分代码解析

工程根目录下执行 yarn dev ,可在 package.json 中看到运行了 node scripts/dev.js,点击该文件查看,文件主要是通过 execa 插件(子进程管理,调用 shell 和外部程序的 JavaScript 的封装)调用 rollup 进行开发环境工程打包。

由于未通过设置参数声明打包的目标使用环境,因此 dev.js 文件中的 target 值为 vue,formats 值为 undefined,而 commit 值是获取当前 git rev-parse HEAD 的最新一次的 commit id 的前 7 位字符。因此最终启动子进程 rollup -wc --environment COMMIT:xxxxxxx,TARGET:vue,FORMAT:global,同时将 environment 中的参数设置到 process.env 对应的环境变量上,具体说明请查看 rollup 官方文档https://rollupjs.org/guide/en/#overview

执行 rollup 子进程时,启动参数中存在 -c ,该参数含义为指定启动配置文件,如果没有指定文件,默认配置文件为 rollup.config.js,因此接下来是解析 rollup.config.js 文件。

文件最开始定义部分常量,path.resolve 和 path.join 可参考path.join()和path.resolve()的区别

const packagesDir = path.resolve(__dirname, 'packages')
const packageDir = path.resolve(packagesDir, process.env.TARGET)
const name = path.basename(packageDir)
const resolve = p => path.resolve(packageDir, p)
const pkg = require(resolve(`package.json`))
const packageOptions = pkg.buildOptions || {}

接下来通过 rollup-plugin-alias 插件为每个 package 的 index.ts 入口文件设置别名,最终 aliasOptions 对象为

{
    "resolve": [".ts"],
    "@vue/compiler-core": "/Users/yida/Documents/coding/vue-next/packages/compiler-core/src/index",
    "@vue/compiler-dom": "/Users/yida/Documents/coding/vue-next/packages/compiler-dom/src/index",
    "@vue/reactivity": "/Users/yida/Documents/coding/vue-next/packages/reactivity/src/index",
    "@vue/runtime-core": "/Users/yida/Documents/coding/vue-next/packages/runtime-core/src/index",
    "@vue/runtime-dom": "/Users/yida/Documents/coding/vue-next/packages/runtime-dom/src/index",
    "@vue/runtime-test": "/Users/yida/Documents/coding/vue-next/packages/runtime-test/src/index",
    "@vue/server-renderer": "/Users/yida/Documents/coding/vue-next/packages/server-renderer/src/index",
    "@vue/shared": "/Users/yida/Documents/coding/vue-next/packages/shared/src/index",
    "@vue/template-explorer": "/Users/yida/Documents/coding/vue-next/packages/template-explorer/src/index"
}

未完待续。。。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,098评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,213评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,960评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,519评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,512评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,533评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,914评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,574评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,804评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,563评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,644评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,350评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,933评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,908评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,146评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,847评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,361评论 2 342

推荐阅读更多精彩内容

  • mean to add the formatted="false" attribute?.[ 46% 47325/...
    ProZoom阅读 2,689评论 0 3
  • core package 概要:Core是所有其他包的基础包.它提供了大部分功能包括metadata,templa...
    LOVE小狼阅读 2,552评论 0 3
  • 在分析Vue的源码之前我们需要了解一些前置知识,如Flow、源码目录、构建方式、编译入口等。 认识 Flow Fl...
    oWSQo阅读 1,072评论 1 2
  • 晨读父母规,百日行动第100天[太阳]各位早安!成功坚持到100 天,从最初的字面上理解的父母和孩子,到内心觉察自...
    春艳敬荷阅读 2,171评论 0 0
  • 日子是开心要过,不开心也要过。控制情绪真的很重要! 把才华释放出来,把负面情绪抛开 不要遇到问题就急就烦,人到这个...
    fea6cdbd95c4阅读 294评论 0 0