VUE 3.0 源码 rollup.config.js 文件整体功能介绍
文件路径：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，并且仅用于通过直接使用。
*format: `iife`
*https://developer.mozilla.org/en-US/docs/Glossary/IIFE
*iife 的全称是 Immediately Invoked Function Expression ，即"立即调用的函数表达式"，
*可以很容易的用 JS 来表达：(function () {}())
*用于通过直接使用。
* 2、若要通过浏览器中的直接使用，则暴露 Vue 全局。
* 3、vue.global.js 是包含编译器和运行时的“完整”构建版本，因此它支持动态编译模板。
* 4、vue.runtime.global.js 只包含运行时，并且需要在构建步骤期间预编译模板。
*
* 二、vue(.runtime).esm-browser(.prod).js：【使用 CDN 或没有构建工具】
*
* 1、用于通过原生 ES 模块导入使用 (在浏览器中通过来使用)。
* 2、与全局构建版本共享相同的运行时编译、依赖内联和硬编码的 prod/dev 行为。
*
* 三、vue(.runtime).esm-bundler.js：【使用构建工具】
*
* 1、vue.runtime.esm-bundler.js (默认) 仅运行时，并要求所有模板都要预先编译。
*这是构建工具的默认入口 (通过 package.json 中的 module 字段)，
*因为在使用构建工具时，模板通常是预先编译的 (例如：在 *.vue 文件中)。
* 2、vue.esm-bundler.js 包含运行时编译器。
*如果你使用了一个构建工具，但仍然想要运行时的模板编译 (例如，DOM 内 模板或通过内联 JavaScript 字符串的模板)，
*请使用这个文件。你需要配置你的构建工具，将 vue 设置为这个文件
*
* 四、vue.cjs(.prod).js：【服务端渲染】
*
* 1、通过 require() 在 Node.js 服务器端渲染使用。
* 2、如果你将应用程序与带有 target: 'node' 的 webpack 打包在一起，并正确地将 vue 外部化，则将加载此文件。
* 3、dev/prod 文件是预构建的，但是会根据 process.env.NODE_ENV 自动加载相应的文件。
*/
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'
}
}// 模块默认打包方式
const defaultFormats = ['esm-bundler', 'cjs']
/**
* 命令行中输入的 -f | --formats 信息会在 scripts/dev.js 中赋值给环境变量 env.FORMATS。
* 如 'esm-bundler,cjs' 多个值时中间可用逗号分隔.
* process.env.FORMATS 默认值：'global'
*/const inlineFormats = process.env.FORMATS && process.env.FORMATS.split(',')/**
* 模块打包类型优先级：
* 第1优先级: inlineFormats 即命令行输入的 格式类型
* 第2优先级: packageOptions.formats 即命/packages目录下子模块 package.json 中 buildOptions 属性定义的formats
* 第2优先级: defaultFormats 即默认打包方式 ['esm-bundler', 'cjs']
*/
const packageFormats = inlineFormats || packageOptions.formats || defaultFormats/**
* 正式环境打包时(非dev开发环境)，需要添加 --prodOnly | -p 参数，
* -- 在 scripts/build.js 中，会检查命令行参数设置，参数正确时会设置 env.PROD_ONLY 环境变量。
* 1、正式环境 打包配置信息为 [];
* 2、其他非正式环境 通过函数 createConfig 创建配置信息；
*/
const packageConfigs = process.env.PROD_ONLY
? []
: packageFormats.map(format => createConfig(format, outputConfigs[format]))if (process.env.NODE_ENV === 'production') {
packageFormats.forEach(format => {
if (packageOptions.prod === false) {
return
}
if (format === 'cjs') {
packageConfigs.push(createProductionConfig(format))
}
if (/^(global|esm-browser)(-runtime)?/.test(format)) {
packageConfigs.push(createMinifiedConfig(format))
}
})
}export default packageConfigs/**
* 生成非正式环境模块打包配置信息
* @param {*} format 当前模块 formats 中的一个，如: /packages/vue/package.json buildOptions 属性中 formats 列表元素
* @param {*} output 定义输出配置信息 类型：{ file: string, format: string } 具体可参考变量: outputConfigs 元素属性值
* @param {*} plugins
* @returns
*/
function createConfig(format, output, plugins = []) {
// 没有定义package输出相关配置信息：打印警告信息 & 线程退出
if (!output) {
console.log(require('chalk').yellow(`invalid format: "${format}"`))
process.exit(1)
}// 根据全局环境变量SOURCE_MAP信息，给 output 变量设置 sourcemap 属性。
// 受控于命令行参数 --formats | -f 的影响
output.sourcemap = !!process.env.SOURCE_MAP
/**
* 给 output 变量设置 externalLiveBindings 属性，默认值（true）
* 当设置为false时，Rollup不会生成代码来支持外部导入的模块(假设导出的模块不会随时间而改变的前提下)。
* 这将允许Rollup生成更优化的代码。请注意，当存在涉及外部依赖项的循环依赖项时，这可能会导致问题。
* 这将避免大多数情况下Rollup在代码中生成getter，因此在许多情况下可用于使代码IE8兼容。
*/
output.externalLiveBindings = false/**
* 判断是否是正式环境打包：根据环境变量__DEV__ || 打包文件的输出路径名称是否以 '.prod.js' 结尾
* __DEV__ 什么时候被赋值的 (大概率跟 process.env.NODE_ENV 相关)
*/
const isProductionBuild =
process.env.__DEV__ === 'false' || /\.prod\.js$/.test(output.file)/* esm-bundler esm-browser cjs global 类型 详见 38~71 行注释 */
const isBundlerESMBuild = /esm-bundler/.test(format)
const isBrowserESMBuild = /esm-browser/.test(format)
const isNodeBuild = format === 'cjs'
const isGlobalBuild = /global/.test(format)/**
* 全局打包时，读取模块下 package.json 文件 中设定的 buildOptions 属性中的name属性赋值给output.name
*/
if (isGlobalBuild) {
output.name = packageOptions.name
}// 判断是否生成 .d.ts 和 .d.ts.map 文件
const shouldEmitDeclarations = process.env.TYPES != null && !hasTSChecked/** 配置TS 插件 */
const tsPlugin = ts({
// check: 设置为false可避免对代码进行任何诊断检查。
check: process.env.NODE_ENV === 'production' && !hasTSChecked,
/**
* tsconfig的路径.json。如果您的tsconfig在项目目录中有其他名称或相对位置，请设置此选项。
* 默认情况下，将尝试加载/tsconfig.json，但如果文件丢失，则不会失败，除非明确设置该值。
*/
tsconfig: path.resolve(__dirname, 'tsconfig.json'),
/* 缓存的路径。默认为node_modules目录下的一个的文件夹 */
cacheRoot: path.resolve(__dirname, 'node_modules/.rts2_cache'),
/**
* 覆盖原有的 tsconfigDefaults 配置信息 = merge tsconfig.json to tsconfigDefaults;
*/
tsconfigOverride: {
compilerOptions: {
sourceMap: output.sourcemap,
/**
* 为项目中TypeScript和JavaScript生成.d.ts文件
*/
declaration: shouldEmitDeclarations,
/**
* 开启 --declarationMap ，编译器会同时生成 .d.ts 和 .d.ts.map 文件。
* 语言服务现在能够正确识别这些映射文件，并且使用它们来映射到源码。
* 也就是说，在使用“跳到定义之处”功能时，会直接跳转到源码文件，而不是 .d.ts 文件。
*/
declarationMap: shouldEmitDeclarations
},
// 指定解析 include 属性配置信息时，应该跳过的文件名称
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.// 防止出现问题，每次构建只做一次 TS 检测
hasTSChecked = true// 定义模块入口文件
const entryFile = /runtime$/.test(format) ? `src/runtime.ts` : `src/index.ts`// 指出应将哪些模块视为外部模块，不会与你的库打包在一起。
const external =
isGlobalBuild || isBrowserESMBuild
? packageOptions.enableNonBrowserBranches
? // externalize postcss for @vue/compiler-sfc
// because @rollup/plugin-commonjs cannot bundle it properly
['postcss']
: // normal browser builds - non-browser only imports are tree-shaken,
// they are only listed here to suppress warnings.
['source-map', '@babel/parser', 'estree-walker']
: // Node / esm-bundler builds. Externalize everything.
[
...Object.keys(pkg.dependencies || {}),
...Object.keys(pkg.peerDependencies || {}),
...['path', 'url'] // for @vue/compiler-sfc
]// the browser builds of @vue/compiler-sfc requires postcss to be available
// as a global (e.g. http://wzrd.in/standalone/postcss)/**rollup通过`external` + `output.globals`来标记外部依赖 */
output.globals = {
postcss: 'postcss'
}/**
* node 插件
* 1. @rollup/plugin-node-resolve插件：使用节点解析算法在 node_modules 中查找第三方模块
* 2. @rollup/plugin-commonjs插件：将CommonJS模块转换为ES6，以便它们可以包含在Rollup bundle中
* 3. rollup-plugin-node-builtins插件: 允许 node 内置模块 to be required/imported.
* 4. rollup-plugin-node-globals插件: 用于嵌入 node 全局信息，包括用于browserify的代码，即使它使用进程或缓冲区，也应该可以工作
*/
const nodePlugins =
packageOptions.enableNonBrowserBranches && format !== 'cjs'
? [
require('@rollup/plugin-node-resolve').nodeResolve({
// 如果'true'，插件将更优先使用内置模块（例如'fs'，'path`）。如果'false'，插件将查找本地安装的同名模块。
preferBuiltins: true
}),
require('@rollup/plugin-commonjs')({
sourceMap: false
}),
require('rollup-plugin-node-builtins')(),
require('rollup-plugin-node-globals')()
]
: []return {
// 入口文件
input: resolve(entryFile),
// Global and Browser ESM builds inlines everything so that they can be
// used alone.
// 外部依赖的名称
external,
plugins: [
// 包含 JSON 插件
json({
// 为JSON对象的每个属性生成命名导出。默认为true
namedExports: false
}),
tsPlugin,
// 配置替换插件中需要替换的变量，打包过程中替换文件中的字符串。
createReplacePlugin(
isProductionBuild,
isBundlerESMBuild,
isBrowserESMBuild,
// isBrowserBuild?
(isGlobalBuild || isBrowserESMBuild || isBundlerESMBuild) &&
!packageOptions.enableNonBrowserBranches,
isGlobalBuild,
isNodeBuild
),
...nodePlugins,
...plugins
],
output,
// 拦截警告消息.如果未配置，警告信息将被去重并打印到控制台。
onwarn: (msg, warn) => {
if (!/Circular/.test(msg)) {
warn(msg)
}
},
treeshake: {
// code from imported modules will only be retained if at least one exported value is used
// 如果引入的模块代码想要保留，至少需要有一个该模块元素被使用过。
moduleSideEffects: false
}
}
}/**
* 配置 Replace 插件
*/
function createReplacePlugin(
isProduction,
isBundlerESMBuild,
isBrowserESMBuild,
isBrowserBuild,
isGlobalBuild,
isNodeBuild
) {
// 打包文件时替换文件中的字符串。
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,// 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(replacements)
}/**
* Prod 正式环境：format === 'cjs' 生成服务端渲染包时 额外配置信息
* @param {*} format
* @returns
*/
function createProductionConfig(format) {
return createConfig(format, {
file: resolve(`dist/${name}.${format}.prod.js`),
format: outputConfigs[format].format
})
}/**
* Prod 正式环境: global-runtime|esm-browser-runtime 的额外配置
* @param {*} format
* @returns
*/
function createMinifiedConfig(format) {
// minify generated es bundle 压缩 ES code
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), // true is set when format is esm or es
compress: {
// 5 | 2015 | 2016 | 2017 | 2018 | 2019 | 2020;
ecma: 2015,
pure_getters: true
}
})
]
)
}
如果您对 “前端源码” 情有独钟，可以微信扫码关注下面的公众号二维码，内容一直持续更新中！
当前 VUE3.0 源码正在解析中，欢迎捧场！
文章图片
推荐阅读
- vue-cli|vue-cli 3.x vue.config.js 配置
- 2020-04-07vue中Axios的封装和API接口的管理
- 情节33.0
- Android事件传递源码分析
- VueX--VUE核心插件
- Quartz|Quartz 源码解析(四) —— QuartzScheduler和Listener事件监听
- [源码解析]|[源码解析] NVIDIA HugeCTR，GPU版本参数服务器---(3)
- ffmpeg源码分析01（结构体）
- Java程序员阅读源码的小技巧，原来大牛都是这样读的，赶紧看看！
- vue组件中为何data必须是一个函数（）