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

2024年5月21日 184次阅读 来源: 南山

相识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”
    …
}

从敕令看出:

  1. vue是经由过程rollup来举行构建的
    一样的构建东西webpack更强大一些，能够处置惩罚图片、 css、js等；然则rollup只做js的处置惩罚，相比之下更轻量, 所以rollup更适合js框架的打包
  2. 总共有三个版本的构建
    从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)

获得的全部的构建流程是:

  1. 读取./config 设置文件中的设置，再依据敕令行中输入的参数，

    exports.getAllBuilds = () => Object.keys(builds).map(genConfig)
    // Object.keys(builds) 对象key的数组： 对应val的是差异版本的编译设置
    // genConfig 设置rollup构建的参数花样

  2. 个中getAllBuilds要领返回的是一个对象数组
  3. 去到这些设置中举行过滤,拿到对应的版本编译所须要的config, 传入到buildEntry要领去实行rollup编译
  4. rollup在.then内实行输出的文件地点，以及代码紧缩设置
  5. 个中config里的format 构建花样
  6. 末了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: '<div>{{ hi }}</div>'
   })
    原文作者：南山
    原文地址: https://segmentfault.com/a/1190000018717497
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