vue3 源码学习1 工程化打包

vue3 版本 3.2.45

1.Vue3的源码：github.com/vuejs/core

2.找到package.json ，找到"build": "node scripts/build.js"

/*
Produces production builds and stitches together d.ts files.

To specify the package to build, simply pass its name and the desired build
formats to output (defaults to `buildOptions.formats` specified in that package,
or "esm,cjs"):

```
# name supports fuzzy match. will build all packages with name containing "dom":
nr build dom

# specify the format to output
nr build core --formats cjs
```
*/

const fs = require('fs-extra')
const path = require('path')
const chalk = require('chalk')
const execa = require('execa')
const { gzipSync } = require('zlib')
const { compress } = require('brotli')
const { targets: allTargets, fuzzyMatchTarget } = require('./utils')
const args = require('minimist')(process.argv.slice(2))
console.log(args)
const targets = args._
const formats = args.formats || args.f
console.log(formats)
const devOnly = args.devOnly || args.d
const prodOnly = !devOnly && (args.prodOnly || args.p)
const sourceMap = args.sourcemap || args.s
const isRelease = args.release
const buildTypes = args.t || args.types || isRelease
const buildAllMatching = args.all || args.a
const commit = execa.sync('git', ['rev-parse', 'HEAD']).stdout.slice(0, 7)

run()

async function run() {
  if (isRelease) {
    // remove build cache for release builds to avoid outdated enum values
    await fs.remove(path.resolve(__dirname, '../node_modules/.rts2_cache'))
  }
  if (!targets.length) {
    await buildAll(allTargets)
    checkAllSizes(allTargets)
  } else {
    await buildAll(fuzzyMatchTarget(targets, buildAllMatching))
    checkAllSizes(fuzzyMatchTarget(targets, buildAllMatching))
  }
}

async function buildAll(targets) {
  await runParallel(require('os').cpus().length, targets, build)
}

async function runParallel(maxConcurrency, source, iteratorFn) {
  const ret = []
  const executing = []
  for (const item of source) {
    // 通过Promise.resolve()创建一个微任务的异步函数，然后将build函数放入then中等待执行；
    const p = Promise.resolve().then(() => iteratorFn(item, source))
    ret.push(p)
    if (maxConcurrency <= source.length) {
      // 对异步函数进行包装，包装的目的是在异步函数执行完毕后，将这个异步函数从 executing 数组中移除
      const e = p.then(() => executing.splice(executing.indexOf(e), 1))
      // 将包装后的异步函数放入 executing 数组中
      executing.push(e)

      // 如果达到最大并发数，那么就等待一个异步函数执行完毕，然后再执行下一个异步函数
      if (executing.length >= maxConcurrency) {
        await Promise.race(executing)
      }
    }
  }
  return Promise.all(ret)
}

