Vue 目录结构
可以在 github
上通过这款 Chrome 插件 octotree 查看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"
}
}
}