Vue源码学习一
vue 目录结构
可以在 github
上通过这款 chrome 插件 查看vue的文件目录。也可以克隆到本地。。
vue 是如何规划目录的
- scripts ------------- 构建相关文件
-
git-hooks.js
----- 存放 git 钩子 -
alias.js
----- 别名配置文件
-
config.js
------ 生成 rollup 配置 -
build.js
----- 对上面config.js中所有的 rollup配置进行构建 -
replease.sh
----- 自动发布新版本的脚本
-
- dist ------------- 构建后文件的输出目录
- examples ------------- vue中的一些例子 demo
- flow ------------- js中的类型声明,和typescript差不多,提供强类型
- packages ------------- 存放独立发布的包的目录
- test ------------- 所有测试文件
- src ------------- 包含了源码目录
-
compiler
-----编译器代码存放的目录, 将 template 变异成 render函数 -
core
----- 存放通用的代码- observer ----- 存放响应系统, 包含数据观测的核心代码
- vdmo ----- 包含虚拟dom创建和打补丁
- instance ----- vue构造函数设计相关代码
- global-api ----- vue构造函数添加全局静态方法和属性的代码
- components ----- 抽象出来的通用组件, 如
keep-alive
-
server
----- 包含服务器渲染 -
platforms
----- 包含平台特有的相关代码- web ----- web平台
- weex ----- 混合应用
- sfc ----- 包含单文件组件
- shared ----- 通用的辅助代码
-
- yarn.lock ------------- yarn 锁定文件
- editorconfig ------------- 针对编辑器编码风格的配置文件
- .flowconfig ------------- flow 配置文件
- .babelrc ------------- babel 配置文件
- .eslintrc ------------- eslint 配置文件
- .eslintignore ------------- eslint 忽略配置
- .gitignore ------------- git 忽略配置
vue的构建配置和输出
vue有三种不同的构建输出, 是 umd
、 commenjs
、es modules
。在 scripts/config.js的37行 builds对象中能看到
。
配置的入口文件 entry
都是 web/entry-runtime.js
, 但是输出的格式 format
分别是 cjs
、 es
和 umd
。
每个模块的形式还分为: 运行时版
和 完整版
。
运行时版本: web/entry-runtime.js
完整版: web/entry-runtime-with-compiler.js
主要差别是完整版比运行时版多了个 with-compiler.js
, 这个使用用来将template
编译成render
函数的。
为什么要分为运行时版和完整版?
完整版 = 运行版 + compiler。完整版就比运行时版多了个从 template
编译成 render
函数的过程。 将字符串模块编译成render函数不一定是要等到代码运行的时候去做,可以在构建的时候就完成这一步。所以运行时版
结合构建工具搭配更好,可以减少库的提及,提升性能,还剋以将compiler
抽离成单独的包。
那完整版是不需要配合构建工具使用的。。
除了运行版和完整版,为啥还分这么多不同的包?
cjs
、es
、umd
直接通过 script 标签直接引入的包是 umd
的, 但是写 vue 大多数是配合构建工具 webpack
等使用的。cjs
是用于 webpack 1
的, 而es
是适用于 webpack 2+
、rollup
等的。webpack 2+
可以直接加载 es modules
,所以适用于es
的包。
vue package.json文件
scripts下的配置
{ "scripts": { // 构建 完整版 umd 模块的vue "dev": "rollup -w -c scripts/config.js --environment target:web-full-dev", // 构建 `运行时` `cjs` 模块的vue "dev:cjs": "rollup -w -c scripts/config.js --environment target:web-runtime-cjs", // 构建 `运行时` `es` 模块的vue "dev:esm": "rollup -w -c scripts/config.js --environment target:web-runtime-esm", "dev:test": "karma start test/unit/karma.dev.config.js", // 构建 vue-server-renderer 包 "dev:ssr": "rollup -w -c scripts/config.js --environment target:web-server-renderer", // 构建 compiler "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 }, "config": { "commitizen": { "path": "./node_modules/cz-conventional-changelog" } } }