• 第一章 vue源码构建


    基于RullUp(l类似于webpack区别在于rullup只处理js部分)构建

    因为vue也是发布到npm上的所以需要package.json来描述

     【name】在npm上的名字 【version】版本【main】npm包的入口也就是import vue时通过main查找入口【module】跟main一样

    【scripts】任务

     build为构建任务【ssr】 server render相关构建 【weex】 weex相关构建

    源码在src目录下通过build构建生成的文件放在dist目录下

     问题:为什么能构建如此多的文件构建过程是怎么样的

    npm run build

     

    执行图片中地址的js

     

     

     打开config.js(打包配置文件)

    builds是一个对象存放了不同版本的配置每个配置的【entry】表示入口【dest】表示目标【format】构建出来的文件格式【banner】注释

    其中entry中是一个resolve方法中传了一个字符串如下图resolve函数函数中的if判断用到了alias

    具体分析alias发现也是暴露了一个对象path.resolve是node.js提供的一个路径解析的方法_dirname表示当前的目录后面的字符串表示相对的目标目录

    所以alias的作用是返回一个js文件的地址alias提供了到真实地址的映射关系

     暴露了getallbuilds方法该函数通过keys拿到builds的数组然后通过map方法每个都调用genconfig函数

    为什么要调用genconfig函数因为genconfig才是rollup打包所需的配置格式

    然后再过滤

     对应执行npm run build时package.json中的配置(将不需要的过滤如果不写任何参数则过滤weex)

     

    最终调用build方法

     

     

     对比runtime only和runtime compile版区别only版本预编译了template通过webpack vue-loader 而compiler是在运行时动态编译了template通过在生成的vue代码中加入编译器

  • 相关阅读:
    USACO第三道题
    uva350 PseudoRandom Numbers
    uva10879 Code Refactoring
    Scrum 冲刺第一篇 晨曦
    WC.exe 晨曦
    [LeetCode 126] 单词梯II(Word Ladder II)
    [LeetCode 129] 根节点到叶子节点数字求和(Sum Root to Leaf Numbers)
    [LeetCode 125] 验证回文(Valid Palindrome)
    [LeetCode 123] 买入与卖出股票的最佳时机III(Best Time to Buy and Sell Stock III)
    [LeetCode 124] 二叉树最大路径和(Binary Tree Maximum Path Sum)
  • 原文地址:https://www.cnblogs.com/555556J/p/14988075.html
Copyright © 2020-2023  润新知