vue源码构建代码分析

这是xue源码学习记录，如有错误请指出，谢谢！相互学习相互进步。

vue源码目录为


vue
├── src        #vue源码
├── flow       #flow定义的数据类型库（vue通过flow来检测数据类型是否正确）
├── examples   #demo
├── scripts    #vue构建命令
├── ...

vue内部代码模块比较清晰，这边主要分析scripts内部代码，讲解vue是如何进行构建的.
首先你必须要懂一些rollup,vue内部是通过rollup来进行构建的，rollup是一款js的构建工具，
将各个小模块打包成一个总的模块(只针对js文件，比较轻量，不会有css，img等压缩，比较适合开发插件，
如果是ui组件库的话，还是webpack构建会比较好。)
rollup说明文档：https://rollupjs.cn/

文件主要是scripts下的alias.js，config.js和build.js三个文件组成

alias

主要就是提供文件对应的路径


const path = require('path')

const resolve = p => path.resolve(__dirname, '../', p)

// 以下是设置别名，与对应的真实文件路径
module.exports = {
  vue: resolve('src/platforms/web/entry-runtime-with-compiler'),
  compiler: resolve('src/compiler'),
  core: resolve('src/core'),
  shared: resolve('src/shared'),
  web: resolve('src/platforms/web'),
  weex: resolve('src/platforms/weex'),
  server: resolve('src/server'),
  entries: resolve('src/entries'),
  sfc: resolve('src/sfc'),
  test: resolve('src/test') // 这个是测试目录是自己添加的
}

其中test是我自己加的，为了测试打包

config

config是为了提供打包的基础配置(即rollup打包配置文件格式)，由于打包内容比较多，
所以做成可配置的


const path = require('path')
const buble = require('rollup-plugin-buble')
// 提供modules名称的 alias 和reslove 功能
const alias = require('rollup-plugin-alias')
// 将CommonJS模块转换为 ES2015供Rollup 处理
const cjs = require('rollup-plugin-commonjs')
// 变量替换，可以将动态设置的变量提取出来在配置文件中设置
const replace = require('rollup-plugin-replace')
// 帮助 Rollup 查找外部模块，然后安装
const node = require('rollup-plugin-node-resolve')
const flow = require('rollup-plugin-flow-no-whitespace')
const version = process.env.VERSION || require('../package.json').version
// 下面是weex服务器端代码，不需要管
// const weexVersion = process.env.WEEX_VERSION || require('../packages/weex-vue-framework/package.json').version

// 这边是打包完成后模块外部首行注释代码
const banner =
  `/*
   * test-vue.js v${version}
   * (C) 2014-${new Date().getFullYear()} Enan You
   * @author zhengjie
   */
  `
// 获取文件夹路径别名
const aliases = require('./alias')
// 寻找路径
const resolve = p => {
  const base = p.split('/')[0]
  if (aliases[base]) {
    return path.resolve(aliases[base], p.slice(base.length + 1))
  } else {
    return path.resolve(__dirname, '../', p)
  }
}
// 设置打包参数
// 这边把原先vue打包文件去除，替换成知己的一个测试文件
const builds = {
  'test-cjs': {
    entry: resolve('test/main.js'),
    dest: resolve('dist/test-cjs.js'),
    format: 'cjs', // csj格式 module.exports
    banner
  },
  'test-es': {
    entry: resolve('test/main.js'),
    dest: resolve('dist/test-es.js'),
    format: 'es', // es格式 export default
    banner
  },
  'test-umd': {
    entry: resolve('test/main.js'),
    dest: resolve('dist/test-umd.js'),
    format: 'umd', // 浏览器格式 return
    banner
  }
}

// 根据上面builds打包转换成rollup打包格式
function getConfig(name) {
  const opts = builds[name]
  const config = {
    input: opts.entry,
    external: opts.external,
    plugins: [
      replace({
        __WEEX__: !!opts.weex,
        __WEEX_VERSION__: null,
        __VERSION__: version
      }),
      flow(),
      buble(),
      alias(Object.assign({}, aliases, opts.alias))
    ].concat(opts.plugins || []),
    output: {
      file: opts.dest,
      format: opts.format,
      banner: opts.banner,
      name: opts.moduleName || 'Vue'
    }
  }
  // 如果是开发模式
  if (opts.env) {
    config.plugins.push(replace({
      'process.env.NODE_ENV': JSON.stringify(opts.env)
    }))
  }
  // 增加属性
  Object.defineProperty(config, '_name', {
    enumerable: false,
    value: name
  })

  return config
}

if (process.env.TARGET) {
  module.exports = getConfig(process.env.TARGET)
} else {
  exports.getBuild = getConfig
  exports.getAllBuilds = () => Object.keys(builds).map(getConfig)
}