async function build(target) {
  // 获取当前构建的包的路径
  const pkgDir = path.resolve(`packages/${target}`)
  // 获取当前构建的包的 package.json
  const pkg = require(`${pkgDir}/package.json`)
  //忽略全量构建的私有包
  // if this is a full build (no specific targets), ignore private packages
  if ((isRelease || !targets.length) && pkg.private) {
    return
  }

  // if building a specific format, do not remove dist.
  // 如果是构建指定的格式，那么就不要删除 dist 目录
  if (!formats) {
    await fs.remove(`${pkgDir}/dist`)
  }
  // 构建目标生成的环境变量 production
  const env =
    (pkg.buildOptions && pkg.buildOptions.env) ||
    (devOnly ? 'development' : 'production')
  // 执行 rollup 构建,使用npm run build命令的时候，没有传递任何参数，所以formats、buildTypes、prodOnly、sourceMap都是undefined
  await execa(
    'rollup',
    [
      '-c',
      '--environment',
      [
        `COMMIT:${commit}`,
        `NODE_ENV:${env}`,
        `TARGET:${target}`,
        formats ? `FORMATS:${formats}` : ``,
        buildTypes ? `TYPES:true` : ``,
        prodOnly ? `PROD_ONLY:true` : ``,
        sourceMap ? `SOURCE_MAP:true` : ``
      ]
        .filter(Boolean)
        .join(',')
    ],
    { stdio: 'inherit' }
  )

  if (buildTypes && pkg.types) {
    console.log()
    console.log(
      chalk.bold(chalk.yellow(`Rolling up type definitions for ${target}...`))
    )

    // build types
    const { Extractor, ExtractorConfig } = require('@microsoft/api-extractor')

    const extractorConfigPath = path.resolve(pkgDir, `api-extractor.json`)
    const extractorConfig =
      ExtractorConfig.loadFileAndPrepare(extractorConfigPath)
    const extractorResult = Extractor.invoke(extractorConfig, {
      localBuild: true,
      showVerboseMessages: true
    })

    if (extractorResult.succeeded) {
      // concat additional d.ts to rolled-up dts
      const typesDir = path.resolve(pkgDir, 'types')
      if (await fs.exists(typesDir)) {
        const dtsPath = path.resolve(pkgDir, pkg.types)
        const existing = await fs.readFile(dtsPath, 'utf-8')
        const typeFiles = await fs.readdir(typesDir)
        const toAdd = await Promise.all(
          typeFiles.map(file => {
            return fs.readFile(path.resolve(typesDir, file), 'utf-8')
          })
        )
        await fs.writeFile(dtsPath, existing + '\n' + toAdd.join('\n'))
      }
      console.log(
        chalk.bold(chalk.green(`API Extractor completed successfully.`))
      )
    } else {
      console.error(
        `API Extractor completed with ${extractorResult.errorCount} errors` +
          ` and ${extractorResult.warningCount} warnings`
      )
      process.exitCode = 1
    }

    await fs.remove(`${pkgDir}/dist/packages`)
  }
}

function checkAllSizes(targets) {
  if (devOnly || (formats && !formats.includes('global'))) {
    return
  }
  console.log()
  for (const target of targets) {
    checkSize(target)
  }
  console.log()
}

function checkSize(target) {
  const pkgDir = path.resolve(`packages/${target}`)
  checkFileSize(`${pkgDir}/dist/${target}.global.prod.js`)
  if (!formats || formats.includes('global-runtime')) {
    checkFileSize(`${pkgDir}/dist/${target}.runtime.global.prod.js`)
  }
}

function checkFileSize(filePath) {
  if (!fs.existsSync(filePath)) {
    return
  }
  const file = fs.readFileSync(filePath)
  const minSize = (file.length / 1024).toFixed(2) + 'kb'
  const gzipped = gzipSync(file)
  const gzippedSize = (gzipped.length / 1024).toFixed(2) + 'kb'
  const compressed = compress(file)
  const compressedSize = (compressed.length / 1024).toFixed(2) + 'kb'
  console.log(
    `${chalk.gray(
      chalk.bold(path.basename(filePath))
    )} min:${minSize} / gzip:${gzippedSize} / brotli:${compressedSize}`
  )
}

可以看到这里是直接执行的run函数，这个函数的代码如下：

run()

async function run() {
  if (isRelease) {
    // remove build cache for release builds to avoid outdated enum values
    await fs.remove(path.resolve(__dirname, '../node_modules/.rts2_cache'))
  }
  if (!targets.length) {
    await buildAll(allTargets)
    checkAllSizes(allTargets)
  } else {
    await buildAll(fuzzyMatchTarget(targets, buildAllMatching))
    checkAllSizes(fuzzyMatchTarget(targets, buildAllMatching))
  }
}

这里有两个判断，使用了定义的全局变量，一个是isRelease，一个是targets，先来看一下这两个变量是怎么获取的。 

const args = require('minimist')(process.argv.slice(2))
const targets = args._

const isRelease = args.release

minimist是一个解析命令行参数的包，可以将命令行参数解析成一个对象

process.argv ：[
  'E:\\node\\node.exe',
  'D:\\study2022\\core-3.2.45\\scripts\\build.js'
]

args：{ _: [] }，isRelease:undefined ，targets.length=0

