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,并且仅用于通过 
                    
                    

你可能感兴趣的:(前端vue.js源码分析)