其中里面的builds已被替换成我自己的测试文件，用于测试打败es,模块化和浏览器的不同格式。

build

build文件就是根据配置文件进行打包，打包模式分为全部打包，或者是可配置打包，
如果运行npm run build，将会打包所有的配置，
而运行npm run build ‘参数‘， 则根据参数配置进行打包


const fs = require('fs')
const path = require('path')
const zlib = require('zlib')
const rollup = require('rollup')
const uglify = require('uglify-js')
// 检测是否有dist文件
if (!fs.existsSync('dist')) {
  fs.mkdirSync('dist')
}

let builds = require('./config').getAllBuilds()

// build后面输入的参数
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)
// 打包函数
function build(builds) {
  let built = 0
  const total = builds.length
  const next = () => {
    buildEntry(builds[built]).then(() => {
      built++
      if (built < total) {
        next()
      }
    }).catch(logError)
  }
  next()
}
// 单个配置文件打包
function buildEntry(config) {
  const output = config.output
  const {file, banner} = output
  // 是否为压缩文件
  const isProd = /min\.js$/.test(file)
  return rollup.rollup(config)
    .then(bundle => bundle.generate(output))
    .then(({code}) => {
      // 压缩我文件
      if (isProd) {
        var minified = (banner ? banner + '\n' : '') + uglify.minify(code, {
          output: {
            ascii_only: true
          },
          compress: {
            pure_funcs: ['makeMap']
          }
        }).code
        return write(file, minified, true)
      } else {
        return write(file, code)
      }
    })
}

function write(dest, code, zip) {
  return new Promise((resolve, reject) => {
    function report (extra) {
      console.log(blue(path.relative(process.cwd(), dest)) + ' ' + getSize(code) + (extra || ''))
      resolve()
    }

    fs.writeFile(dest, code, err => {
      if (err) return reject(err)
      if (zip) {
        zlib.gzip(code, (err, zipped) => {
          if (err) return reject(err)
          report(' (gzipped: ' + getSize(zipped) + ')')
        })
      } else {
        report()
      }
    })
  })
}
// 计算文件大小
function getSize (code) {
  return (code.length / 1024).toFixed(2) + 'kb'
}
// 输入错误信息
function logError (e) {
  console.log(e)
}
function blue (str) {
  return '\x1b[1m\x1b[34m' + str + '\x1b[39m\x1b[22m'
}

测试文件

main.js


import foo from './foo';
export default function () {
  console.log(foo)
}

foo.js


export default "hello rollup"

通过npm run build打包测试，会在dist文件打包出test-cjs.js，test-es.js，test-umd.js
文件内容如下：
test-cjs.js


/*
   * test-vue.js v1.0.0
   * (C) 2014-2018 Enan You
   * @author zhengjie
   */

'use strict';

var foo = "hello rollup"

function main () {
  console.log(foo);
}

module.exports = main;

test-es.js


/*
   * test-vue.js v1.0.0
   * (C) 2014-2018 Enan You
   * @author zhengjie
   */

var foo = "hello rollup"

function main () {
  console.log(foo);
}

export default main;

test-umd.js


/*
   * test-vue.js v1.0.0
   * (C) 2014-2018 Enan You
   * @author zhengjie
   */

(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
    typeof define === 'function' && define.amd ? define(factory) :
    (global.Vue = factory());
}(this, (function () { 'use strict';

var foo = "hello rollup"

function main () {
  console.log(foo);
}

return main;

})));

这个构建的过程不难，比起webpack的配置文件要容易懂很多
懂得了vue的构建，接下来就可以开始vue源码的学习了

原文地址：

原文地址：https://www.cnblogs.com/lalalagq/p/9901166.html

时间： 2024-10-10 08:42:03

vue源码构建代码分析的相关文章

Eclipse导入Github上的Robotium源码进行代码分析的步骤

这篇文章应该只是针对像我这样的初级Maven用户的,因为自己花了不少时间来解决这个问题,而网上很多文章描述的也是语焉不详,所以记录下来以便后来如我者可以借鉴一二.文中有几点细节我觉得需要注意的我会高亮出来. 1. 问题描述 今天打算查看一下Robotum(其项目本身基于maven,因为我发现项目中有pom.xml文件)框架的源代码去了解其具体实现以加深理解,但下载后按照认知的方法去Import Maven Project后会发现函数跳转等功能通通不工作,按F3定位一个函数的声明位置时会出现: P

vue 源码深入学习分析——史上超详细