走 await buildAll(allTargets)

const { targets: allTargets, fuzzyMatchTarget } = require('./utils')

require('./utils')  :

const fs = require('fs')
const chalk = require('chalk')
//fs.readdirSync来读取packages文件夹下的文件，然后通过filter过滤
const targets = (exports.targets = fs.readdirSync('packages').filter(f => {
  // 过滤不是文件夹的文件
  if (!fs.statSync(`packages/${f}`).isDirectory()) {
    return false
  }
  // 再拿到这个文件夹中的package.json文件
  const pkg = require(`../packages/${f}/package.json`)
  // 通过package.json文件中的private和buildOptions来判断是否是
//一个需要打包的文件夹，如果是的话，就将这个文件夹的名字添加到targets数组中；
  if (pkg.private && !pkg.buildOptions) {
    return false
  }
  return true
}))

exports.fuzzyMatchTarget = (partialTargets, includeAllMatching) => {
  const matched = []
  partialTargets.forEach(partialTarget => {
    for (const target of targets) {
      if (target.match(partialTarget)) {
        matched.push(target)
        if (!includeAllMatching) {
          break
        }
      }
    }
  })
  if (matched.length) {
    return matched
  } else {
    console.log()
    console.error(
      `  ${chalk.bgRed.white(' ERROR ')} ${chalk.red(
        `Target ${chalk.underline(partialTargets)} not found!`
      )}`
    )
    console.log()

    process.exit(1)
  }
}

fs.readdirSync()方法用于同步读取给定目录的内容。该方法返回一个数组，其中包含目录中的所有文件名或对象。 options参数可用于更改从方法返回文件的格式。

用法:fs.readdirSync( path, options )

fs.statSync(fullPath).isDirectory() 来判断是否是文件目录

async function buildAll(targets) {
  await runParallel(require('os').cpus().length, targets, build)
}

require('os').cpus().length ：获取当前电脑的 CPU 线程数

async function runParallel(maxConcurrency, source, iteratorFn) {
  const ret = []
  const executing = []
  for (const item of source) {
    // 通过Promise.resolve()创建一个微任务的异步函数，然后将build函数放入then中等待执行；
    const p = Promise.resolve().then(() => iteratorFn(item, source))
    ret.push(p)
    if (maxConcurrency <= source.length) {
      // 对异步函数进行包装，包装的目的是在异步函数执行完毕后，将这个异步函数从 executing 数组中移除
      const e = p.then(() => executing.splice(executing.indexOf(e), 1))
      // 将包装后的异步函数放入 executing 数组中
      executing.push(e)

      // 如果达到最大并发数，那么就等待一个异步函数执行完毕，然后再执行下一个异步函数
      if (executing.length >= maxConcurrency) {
        await Promise.race(executing)
      }
    }
  }
  return Promise.all(ret)
}

Promise.race的特性就是只要有一个异步函数执行完毕，那么Promise.race就会有执行结果；

而在这些异步函数执行完毕后，会将这些异步函数从executing数组中移除，这样就会空出一个位置，通过检测executing数组的长度，就可以知道是否达到了最大并发数，这样就可以保持最大并发数的异步函数在执行；

而这个代码的最后还是会调用一次Promise.all，这是因为Promise.race只能保证最先执行完毕的异步函数执行完毕，但是并不能保证所有的异步函数都执行完毕，所以这里还是需要调用一次Promise.all来保证所有的异步函数都执行完毕；

