Vue源码解读前必须要知道的Vue构建流程

MASAILA 发布于2019-08-26 13:39 / 1129人阅读

摘要：了解的构建，可以从文件开始命令内关于构建的命令如下版本从命令看出是通过来进行构建的同样的构建工具更强大一些，可以处理图片等但是只做的处理，相比之下更轻量所以更适合框架的打包总共有三个版本的构建从版本的为起点来了解，版本的构建

了解Vue的构建，可以从package.json文件开始
sprits命令内关于构建的命令如下

{
    ...    
    "build": "node scripts/build.js”,  // web版本
     // sever
    "build:ssr": "npm run build -- web-runtime-cjs,web-server-renderer”, 
    // weex
    "build:weex": "npm run build -- weex”
    …
}

从命令看出:

vue是通过rollup来进行构建的
同样的构建工具webpack更强大一些，可以处理图片、 css、js等；但是rollup只做js的处理，相比之下更轻量, 所以rollup更适合js框架的打包

总共有三个版本的构建
从web版本的为起点来了解，Web版本的构建命令实际执行的是scripts/build.js
build文件的整个核心内容是build方法

et builds = require("./config").getAllBuilds()

if (process.argv[2]) {
    const filters = process.argv[2].split(",")
    builds = builds.filter(b => {
        return filters.some(f => b.output.file.indexOf(f) > -1 ||         b._name.indexOf(f) > -1)
    })
} else {
    //. 如果没有参数就把weex给过滤掉
    builds = builds.filter(b => {
        return b.output.file.indexOf("weex") === -1
    })
}

build(builds)

得到的整个的构建流程是:

读取./config 配置文件中的配置，再根据命令行中输入的参数，

exports.getAllBuilds = () => Object.keys(builds).map(genConfig)
// Object.keys(builds) 对象key的数组：对应val的是不同版本的编译配置
// genConfig 配置rollup构建的参数格式

其中getAllBuilds方法返回的是一个对象数组

去到这些配置中进行过滤,拿到对应的版本编译所需要的config, 传入到buildEntry方法去执行rollup编译

rollup在.then内执行输出的文件地址，以及代码压缩配置

其中config里的format 构建格式

最后config文件最后导出的是遵循rollup构建规则的所需要的数组对象

其中的别名配置暂不做分析，具体代码在scripts/alias中，

补充：在我们常用的web版Vue中，又区分了两种独立构建和运行时构建

两者直接的使用差别

Runtime Only 运行时构建，不包含模板编译器，借助vue-loader将.vue文件编译成js
优点: 代码体积轻量
缺点: 运行时需要借助vue-loader，把template模版编译成render函数
new Vue({

 render (h) {

   return h("div", this.hi)
 }

})

Runtime+Compiler 包含模板编译器
优点：动态把模版编译成render函数
缺点：体积大，对性能有损耗

new Vue({
     template: "{{ hi }}"
   })

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/109238.html

前方来报，八月最新资讯--关于vue2&3的最佳文章推荐

摘要：哪吒别人的看法都是狗屁，你是谁只有你自己说了才算，这是爹教我的道理。哪吒去他个鸟命我命由我，不由天是魔是仙，我自己决定哪吒白白搭上一条人命，你傻不傻敖丙不傻谁和你做朋友太乙真人人是否能够改变命运，我不晓得。我只晓得，不认命是哪吒的命。 showImg(https://segmentfault.com/img/bVbwiGL?w=900&h=378); 出处查看github最新的Vue...

izhuhaodev 2019-08-26 10:44 评论0 收藏0
(解析)vue源码解读

摘要：前言为什么要做源码解读我们新到一个环境，第一件事情就是熟悉环境熟悉项目，这个很考验阅读源码的能力以及耐心。构造函数拉到最下面，导出的是一个构造函数。前言 A: 为什么要做源码解读？Q: 我们新到一个环境，第一件事情就是熟悉环境熟悉项目，这个很考验阅读源码的能力以及耐心。vue是个很好的库，知名度高，对js的学习具有向上性，所以搞清楚逻辑是有好处的。A: 阅读源码的程度？Q: 我们完全...

mingde 2019-08-23 12:38 评论0 收藏0
【Vue原理】Slot - 源码版之普通插槽

摘要：我们都知道分为普通和作用域，两个内容都很多，所以分两部分进行讲述。今天讲的是普通其实普通，表示默认和具名，只是他们的处理方式都差不多，就只是是否有自定义名字而已，所以，表示一种类型。写文章不容易，点个赞呗兄弟专注 Vue 源码分享，文章分为白话版和源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧研究基于 Vue版本【2.5.17】如果你觉得排版难看，请...

lansheng228 2019-08-23 18:28 评论0 收藏0
vue源码解读-目录结构

摘要：目录结构构建相关的文件，一般情况下我们不需要动钩子别名配置目录结构 ├── scripts ------------------------------- 构建相关的文件，一般情况下我们不需要动│ ├── git-hooks ------------------------- git钩子│ ├── alias.js -------------------------- 别名配...

philadelphia 2019-08-23 13:51 评论0 收藏0
Webpack Loader 高手进阶(三)

摘要：相关的内容为这样对于一个处理的第二阶段也就结束了，通过去拦截不同类型的，并返回新的，跳过后面的的执行，同时在内部会剔除掉，这样在进入到下一个处理阶段的时候，不在使用的范围之内，因此下一阶段便不会经由来处理。文章首发于个人github blog: Biu-blog，欢迎大家关注~ Webpack 系列文章： Webpack Loader 高手进阶（一）Webpack Loader 高手...

ivydom 2019-08-23 16:12 评论0 收藏0