vue源碼構(gòu)建代碼分析

RyanHoo 發(fā)布于2019-08-23 12:22 / 2725人閱讀

這是xue源碼學(xué)習(xí)記錄，如有錯(cuò)誤請(qǐng)指出，謝謝！相互學(xué)習(xí)相互進(jìn)步。

vue源碼目錄為

vue
├── src        #vue源碼    
├── flow       #flow定義的數(shù)據(jù)類型庫（vue通過flow來檢測(cè)數(shù)據(jù)類型是否正確）         
├── examples   #demo   
├── scripts    #vue構(gòu)建命令
├── ...

vue內(nèi)部代碼模塊比較清晰，這邊主要分析scripts內(nèi)部代碼，講解vue是如何進(jìn)行構(gòu)建的.
首先你必須要懂一些rollup,vue內(nèi)部是通過rollup來進(jìn)行構(gòu)建的，rollup是一款js的構(gòu)建工具，
將各個(gè)小模塊打包成一個(gè)總的模塊(只針對(duì)js文件，比較輕量，不會(huì)有css，img等壓縮，比較適合開發(fā)插件，
如果是ui組件庫的話，還是webpack構(gòu)建會(huì)比較好。)
rollup說明文檔：https://rollupjs.cn/

文件主要是scripts下的alias.js，config.js和build.js三個(gè)文件組成

alias

主要就是提供文件對(duì)應(yīng)的路徑

const path = require("path")

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

// 以下是設(shè)置別名，與對(duì)應(yīng)的真實(shí)文件路徑
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") // 這個(gè)是測(cè)試目錄是自己添加的
}

其中test是我自己加的，為了測(cè)試打包

config

config是為了提供打包的基礎(chǔ)配置(即rollup打包配置文件格式)，由于打包內(nèi)容比較多，
所以做成可配置的

const path = require("path")
const buble = require("rollup-plugin-buble")
// 提供modules名稱的 alias 和reslove 功能
const alias = require("rollup-plugin-alias")
// 將CommonJS模塊轉(zhuǎn)換為 ES2015供Rollup 處理
const cjs = require("rollup-plugin-commonjs")
// 變量替換，可以將動(dòng)態(tài)設(shè)置的變量提取出來在配置文件中設(shè)置
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服務(wù)器端代碼，不需要管
// 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)
  }
}
// 設(shè)置打包參數(shù) 
// 這邊把原先vue打包文件去除，替換成知己的一個(gè)測(cè)試文件
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
  }
}

// 根據(jù)上面builds打包轉(zhuǎn)換成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"
    }
  }
  // 如果是開發(fā)模式
  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已被替換成我自己的測(cè)試文件，用于測(cè)試打敗es,模塊化和瀏覽器的不同格式。

build

build文件就是根據(jù)配置文件進(jìn)行打包，打包模式分為全部打包，或者是可配置打包，
如果運(yùn)行npm run build，將會(huì)打包所有的配置，
而運(yùn)行npm run build "參數(shù)"，則根據(jù)參數(shù)配置進(jìn)行打包

const fs = require("fs")
const path = require("path")
const zlib = require("zlib")
const rollup = require("rollup")
const uglify = require("uglify-js")
// 檢測(cè)是否有dist文件
if (!fs.existsSync("dist")) {
  fs.mkdirSync("dist")
}

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

// build后面輸入的參數(shù)
if (process.argv[2]) {
  // 過濾出需要打包的數(shù)組
  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)
// 打包函數(shù)
function build(builds) {
  let built = 0
  const total = builds.length
  const next = () => {
    buildEntry(builds[built]).then(() => {
      built++
      if (built < total) {
        next()
      }
    }).catch(logError)
  }
  next()
}
// 單個(gè)配置文件打包
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 + "
" : "") + 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()
      }
    })
  })
}
// 計(jì)算文件大小
function getSize (code) {
  return (code.length / 1024).toFixed(2) + "kb"
}
// 輸入錯(cuò)誤信息
function logError (e) {
  console.log(e)
}
function blue (str) {
  return "x1b[1mx1b[34m" + str + "x1b[39mx1b[22m"
}

測(cè)試文件

main.js

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

foo.js

export default "hello rollup"

通過npm run build打包測(cè)試，會(huì)在dist文件打包出test-cjs.js，test-es.js，test-umd.js
文件內(nèi)容如下：
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;

})));

這個(gè)構(gòu)建的過程不難，比起webpack的配置文件要容易懂很多
懂得了vue的構(gòu)建，接下來就可以開始vue源碼的學(xué)習(xí)了