async function build(target) {
    // 获取当前构建的包的路径
    const pkgDir = path.resolve(`packages/${target}`)

    // 获取当前构建的包的 package.json
    const pkg = require(`${pkgDir}/package.json`)

    // if this is a full build (no specific targets), ignore private packages
    // 如果是全量构建，那么就忽略私有包
    if ((isRelease || !targets.length) && pkg.private) {
        return
    }

    // if building a specific format, do not remove dist.
    // 如果是构建指定的格式，那么就不要删除 dist 目录
    if (!formats) {
        await fs.remove(`${pkgDir}/dist`)
    }

    // 构建目标生成的环境变量
    const env = (pkg.buildOptions && pkg.buildOptions.env) || (devOnly ? 'development' : 'production')

    // 执行 rollup 构建
    await execa(
        'rollup',
        [
            '-c',
            '--environment',
            [
                `COMMIT:${commit}`,
                `NODE_ENV:${env}`,
                `TARGET:${target}`,
                formats ? `FORMATS:${formats}` : ``,
                buildTypes ? `TYPES:true` : ``,
                prodOnly ? `PROD_ONLY:true` : ``,
                sourceMap ? `SOURCE_MAP:true` : ``
            ]
                .filter(Boolean)
                .join(',')
        ], {
            stdio: 'inherit'
        }
    )

    // if 里面的代码不会执行，因为执行 npm run build 的时候没有任何参数，所以下面的代码省略
    if (buildTypes && pkg.types) {
          // 这里主要是建构建类型声明文件
    }
}

这里的rollup命令是通过execa来执行的，execa是一个可以执行命令的库；

这里的execa的第一个参数就是要执行的命令;

第二个参数就是要传递给命令的参数;

第三个参数就是execa的配置，这里的stdio配置就是让execa的输出和rollup的输出保持一致；

使用npm run build命令的时候，没有传递任何参数，所以formats、buildTypes、prodOnly、sourceMap都是undefined

rollup -c --environment COMMIT:01c4323,NODE_ENV:production,TARGET:compiler-core

子包package.json:

"buildOptions": {
     "name": "heartImUtil",  
     "compat": true,         // 用于特定vue-compat包
     "formats": [        // 输出的文件类型, 查看rollup.config.js 中对应outputConfigs的类型
       "esm-bundler",    
       "esm-bundler-runtime",
       "cjs",
       "global",
       "global-runtime",
       "esm-browser",
       "esm-browser-runtime",    
     ],
     "env": "development",   // 指定当前环境
     "prod": false,          // process.env.NODE_ENV 为 production 时prod = false ，直接跳过打包
     "enableNonBrowserBranches": true    // true用于node端， false 用于node端
   },

rollup.config.js 配置

// @ts-check
import path from 'path'
import ts from 'rollup-plugin-typescript2'
import replace from '@rollup/plugin-replace'
import json from '@rollup/plugin-json'

if (!process.env.TARGET) {
  throw new Error('TARGET package must be specified via --environment flag.')
}
// 获取 package 的版本号
const masterVersion = require('./package.json').version
// packages 目录路径
const packagesDir = path.resolve(__dirname, 'packages')
// 当前构建工程包的路径
const packageDir = path.resolve(packagesDir, process.env.TARGET)
// 简单封装一个 resolve 函数，方便后面使用
const resolve = p => path.resolve(packageDir, p)
// 通过 resolve 函数获取当前构建工程包的 package.json
const pkg = require(resolve(`package.json`))
// 当前构建工程包的 package.json 的 buildOptions 配置
const packageOptions = pkg.buildOptions || {}
// 工程名，通过  package.json 的 buildOptions 配置来的，如果没有就是工程的包名
const name = packageOptions.filename || path.basename(packageDir)

// ensure TS checks only once for each build
// 否则执行 ts 检查的标识，确保只会执行一次检查
let hasTSChecked = false
// 输出模块化的配置，包含了 cjs、esm、iife
const outputConfigs = {
  'esm-bundler': {
    file: resolve(`dist/${name}.esm-bundler.js`),
    format: `es`
  },
  'esm-browser': {
    file: resolve(`dist/${name}.esm-browser.js`),
    format: `es`
  },
  cjs: {
    file: resolve(`dist/${name}.cjs.js`),
    format: `cjs`
  },
  global: {
    file: resolve(`dist/${name}.global.js`),
    format: `iife`
  },
  // runtime-only builds, for main "vue" package only
  'esm-bundler-runtime': {
    file: resolve(`dist/${name}.runtime.esm-bundler.js`),
    format: `es`
  },
  'esm-browser-runtime': {
    file: resolve(`dist/${name}.runtime.esm-browser.js`),
    format: 'es'
  },
  'global-runtime': {
    file: resolve(`dist/${name}.runtime.global.js`),
    format: 'iife'
  }
}

