Flow
-
认识 Flow
JavaScript 静态类型检查器，vue 源码利用 Flow 做静态类型检查
-
为什么用 Flow
js 动态类型语言，类型检查发展趋势，在编译期尽早发现 bug，不影响代码运行，使编写 js 有强类型语言的体验
-
FLow 工作方式
-
类型推断：通过变量的使用上下文推断变量类型，更具推断来检查类型
// Flow function split(str) { return str.split('') } split(11) // Flow检查报错，split期待的参数使字符串，而不是数字 -
类型注释：事先注释好期待的类型，Flow 会基于这些注释来判断
// Flow function add(x: number, y: number): number { return x + y } add('Hello', 11) // 类型推断不需要编写类型注释 特定场景需要类型注释提供更明确的检查
-
-
Flow 在 Vue.js 源码的应用
第三方库或自定义类型 Flow 并不认识，检查时报错，因此 FLow 提出 libdef 用来识别，在 Vue.js 主目录下有.flowconfig 文件，这里的[libs]配置的是 flow，表示指定的库定义都在 flow 文件夹内，阅读源码时，遇到某个类型可以在这里查看数据结构的定义
Vue 源码目录
src
├─compiler 编译相关
├─core Vue 核心库
├─platforms 平台相关代码
├─server SSR，服务端渲染
├─sfc .vue 文件编译为 js 对象
└─shared 公共的代码
-
compiler
包含 Vue.js 所有编译相关的代码，将模板解析为 ast 语法树，ast 语法树优化，代码生成等
编译工作推荐在构建时做（借助 webPack、vue-loader 等辅助插件）
-
core
Vue.js 核心代码，包括内置组件、全局 API 封装、Vue 实例化、观察者、虚拟 DOM、工具函数等
-
platform
Vue.js 是跨平台的 MVVM 框架，可在 web 和 native 客户端上，platform 是 Vue.js 的入口，2 个目录代表 2 个主要入口，分别打包成运行在 web 和 weex 上的 Vue.js
-
server
服务端渲染相关逻辑，主要是泡在服务端的 node.js
-
sfc
将单文件组件解析册成 javaScript 对象
-
shared
浏览器端和服务端所共享的工具方法
Vue 源码调试设置
-
打包工具 Rollup
- Vue.js 源码的打包工具使用的是 Rollup，比 Webpack 轻量
- Webpack 把所有文件当做模块，Rollup 只处理 js 文件更适合在 Vue.js 这样的库中使用
- Rollup 打包不会生成冗余的代码
-
安装依赖
npm i -
设置 sourcemap
package.json 文件中的 dev 脚本中添加参数 --sourcemap
"dev": "rollup -w -c scripts/config.js --sourcemap --environment TARGET:webfull-dev" -
执行 dev
npm run dev 执行打包，用的是 rollup，-w（watcher） 参数是监听文件的变化，文件变化自动重新打打包，-c 设置配置文件，--environment 设置环境变量，根据环境变量打包成不同版本的 vue
在 dist 目录中打包生成两个文件
image-20210304084053706.png
-
调试
-
examples示例中引入的 vue.min.js 改为 vue.js
-
打开 Chrome 的调试工具中的 source
-
image-20210304084317757.png
Vue 的不同构建版本
-
npm run build 重新打包所有文件
-
dist\README.md
image-20210304084412637.png
-
不同版本
- 完整版：同时包含编译器和运行时的版本。
- 编译器：用来将模板字符串编译成为 JavaScript 渲染函数的代码，体积大、效率低。
- 运行时：用来创建 Vue 实例、渲染并处理虚拟 DOM 等的代码，体积小、效率高。基本上就是除 去编译器的代码。
- UMD：UMD 版本通用的模块版本，支持多种模块方式。 vue.js 默认文件就是运行时 + 编译器的 UMD 版本
- CommonJS(cjs)：CommonJS 版本用来配合老的打包工具比如 Browserify 或 webpack 1。
- ES Module：从 2.6 开始 Vue 会提供两个 ES Modules (ESM) 构建文件，为现代打包工具提供的 版本
- ESM 格式被设计为可以被静态分析，所以打包工具可以利用这一点来进行“tree-shaking”并 将用不到的代码排除出最终的包
- ES6 模块与 CommonJS 模块的差异
-
Runtime + Compiler vs. Runtime-only
// Compiler // 需要编译器，把 template 转换成 render 函数 // const vm = new Vue({ // el: "#app", // template: "<h1>{{ msg }}</h1>", // data: { // msg: "Hello Vue", // }, // }); // Runtime // 不需要编译器 const vm = new Vue({ el: '#app', render(h) { return h('h1', this.msg) }, data: { msg: 'Hello Vue' } })推荐使用运行时版本，因为运行时版本相比完整版体积要小大约 30%
基于 Vue-CLI 创建的项目默认使用的是 vue.runtime.esm.js
通过查看 webpack 的配置文件
vue inspect > output.js
image-20210304085010850.png
*.vue 文件中的模板是在构建时预编译的，最终打包后的结果不需要编译器，只需要运行 时版本即可
网友评论