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" } }}
