VUE 3.0 源码 rollup.config.js 文件整体功能介绍

文件路径：VUE 3.0 源码 /rollup.config.js

上一篇文章中，单独介绍了各种类型的输出文件的差异，今天这篇文章将完整的介绍一下该配置文件

一、rollup.config.js 配置信息时如何生效的？

scripts/dev.js | scripts/build.js 文件中都有这么一个函数：

execa( 'rollup',  [ '-c', '--environment', [ // ... ], ])

关键就在 '-c' 这个参数上：作用是rollup打包指定使用配置文件 rollup.config.js

二、整体描述一下该配置文件的执行过程：整体围绕生成 packageConfigs 配置信息的创建展开，创建完成后：export default packageConfigs，具体细节如下：

1、dev非正式环境下回执行函数createConfig()创建配置信息，prod环境会调用createProductionConfig() 和 createMinifiedConfig() 两个函数生成相应的配置信息。

2、createConfig过程：

（1）会配置input入口文件。
（2）external 外部依赖的名称。
（3）plugins 插件信息。
（4）调用 createReplacePlugin 函数：配置替换插件中需要替换的变量，打包过程中替换文件中的字符串。
（5）配置output输出信息。
（6）设置onwarn 拦截警告消息.如果未配置，警告信息将被去重并打印到控制台。
（7）配置treeshake降低代码体积。

三、上源码，内容有点多，根据上面梳理的思路，可以快速浏览一下各个环节的代码：

/**
 * path是node的默认库我们在启动项目的时候使用的是node的环境所以path库就可以直接使用了，而不需要在安装了，
 * 这就是为什么package.json中没有path的原因
 */
import path from 'path'
/** 带有typescript编译器错误的的rollup插件,它可以打印出typescript语法和语义诊断消息*/
import ts from 'rollup-plugin-typescript2'
/** 替换文件中的目标字符串 */
import replace from '@rollup/plugin-replace'
/**
 * 允许 Rollup 从 JSON 文件中导入数据
 * 例如：import {version} from '../package.json';
 */
import json from '@rollup/plugin-json'

// 环境变量中目标模块为设置异常处理，由于命令行中输入的模块名跟 packages 目录项模块不匹配导致
if (!process.env.TARGET) {
  throw new Error('TARGET package must be specified via --environment flag.')
}

// 根目录下 package.json 中定义的版本号
const masterVersion = require('./package.json').version
// 根目录下 packages 路径
const packagesDir = path.resolve(__dirname, 'packages')
// 命令行中输入的模块名称在 packages 目录中所匹配的模块路径
const packageDir = path.resolve(packagesDir, process.env.TARGET)
// packages 目录下某模块名称
const name = path.basename(packageDir)
const resolve = p => path.resolve(packageDir, p)
// 引入当前模块下的 package.json 文件
const pkg = require(resolve(`package.json`))
// 引入当前模块下的 package.json 文件 中设定的 buildOptions 属性
const packageOptions = pkg.buildOptions || {}

// ensure TS checks only once for each build
// 全局记录TS检测状态，完成一次检测后记录状态，防止多次检测，出现错误。
let hasTSChecked = false

/**
 * 一、全局打包: vue(.runtime).global(.prod).js：【使用 CDN 或没有构建工具】
 *
 * 1、全局打包不是 UMD 构建的，它们被打包成 IIFEs，并且仅用于通过 <script src="..."> 直接使用。
 *    format: `iife`
 *    https://developer.mozilla.org/en-US/docs/Glossary/IIFE
 *    iife 的全称是 Immediately Invoked Function Expression ，即"立即调用的函数表达式"，
 *    可以很容易的用 JS 来表达：(function () {}())
 *    用于通过 <script src="..."> 直接使用。
 * 2、若要通过浏览器中的 <script src="..."> 直接使用，则暴露 Vue 全局。
 * 3、vue.global.js 是包含编译器和运行时的“完整”构建版本，因此它支持动态编译模板。
 * 4、vue.runtime.global.js 只包含运行时，并且需要在构建步骤期间预编译模板。
 *
 * 二、