01-Vue源码的构建过程解析之scripts/build.js

const fs = require('fs') // node内建的文件系统模块
const path = require('path') // node内建的路径模块
const zlib = require('zlib') // 用来压缩的
const rollup = require('rollup') // 没什么好说的
const terser = require('terser') // 不知道干啥的

// 保证dist目录存在
if (!fs.existsSync('dist')) {
  fs.mkdirSync('dist')
}

// 获取全部的构建配置
let builds = require('./config').getAllBuilds()

// 根据命令行获取要构建的目标，如果没有则构建全部目标（不包括weex）
// filter builds via command line arg
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(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|prod)\.js$/.test(file)
  // 其实这段代码的详细我是没看懂的，有疑问的，但是这个不影响我理解大概，我不想看rollup的东西了
  return rollup.rollup(config)
    .then(bundle => bundle.generate(output))
    .then(({ output: [{ code }] }) => {
      if (isProd) {
        const minified = (banner ? banner + '\n' : '') + terser.minify(code, {
          toplevel: true,
          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()
      }
    })
  })
}

// 以kb的格式获取大小
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'
}

觉得好的给我点赞哦:)