// 默认的输出配置，对应上面的 outputConfigs
const defaultFormats = ['esm-bundler', 'cjs']
// 通过参数传递的构建包的格式，使用 npm run build 命令没有这个参数  为undefined
const inlineFormats = process.env.FORMATS && process.env.FORMATS.split(',')
// 最终包构架的格式，优先使用参数传递的格式，其次使用 package.json 的 buildOptions.formats 配置，最后使用默认的格式
const packageFormats = inlineFormats || packageOptions.formats || defaultFormats
// 最终包构架的格式的配置，通过 packageFormats 过滤出 outputConfigs 中的配置
const packageConfigs = process.env.PROD_ONLY
  ? []
  : packageFormats.map(format => createConfig(format, outputConfigs[format]))

if (process.env.NODE_ENV === 'production') {
  packageFormats.forEach(format => {
    // 如果 package.json 中的 buildOptions.prod 确定为 false，那么就不会添加生产环境的配置
    if (packageOptions.prod === false) {
      return
    }
    // cjs 的配置会增加的配置，通过 createProductionConfig 函数来创建
    if (format === 'cjs') {
      packageConfigs.push(createProductionConfig(format))
    }
    // 浏览器环境包增加的配置，通过 createMinifiedConfig 函数来创建
    if (/^(global|esm-browser)(-runtime)?/.test(format)) {
      packageConfigs.push(createMinifiedConfig(format))
    }
  })
}

export default packageConfigs

