• 第一章 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代码中加入编译器

  • 相关阅读:
    离屏渲染说明文章地址
    苹果文档文章查看地址
    仿照GPUImageMovieOutput写的只支持BGRA32的视频Buffer读取
    拍照摄像拉近摄像头
    消除nonnull警告
    人体姿态识别
    AR资讯文章
    获取图片中对象轮廓并替换白色
    jar包和war包的介绍和区别(转载)
    css美化Div边框的样式实例*(转载)
  • 原文地址:https://www.cnblogs.com/555556J/p/14988075.html
Copyright © 2020-2023  润新知