zoukankan      html  css  js  c++  java
  • 第一章 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代码中加入编译器

  • 相关阅读:
    第三天 python的初始编码,基本数据类型(int,str,bool),字符串的操作
    while循环,格式化输出,运算符,while...else...
    python的种类,变量,常量,基础数据类型,input,if条件语句
    JavaScript 之 web API
    传输层上的TCP和UDP
    应用层上的协议HTTP
    计算机网络通信
    grid布局
    使用classList和dataset实现tab切换
    JS之跨域
  • 原文地址:https://www.cnblogs.com/555556J/p/14988075.html
Copyright © 2011-2022 走看看