function createConfig(format, output, plugins = []) {
  if (!output) {
    console.log(require('chalk').yellow(`invalid format: "${format}"`))
    // process.exit()方法用于结束同时运行的进程,1-未捕获的致命异常
    process.exit(1)
  }

  const isProductionBuild =
    process.env.__DEV__ === 'false' || /\.prod\.js$/.test(output.file)
  // formats 为自定义的打包格式，有 esm-bundler 在构建工具中使用的格式、esm-browser 在浏览器中使用的格式、cjs 在 node 中使用的格式、global 立即执行函数的格式

  // 是否是esm-bundler 格式
  const isBundlerESMBuild = /esm-bundler/.test(format)
  // 是否是esm-browser 格式
  const isBrowserESMBuild = /esm-browser/.test(format)
  // 包名是否是 server-renderer
  const isServerRenderer = name === 'server-renderer'
  //  打包的种类是否是cjs
  const isNodeBuild = format === 'cjs'
  // 打包的种类 是否含有global
  const isGlobalBuild = /global/.test(format)
  // package.json的name 是否是@vue/compat
  const isCompatPackage = pkg.name === '@vue/compat'
  // 是否用于特定vue-compat包 "compat": true,
  const isCompatBuild = !!packageOptions.compat
  // 如果是@vue/compat，output.exports为auto，否则为named
  output.exports = isCompatPackage ? 'auto' : 'named'
  // 定义的sourcemap值为false
  output.sourcemap = !!process.env.SOURCE_MAP
  output.externalLiveBindings = false
  // 如果是 打包出global格式 output.name 为子package.json中 buildOptions的name
  if (isGlobalBuild) {
    output.name = packageOptions.name
  }

  const shouldEmitDeclarations =
    pkg.types && process.env.TYPES != null && !hasTSChecked

  const tsPlugin = ts({
    check: process.env.NODE_ENV === 'production' && !hasTSChecked,
    tsconfig: path.resolve(__dirname, 'tsconfig.json'),
    cacheRoot: path.resolve(__dirname, 'node_modules/.rts2_cache'),
    tsconfigOverride: {
      compilerOptions: {
        target: isServerRenderer || isNodeBuild ? 'es2019' : 'es2015',
        sourceMap: output.sourcemap,
        declaration: shouldEmitDeclarations,
        declarationMap: shouldEmitDeclarations
      },
      exclude: ['**/__tests__', 'test-dts']
    }
  })
  // we only need to check TS and generate declarations once for each build.
  // it also seems to run into weird issues when checking multiple times
  // during a single build.
  hasTSChecked = true

  let entryFile = /runtime$/.test(format) ? `src/runtime.ts` : `src/index.ts`

  // the compat build needs both default AND named exports. This will cause
  // Rollup to complain for non-ESM targets, so we use separate entries for
  // esm vs. non-esm builds.
  if (isCompatPackage && (isBrowserESMBuild || isBundlerESMBuild)) {
    entryFile = /runtime$/.test(format)
      ? `src/esm-runtime.ts`
      : `src/esm-index.ts`
  }

  let external = []

  if (isGlobalBuild || isBrowserESMBuild || isCompatPackage) {
    if (!packageOptions.enableNonBrowserBranches) {
      // normal browser builds - non-browser only imports are tree-shaken,
      // they are only listed here to suppress warnings.
      external = ['source-map', '@babel/parser', 'estree-walker']
    }
  } else {
    // Node / esm-bundler builds.
    // externalize all direct deps unless it's the compat build.
    external = [
      ...Object.keys(pkg.dependencies || {}),
      ...Object.keys(pkg.peerDependencies || {}),
      ...['path', 'url', 'stream'] // for @vue/compiler-sfc / server-renderer
    ]
  }

  // we are bundling forked consolidate.js in compiler-sfc which dynamically
  // requires a ton of template engines which should be ignored.
  let cjsIgnores = []
  if (pkg.name === '@vue/compiler-sfc') {
    const consolidatePath = require.resolve('@vue/consolidate/package.json', {
      paths: [packageDir]
    })
    cjsIgnores = [
      ...Object.keys(require(consolidatePath).devDependencies),
      'vm',
      'crypto',
      'react-dom/server',
      'teacup/lib/express',
      'arc-templates/dist/es5',
      'then-pug',
      'then-jade'
    ]
  }

  const nodePlugins =
    (format === 'cjs' && Object.keys(pkg.devDependencies || {}).length) ||
    packageOptions.enableNonBrowserBranches
      ? [
          // @ts-ignore
          require('@rollup/plugin-commonjs')({
            sourceMap: false,
            ignore: cjsIgnores
          }),
          ...(format === 'cjs'
            ? []
            : // @ts-ignore
              [require('rollup-plugin-polyfill-node')()]),
          require('@rollup/plugin-node-resolve').nodeResolve()
        ]
      : []

  return {
    input: resolve(entryFile),
    // Global and Browser ESM builds inlines everything so that they can be
    // used alone.
    external,
    plugins: [
      json({
        namedExports: false
      }),
      tsPlugin,
      createReplacePlugin(
        isProductionBuild,
        isBundlerESMBuild,
        isBrowserESMBuild,
        // isBrowserBuild?
        (isGlobalBuild || isBrowserESMBuild || isBundlerESMBuild) &&
          !packageOptions.enableNonBrowserBranches,
        isGlobalBuild,
        isNodeBuild,
        isCompatBuild,
        isServerRenderer
      ),
      ...nodePlugins,
      ...plugins
    ],
    output,
    onwarn: (msg, warn) => {
      if (!/Circular/.test(msg)) {
        warn(msg)
      }
    },
    treeshake: {
      moduleSideEffects: false
    }
  }
}

