上一主题 下一主题
ScriptCat,新一代的脚本管理器脚本站,与全世界分享你的用户脚本油猴脚本开发指南教程目录
返回列表 发新帖

边喝热水边学Vue源码之二--目录结构和源码构建

[复制链接]
  • TA的每日心情
    慵懒
    2024-10-21 21:38
  • 签到天数: 53 天

    [LV.5]常住居民I

    7

    主题

    34

    回帖

    68

    积分

    初级工程师

    积分
    68

    新人报道喜迎中秋

    发表于 2023-11-7 20:50:02 | 显示全部楼层 | 阅读模式

    目录结构

    在从GitHub上下的源码中找到 dist 下文件目录
    Win10系统下打开Powershell cd 到当前目录下\vue-2.6.14\dist使用tree /f >a.txt生成,文件模块的命名很清晰

    ├─compiler   # 编译相关
    │  ├─codegen
    │  ├─directives
    │  └─parser
    ├─core       # 核心代码
    │  ├─components
    │  ├─global-api
    │  ├─instance
    │  │  └─render-helpers
    │  ├─observer
    │  ├─util
    │  └─vdom
    │      ├─helpers
    │      └─modules
    ├─platforms   # 支持多平台
    │  ├─web
    │  │  ├─compiler
    │  │  │  ├─directives
    │  │  │  └─modules
    │  │  ├─runtime
    │  │  │  ├─components
    │  │  │  ├─directives
    │  │  │  └─modules
    │  │  ├─server
    │  │  │  ├─directives
    │  │  │  └─modules
    │  │  └─util
    │  └─weex
    │      ├─compiler
    │      │  ├─directives
    │      │  └─modules
    │      │      └─recycle-list
    │      ├─runtime
    │      │  ├─components
    │      │  ├─directives
    │      │  ├─modules
    │      │  └─recycle-list
    │      └─util
    ├─server    # 服务端渲染
    │  ├─bundle-renderer
    │  ├─optimizing-compiler
    │  ├─template-renderer
    │  └─webpack-plugin
    ├─sfc       # .vue 文件解析
    └─shared    #  共享代码
    compiler

    编译相关

    将模板代码编译为AST树、AST树的优化、AST树转对应的代码

    编译的工作可以在构建时做,也可以在运行时做,但编译是耗时的工作,所以推荐使用前者

    这里代码生成的功能是生成什么样的代码,html的?

    core

    核心相关

    内置组件、全局API封装、Vue实例化、观察者、虚拟dom、工具函数等等。

    platforms

    打包为对应平台的版本

    不同的平台所运行的代码是有差异的,虽然网页端统称为web,但是有很多基于原生网页的开发且具有一定的影响力,这里推出了web和weex两个类打包应用

    server

    服务端渲染

    由于知识储备不足,不是很理解vue作为前端框架,打包后应该是web资源,怎么会利用的到服务器渲染。大意是这里的代码是运行在服务器上的nodejs中与网页的js有区别,不要弄混。下面是专业的介绍,

    服务端渲染主要的工作是把组件渲染为服务器端的 HTML 字符串,将它们直接发送到浏览器,最后将静态标记"混合"为客户端上完全交互的应用程序。

    看文档说是服务端渲染,

    sfc

    解析vue文件,最后解析成为一个js的对象

    shared

    一些工具方法,复用代码。

    源码构建

    打包的两个工具webpack 和 rollup,webpack会打包全部的web资源比如图片的静态资源,所以打包后的文件比较大;rollup仅打包js相关的资源,打包后的文件算是js的库比较轻量,vue选择的是rollup。

    后面我也看到的用webpack能打包,多会一个工具总没有错的,可能是不同版本。

    构建脚本

    也就是说\dist\vue.x.js都是编译生成的结构,并不是作者在电脑上编写出来,为了编写出更多平台使用的代码就需要配置一些参数。这些js文件是在scripts\config.js的配置中看到,每个配置都要dest 字段,摘抄部分如下:

    const builds = {
      // Runtime only (CommonJS). Used by bundlers e.g. Webpack & Browserify
      'web-runtime-cjs-dev': {
        entry: resolve('web/entry-runtime.js'),
        dest: resolve('dist/vue.runtime.common.dev.js'),
        format: 'cjs',
        env: 'development',
        banner
      }

    构建过程

    scripts\build.js 有很多功能,但我听明白的就有一个,生成的js文件内代码是否需要压缩,如果带有min

    参数就生成vue.x.min.js的文件,里面的代码是用于生产环境下的。

    使用别名

    scripts\alias.js 内容不多,不过没看明白是什么意思,为什么要用别名,是因为原名比较长不方面阅读码?

    Runtime Only VS Runtime + Compiler

    Runtime Only 版本的编译是借助webpackde的vue-loader工具把.vue文件编译为js,离线编译只需要编译需要运行使用的vue.js代码,因此代码体积也会更轻量。

    Runtime + Compiler 运行时编译,在开发测试时将编写的template模板编译为可以展示的web页面。

    // 需要编译器的版本  Compiler
    new Vue({
      template: '<div>{{ hi }}</div>'
    })
    
    // 这种情况不需要 Compiler
    new Vue({
      render (h) {
        return h('div', this.hi)
      }
    })

    同样效果的代码,写法不同所需要使用的编译环境也就不同了。

    个人感觉

    预编译和离线编译是同一个意思

    这两天写了的东西时发现也存在半吊子的作者比如我,有些写的东西我未必真懂,如果误导了谁算你倒霉,所以要先思考要质疑再接受,\狗头 \狗头 间接说明审稿人的存在时很有必要的,可以防止误导大众,即使误导了别人审稿人也是有责任的,哈哈。

  • TA的每日心情
    慵懒
    2024-10-21 21:38
  • 签到天数: 53 天

    [LV.5]常住居民I

    7

    主题

    34

    回帖

    68

    积分

    初级工程师

    积分
    68

    新人报道喜迎中秋

    发表于 2023-11-8 08:37:45 | 显示全部楼层
    ggnb,发布的帖子可以重新编辑,我发现了好多错别字,
    回复

    使用道具 举报

  • TA的每日心情
    慵懒
    2024-10-21 21:38
  • 签到天数: 53 天

    [LV.5]常住居民I

    7

    主题

    34

    回帖

    68

    积分

    初级工程师

    积分
    68

    新人报道喜迎中秋

    发表于 2023-11-8 08:40:38 | 显示全部楼层
    compiler的功能和sfc的有区别吗,好像都是编译文件生成html的代码呀,哪位哥哥知道区别?
    回复

    使用道具 举报

    发表回复

    本版积分规则

    快速回复 返回顶部 返回列表