2017/6/2 15:27:50 第一次复习 vue 框架号称五分钟就能上手,半小时就能精通,这是因为其使用非常简单,就像下面一样: let vm = new Vue({ el: '#app', data: { a: 1, b: [1, 2, 3] } }) 在最开始,我传递了两个选项 el 以及 data ,很简单,官网上也是这样写的. 你肯定注意到了,我使用了 new 操作符.这就很自然的想到,Vue 就是一个构造函数,vm是 Vue构造函数 生成的实例,我们的配置项是传入构造函数的参数,

深入vue - 源码目录及构建过程分析

 公众号原文链接:深入vue - 源码目录及构建过程分析   喜欢本文可以扫描下方二维码关注我的公众号 「前端小苑」 ?“ 本文主要梳理一下vue代码的目录,以及vue代码构建流程,旨在对vue源码整体有一个认知,有助于后续对源码的阅读.” 一.目录结构 上图是对vue的代码的所有目录进行的梳理,其中源码位于src目录下,下面对src下的目录进行介绍. compiler 该目录是编译相关的代码,即将 template 模板转化成 render 函数的代码. vue 提供了 render 函数,r

[Vue源码分析] v-model实现原理

最近小组有个关于vue源码分析的分享会,提前准备一下- 前言:我们都知道使用v-model可以实现数据的双向绑定,及实现数据的变化驱动dom的更新,dom的更新影响数据的变化.那么v-model是怎么实现这一原理的呢?接下来探索一下这部分的源码. 前期准备①:vue2.5.2源码(用于阅读.查看关联等)②:建立vue demo,创建包含v-model指令的实例(用于debugger)以下为demo: genDirectives在模板的编译阶段, v-model跟其他指令一样,会被解析到 el.d

vue源码分析：响应式之依赖收集

今天记录下vue源码的响应式的源码学习,第一步,我们想下,为什么为们写一个data.然后里边的数据变化就能映射到dom的变化上.这里用到了Object.defineProperty(obj,key, {}),如果你还不了解建议去jsmdn上仔细了解下,这个函数的目的就是检测你得赋值和取值的过程用来定义自己的行为,比如obj[key]会拿到配置里边的get函数定义,obj[key] = 'xxx'会调用配置中的set.那么vue也是一样的,在get中做了依赖收集(也就是说哪些dom用到了我定义的这

大白话Vue源码系列(01)：万事开头难

阅读目录 Vue 的源码目录结构 预备知识 先捡软的捏 Angular 是 Google 亲儿子,React 是 Facebook 小正太,那咱为啥偏偏选择了 Vue 下手,一句话,Vue 是咱见过的最对脾气的 MVVM 框架.之前也使用过 knockout,angular,react 这些框架,但都没有让咱产生 follow 的冲动.直到见到 Vue,简直是一见钟情啊. Vue 的官方文档已经对 Vue 如何使用提供了最好的教程,建议 Vue 新手直接去官网学习,而不要在网上找些质量参差不齐的

Vue源码探究-虚拟DOM的渲染

Vue源码探究-虚拟DOM的渲染 在虚拟节点的实现一篇中,除了知道了 VNode 类的实现之外,还简要地整理了一下DOM渲染的路径.在这一篇中,主要来分析一下两条路径的具体实现代码. 按照创建 Vue 实例后的一般执行流程,首先来看看实例初始化时对渲染模块的初始处理.这也是开始 mount 路径的前一步.初始包括两部分,一是向 Vue 类原型对象上挂载渲染相关的方法,而是初始化渲染相关的属性. 渲染的初始化 下面代码位于vue/src/core/instance/render.js 相关属性初始

[Vue源码]一起来学Vue模板编译原理(一)-Template生成AST

本文我们一起通过学习Vue模板编译原理(一)-Template生成AST来分析Vue源码.预计接下来会围绕Vue源码来整理一些文章,如下. 一起来学Vue双向绑定原理-数据劫持和发布订阅 一起来学Vue模板编译原理(一)-Template生成AST 一起来学Vue模板编译原理(二)-AST生成Render字符串 一起来学Vue虚拟DOM解析-Virtual Dom实现和Dom-diff算法 这些文章统一放在我的git仓库:https://github.com/yzsunlei/javascrip

vue源码解读预热-0

vueJS的源码解读 vue源码总共包含约一万行代码量(包括注释)特别感谢作者Evan You开放的源代码,访问地址为Github 代码整体介绍与函数介绍预览 代码模块分析 代码整体思路 总体的分析 从图片中可以看出的为采用IIFE(Immediately-Invoked Function Expression)立即执行的函数表达式的形式进行的代码的编写 常见的几种插件方式: (function(,){}(,))或(function(,){})(,)或!function(){}()等等,其中必有