function createReplacePlugin(
  isProduction,
  isBundlerESMBuild,
  isBrowserESMBuild,
  isBrowserBuild,
  isGlobalBuild,
  isNodeBuild,
  isCompatBuild,
  isServerRenderer
) {
  // 替换的关键字和内容对象的映射
  const replacements = {
    __COMMIT__: `"${process.env.COMMIT}"`,
    __VERSION__: `"${masterVersion}"`,
    __DEV__: isBundlerESMBuild
      ? // preserve to be handled by bundlers
        `(process.env.NODE_ENV !== 'production')`
      : // hard coded dev/prod builds
        !isProduction,
    // this is only used during Vue's internal tests
    __TEST__: false,
    // If the build is expected to run directly in the browser (global / esm builds)
    __BROWSER__: isBrowserBuild,
    __GLOBAL__: isGlobalBuild,
    __ESM_BUNDLER__: isBundlerESMBuild,
    __ESM_BROWSER__: isBrowserESMBuild,
    // is targeting Node (SSR)?
    __NODE_JS__: isNodeBuild,
    // need SSR-specific branches?
    __SSR__: isNodeBuild || isBundlerESMBuild || isServerRenderer,

    // for compiler-sfc browser build inlined deps
    ...(isBrowserESMBuild
      ? {
          'process.env': '({})',
          'process.platform': '""',
          'process.stdout': 'null'
        }
      : {}),

    // 2.x compat build
    __COMPAT__: isCompatBuild,

    // feature flags
    __FEATURE_SUSPENSE__: true,
    __FEATURE_OPTIONS_API__: isBundlerESMBuild ? `__VUE_OPTIONS_API__` : true,
    __FEATURE_PROD_DEVTOOLS__: isBundlerESMBuild
      ? `__VUE_PROD_DEVTOOLS__`
      : false,
    ...(isProduction && isBrowserBuild
      ? {
          'context.onError(': `/*#__PURE__*/ context.onError(`,
          'emitError(': `/*#__PURE__*/ emitError(`,
          'createCompilerError(': `/*#__PURE__*/ createCompilerError(`,
          'createDOMCompilerError(': `/*#__PURE__*/ createDOMCompilerError(`
        }
      : {})
  }
  // allow inline overrides like
  //__RUNTIME_COMPILE__=true yarn build runtime-core
  Object.keys(replacements).forEach(key => {
    if (key in process.env) {
      replacements[key] = process.env[key]
    }
  })
  return replace({
    // @ts-ignore
    values: replacements,
    preventAssignment: true
  })
}

function createProductionConfig(format) {
  return createConfig(format, {
    file: resolve(`dist/${name}.${format}.prod.js`),
    format: outputConfigs[format].format
  })
}

function createMinifiedConfig(format) {
  const { terser } = require('rollup-plugin-terser')
  return createConfig(
    format,
    {
      file: outputConfigs[format].file.replace(/\.js$/, '.prod.js'),
      format: outputConfigs[format].format
    },
    [
      terser({
        module: /^esm/.test(format),
        compress: {
          ecma: 2015,
          pure_getters: true
        },
        safari10: true
      })
    ]
  )
}

通过分析vue源码的package.json的scripts配置，我们了解到vue是通过nodejs的execa包，对rollup的命令进行了封装，从而实现了对rollup的命令和配置动态化；

execa是基于child_process的封装，可以让我们更加方便的执行命令，vue利用这个特性，使用多线程的方式，同时执行多个rollup命令，从而加快了打包速度；

rollup的配置文件是通过rollup.config.js来进行配置的，而vue通过各种参数的封装，实现了对rollup配置的动态化，从而实现了对不同的打包方案的适配；

考虑到vue可能会在不同的环境下运行，vue通过配置rollup的output.format参数，可以实现对不同的打包方案的适配，比如cjs、esm、iife等，从而实现对浏览器环境、node环境、webpack、vite等打包工具的适配；

考虑到产物最终可能需要区分开发环境和生产环境，vue通过配置rollup的replace插件，可以实现对__DEV__的动态替换，从而实现对开发环境和生产环境的适配；

• esm：指的是es6出的模块化规范，它是js原生支持的模块化规范，它的特点是动态加载，可以在运行时加载模块，而且可以通过import()动态加载模块，它的优点是可以按需加载，减少了打包后的文件体积；
• commonjs：指的是node出的模块化规范，它的特点是静态加载，只能在编译时加载模块，而且只能通过require()加载模块，它的优点是可以同步加载，不需要考虑加载顺序；
• iife：指的是IIFE模块化规范，它的特点是静态加载，只能在编译时加载模块，而且只能通过script标签加载模块，它的优点是可以同步加载，不需要考虑加载顺序；