1.Rollup介紹

1.2rollup和webpack都是區別

webpack更加強大 可以將圖片,css等都解析為js。
rollup 更適合於js庫的編譯，只適用於js部分，別的檔案是不管的，並且更加友好

2.Vue.js 原始碼構建指令碼

通常一個基於 NPM 託管的專案，在它的根目錄下都會有一個 package.json 檔案，它是對專案的描述檔案，它的內容實際上是一個標準的 JSON 物件。

我們學習閱讀一個專案的原始碼時，首先當然要看它的package.json檔案。這裡面有專案的依賴，有開發環境、生產環境等編譯的啟動指令碼，有專案的許可資訊等。

vue的 package.json我們將其簡寫為：

{
  "name": "vue",
  "version": "2.5.17-beta.0",
  "description": "Reactive, component-oriented view layer for modern web interfaces.",
  "main": "dist/vue.runtime.common.js",
  "module": "dist/vue.runtime.esm.js",
  "script": {
    "build": "node scripts/build.js",
    "build:ssr": "npm run build -- web-runtime-cjs,web-server-renderer"
 
,
    "build:weex": "npm run build --weex"
  }
}

我想前端都應該明白其中的含義，我們主要來看作為 NPM 的執行指令碼的script 欄位，
這裡總共有 3 條命令，作用都是構建 Vue.js，後面 2 條是在第一條命令的基礎上，新增一些環境引數。

當在命令列執行 npm run build 的時候，實際上就會執行 node scripts/build.js，接下來我們來看看它實際是怎麼構建的。

3.構建過程

構建執行 node scripts/build.js

3.1 scripts檔案下build.js 中：

3.1.1 大致過程

• 1.通過let builds = require(‘./config’).getAllBuilds()拿到每一種vue.js的相關配置

• 2.對所有的配置進行過濾，將package.json中的命令，例如npm run build –
  web-runtime-cjs,web-server-renderer，就是過濾掉不是web-runtime-cjs,web-server-renderer的，如果沒有傳引數，例如npmrun
  build 那麼就只將weex過濾，只打包web平臺

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 {
  // filter out weex builds by default
  builds = builds.filter(b => {
    return b.output.file.indexOf('weex') === -1
  })
}

• 3.對過濾後的vue.js檔案進行build，檔案中用的就是build函式

3.1.2 完整程式碼:

// 引入包
const fs = require('fs')
const path = require('path')
const zlib = require('zlib')
const rollup = require('rollup')
const uglify = require('uglify-js')

if (!fs.existsSync('dist')) {
  fs.mkdirSync('dist')
}

// 拿到所有的構建的配置
let builds = require('./config').getAllBuilds()

// 將配置進行過濾，將package.json中的命令，例如npm run build -- web-runtime-cjs,web-server-renderer，就是過濾掉不是web-runtime-cjs,web-server-renderer的，如果沒有傳引數，例如npm run build 那麼就只將weex過濾，只打包web平臺
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 {
  // filter out weex builds by default
  builds = builds.filter(b => {
    return b.output.file.indexOf('weex') === -1
  })
}

// 過濾後再通過build函式進行真正的構建過程
build(builds)

// build 在去呼叫buildEntry函式
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 }) => {
      // 如果是 min.js 結尾的js就再進行一次壓縮
      if (isProd) {
        var minified = (banner ? banner + '\n' : '') + uglify.minify(code, {
          output: {
            ascii_only: true
          },
          compress: {
            pure_funcs: ['makeMap']
          }
        }).code
        // 呼叫write方法
        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方法將檔案生成到dist目錄下
    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) {}

function logError (e) {}

function blue (str) {}

3.2 scripts檔案下config.js:

build.js在該檔案中拿到了每一種vue.js的相關配置

3.2.1 大致過程

• 1.通過const aliases = require(‘./alias’)，拿到大部分檔案的路徑
• 2.對resolve方法進行封裝，配合aliases檔案，其實就是獲取檔案的路徑，如下面的entry入口檔案

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)
  }
}

• 3.const builds = {}，不同版本vue.js的配置
• 4.function genConfig (name){} 真正的構建工具rollup的配置，每一種vue.js就會對用不同的配置
• 5.將通過vue.js的配置而得到的rollup的具體配置輸出

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

3.2.3 具體程式碼：

引入的檔案或元件
const path = require('path')
const buble = require('rollup-plugin-buble')
const alias = require('rollup-plugin-alias')
const cjs = require('rollup-plugin-commonjs')
const replace = require('rollup-plugin-replace')
const node = require('rollup-plugin-node-resolve')
const flow = require('rollup-plugin-flow-no-whitespace')
const version = process.env.VERSION || require('../package.json').version
const weexVersion = process.env.WEEX_VERSION || require('../packages/weex-vue-framework/package.json').version

// 註釋內容，也就是程式碼上面對該程式碼的說明
const banner =
  '/*!\n' +
  ' * Vue.js v' + version + '\n' +
  ' * (c) 2014-' + new Date().getFullYear() + ' Evan You\n' +
  ' * Released under the MIT License.\n' +
  ' */'

const weexFactoryPlugin = {
  intro () {
    return 'module.exports = function weexFactory (exports, document) {'
  },
  outro () {
    return '}'
  }
}

// 引入./alias檔案
const aliases = require('./alias')
// 對resolve方法進行封裝，其實就是獲取檔案的路徑，如下面的entry入口檔案
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.js的配置
const builds = {
  // Runtime only (CommonJS). Used by bundlers e.g. Webpack & Browserify
  'web-runtime-cjs': {
    // 入口檔案，resolve函式呼叫aliases檔案，最終拼接該s檔案真正的路徑，如果aliases檔案中沒有定義，那麼就會走resolve函式的else
    entry: resolve('web/entry-runtime.js'),
    // 生成目標檔案
    dest: resolve('dist/vue.runtime.common.js'),
    // 構建出來的檔案的格式
    format: 'cjs',
    // 關於檔案的註釋
    banner
  },
  // Runtime+compiler CommonJS build (CommonJS)
  'web-full-cjs': {
    entry: resolve('web/entry-runtime-with-compiler.js'),
    dest: resolve('dist/vue.common.js'),
    format: 'cjs',
    alias: { he: './entity-decoder' },
    banner
  },
  // runtime-only production build (Browser)
  'web-runtime-prod': {
  },
  // Runtime+compiler development build (Browser)
  'web-full-dev': {
  },
  // Runtime+compiler production build  (Browser)
  'web-full-prod': {
  },
  // Web compiler (CommonJS).
  'web-compiler': {
  },
  // Web compiler (UMD for in-browser use).
  'web-compiler-browser': {
  },
  // Web server renderer (CommonJS).
  'web-server-renderer': {
  },
  'web-server-renderer-basic': {
  },
  'web-server-renderer-webpack-server-plugin': {
  },
  'web-server-renderer-webpack-client-plugin': {
  },
  // Weex runtime factory
  'weex-factory': {
  },
  // Weex runtime framework (CommonJS).
  'weex-framework': {
  },
  // Weex compiler (CommonJS). Used by Weex's Webpack loader.
  'weex-compiler': {
  }
}

// 構建工具rollup真正的配置，上面的是每一中版本的vue.js的配置，下面才是構建工具rollup真正的配置
function genConfig (name) {
  const opts = builds[name]
  const config = {
    input: opts.entry,
    external: opts.external,
    plugins: [
      replace({
        __WEEX__: !!opts.weex,
        __WEEX_VERSION__: weexVersion,
        __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 = genConfig(process.env.TARGET)
} else {
  exports.getBuild = genConfig
  exports.getAllBuilds = () => Object.keys(builds).map(genConfig)
}

3.scripts檔案下alias.js

真實路徑的對映,
例如 config.js 中的builds物件

 entry: resolve('web/entry-runtime.js'),

web指的就是alias.js中 的

  web: resolve('src/platforms/web'),

完整程式碼：

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')
}

3.完整過程

npm run build

執行
script/build.js

build.js————-引入config.js,將配置進行過濾，過濾後再通過build函式進行真正的構建過程

config.js————引入alias.js，配置不同vue.js的配置，根據不同vue.js的配置輸出不同構建工具rollup真正的配置

alias.js————–提供檔案的路徑對映