原来rollup这么简单之 rollup.rollup篇

你们好，我是小雨小雨，致力于分享有趣的、实用的技术文章。内容分为翻译和原创，若是有问题，欢迎随时评论或私信，但愿和你们一块儿进步。分享不易，但愿可以获得你们的支持和关注。javascript

计划

rollup系列打算一章一章的放出，内容更精简更专注更易于理解vue

目前打算分为如下几章：java

TL;DR

在进入枯燥的代码解析以前，先大白话说下整个过程，rollup.rollup()主要分为如下几步：webpack

配置收集、标准化
文件分析
源码编译，生成ast
模块生成
依赖解析
过滤净化
产出chunks

按照这个思路来看其实很简单，可是具体的细节倒是百般复杂的。不过咱们也没必要纠结于具体的某些实现，毕竟条条大路通罗马，咱们能够吸纳并改进或学习一些没见过的代码技巧或优化方法，在我看来，这才是良好的阅读源码的方式。:)git

注意点

全部的注释都在这里，可自行阅读github

!!!版本 => 笔者阅读的rollup版本为: 1.32.0web

!!!提示 => 标有TODO为具体实现细节，会视状况分析。api

!!!注意 => 每个子标题都是父标题(函数)内部实现数组

!!!强调 => rollup中模块(文件)的id就是文件地址，因此相似resolveID这种就是解析文件地址的意思，咱们能够返回咱们想返回的文件id(也就是地址，相对路径、决定路径)来让rollup加载promise

rollup是一个核心，只作最基础的事情，好比提供默认模块(文件)加载机制, 好比打包成不一样风格的内容，咱们的插件中提供了加载文件路径，解析文件内容(处理ts，sass等)等操做，是一种插拔式的设计，和webpack相似插拔式是一种很是灵活且可长期迭代更新的设计，这也是一个中大型框架的核心，人多力量大嘛~

主要通用模块以及含义

Graph: 全局惟一的图，包含入口以及各类依赖的相互关系，操做方法，缓存等。是rollup的核心
PathTracker: 无反作用模块依赖路径追踪
PluginDriver: 插件驱动器，调用插件和提供插件环境上下文等
FileEmitter: 资源操做器
GlobalScope: 全局做用局，相对的还有局部的
ModuleLoader: 模块加载器
NodeBase: ast各语法(ArrayExpression、AwaitExpression等)的构造基类

主流程解析

1.调用getInputOptions标准化input配置参数

const inputOptions = getInputOptions(rawInputOptions);
复制代码

1.1. 调用mergeOptions，设置默认的input和output配置，并返回input配置和使用非法配置属性的错误信息
```
let { inputOptions, optionError } = mergeOptions({
  config: rawInputOptions
});
复制代码
```
1.2. 调用options钩子函数，以在input配合彻底标准化以前进行自定义修改
```
inputOptions = inputOptions.plugins!.reduce(applyOptionHook, inputOptions);
复制代码
```
1.3. 标准化插件操做：为返回对象中没有name属性的插件设置默认的插件名 => at position 当前插件在全部插件中索引值
```
inputOptions.plugins = normalizePlugins(inputOptions.plugins!, ANONYMOUS_PLUGIN_PREFIX);
复制代码
```

1.4. 对不兼容内嵌动态引入模块或保留模块两种状况的配置，进行警告报错

// 将动态导入的依赖(import | require.ensure() | other)内嵌到一个chunk而不建立独立的包，相关的代码逻辑以下
if (inputOptions.inlineDynamicImports) {
  // preserveModules: 尽量的保留模块，而不是混合起来，建立更少的chunks，默认为false，不开启
  if (inputOptions.preserveModules) // 若是开启了，就与内嵌冲突了
    return error({
      code: 'INVALID_OPTION',
      message: `"preserveModules" does not support the "inlineDynamicImports" option.`
    });
  // 其余判断，具体参考代码仓库：index.ts
} else if (inputOptions.preserveModules) {
  // 又对 以原始文件命名，不综合打包 的功能进行排异处理
  if (inputOptions.manualChunks)
    return error({
      code: 'INVALID_OPTION',
      message: '"preserveModules" does not support the "manualChunks" option.'
    });
  // 其余判断，具体参考代码仓库：index.ts
}
复制代码

1.5. 返回处理后的input配置
```
return inputOptions;
复制代码
```

2.是否开启性能检测，检测inputOptions.perf属性，若是未设置没那么检测函数为空
```
initialiseTimers(inputOptions);
复制代码
```

3.建立图，参数为input配置和watch，watch当前不考虑

const graph = new Graph(inputOptions, curWatcher);
复制代码

3.1. 初始化警告函数，对已经提示过得警告进行缓存

this.onwarn = (options.onwarn as WarningHandler) || makeOnwarn();
复制代码

3.2. 给当前图挂载路径追踪系统，无构造函数，只有属性和更改属性的方法
```
this.deoptimizationTracker = new PathTracker();
复制代码
```
3.3. 初始化当前图的惟一模块缓存容器，能够将上个打包结果的cache属性赋给下一次打包，提高打包速度 =>
```
this.cachedModules = new Map();
复制代码
```

3.4. 读取传递的上次build结果中的模块和插件。插件缓存参考 =>，下文中解释。

if (options.cache) {
  if (options.cache.modules)
    for (const module of options.cache.modules) this.cachedModules.set(module.id, module);
}

if (options.cache !== false) {
  this.pluginCache = (options.cache && options.cache.plugins) || Object.create(null);

  for (const name in this.pluginCache) {
    const cache = this.pluginCache[name];
    for (const key of Object.keys(cache)) cache[key][0]++;
  }
}
复制代码

3.5. treeshake信息挂载。

if (options.treeshake !== false) {
  this.treeshakingOptions =
    options.treeshake && options.treeshake !== true
      ? {
          annotations: options.treeshake.annotations !== false,
          moduleSideEffects: options.treeshake.moduleSideEffects,
          propertyReadSideEffects: options.treeshake.propertyReadSideEffects !== false,
          pureExternalModules: options.treeshake.pureExternalModules,
          tryCatchDeoptimization: options.treeshake.tryCatchDeoptimization !== false,
          unknownGlobalSideEffects: options.treeshake.unknownGlobalSideEffects !== false
        }
      : {
          annotations: true,
          moduleSideEffects: true,
          propertyReadSideEffects: true,
          tryCatchDeoptimization: true,
          unknownGlobalSideEffects: true
        };
  if (typeof this.treeshakingOptions.pureExternalModules !== 'undefined') {
    this.warnDeprecation(
      `The "treeshake.pureExternalModules" option is deprecated. The "treeshake.moduleSideEffects" option should be used instead. "treeshake.pureExternalModules: true" is equivalent to "treeshake.moduleSideEffects: 'no-external'"`,
      false
    );
  }
}
复制代码

3.6. 初始化代码解析器，具体参数和插件参考Graph.ts

this.contextParse = (code: string, options: acorn.Options = {}) =>
  this.acornParser.parse(code, {
    ...defaultAcornOptions,
    ...options,
    ...this.acornOptions
  }) as any;
复制代码

3.7. 插件驱动器

this.pluginDriver = new PluginDriver(
  this,
  options.plugins!,
  this.pluginCache,
  // 处理软连文件的时候，是否觉得软连所在地址做为上下文，false为是，true为不是。
  options.preserveSymlinks === true,
  watcher
);
复制代码

3.7.1. 弃用api警告，参数挂载

3.7.2. 实例化FileEmitter而且将实例所携带方法设置到插件驱动器上

// basePluginDriver为PluginDriver的第六个参数，表明graph的'根'插件驱动器
this.fileEmitter = new FileEmitter(graph, basePluginDriver && basePluginDriver.fileEmitter);
this.emitFile = this.fileEmitter.emitFile;
this.getFileName = this.fileEmitter.getFileName;
this.finaliseAssets = this.fileEmitter.assertAssetsFinalized;
this.setOutputBundle = this.fileEmitter.setOutputBundle;
复制代码

3.7.3. 插件拼接

this.plugins = userPlugins.concat(
  basePluginDriver ? basePluginDriver.plugins : [getRollupDefaultPlugin(preserveSymlinks)] 
);
复制代码

3.7.4. 缓存插件们的上下文环境，以后执行插件的的时候会经过index获取并注入到插件内

// 利用map给每一个插件注入plugin特有的context，并缓存
this.pluginContexts = this.plugins.map(
  getPluginContexts(pluginCache, graph, this.fileEmitter, watcher)
);
复制代码

3.7.5. input和output设置的插件冲突的时候，报错

if (basePluginDriver) {
  for (const plugin of userPlugins) {
    for (const hook of basePluginDriver.previousHooks) {
      if (hook in plugin) {
        graph.warn(errInputHookInOutputPlugin(plugin.name, hook));
      }
    }
  }
}
复制代码

3.8. 监听模式的设定

if (watcher) {
		const handleChange = (id: string) => this.pluginDriver.hookSeqSync('watchChange', [id]);
		watcher.on('change', handleChange);
		watcher.once('restart', () => {
			watcher.removeListener('change', handleChange);
		});
	}
复制代码

3.9. 全局上下文

this.scope = new GlobalScope();
复制代码

3.10. 设置模块的全局上下文，默认为false

this.context = String(options.context);

	// 用户是否自定义了上下文环境
	const optionsModuleContext = options.moduleContext;
	if (typeof optionsModuleContext === 'function') {
		this.getModuleContext = id => optionsModuleContext(id) || this.context;
	} else if (typeof optionsModuleContext === 'object') {
		const moduleContext = new Map();
		for (const key in optionsModuleContext) {
			moduleContext.set(resolve(key), optionsModuleContext[key]);
		}
		this.getModuleContext = id => moduleContext.get(id) || this.context;
	} else {
		this.getModuleContext = () => this.context;
	}
复制代码

3.11. 初始化moduleLoader，用于模块(文件)的解析和加载

// 模块(文件)解析加载，内部调用的resolveID和load等钩子，让使用者拥有更多的操做能力
this.moduleLoader = new ModuleLoader(
		this,
		this.moduleById,
		this.pluginDriver,
		options.external!,
		(typeof options.manualChunks === 'function' && options.manualChunks) as GetManualChunk | null,
		(this.treeshakingOptions ? this.treeshakingOptions.moduleSideEffects : null)!,
		(this.treeshakingOptions ? this.treeshakingOptions.pureExternalModules : false)!
	);
复制代码

4.执行buildStart钩子函数，打包获取chunks，以供后续生成和写入使用

try {
  	// buildStart钩子函数触发
  	await graph.pluginDriver.hookParallel('buildStart', [inputOptions]);
  	// 这一步经过id，深度分析拓扑关系，去除无用块，进而生成咱们的chunks
  
  // build的逻辑详见下文
  	chunks = await graph.build( // 这个chunks是闭包，因此generate和write能够用到
  		inputOptions.input as string | string[] | Record<string, string>,
  		inputOptions.manualChunks,
  		inputOptions.inlineDynamicImports!
  	);
  } catch (err) {
  	const watchFiles = Object.keys(graph.watchFiles);
  	if (watchFiles.length > 0) {
  		err.watchFiles = watchFiles;
  	}
  	await graph.pluginDriver.hookParallel('buildEnd', [err]);
  	throw err;
  }
复制代码

5.返回一个对象，包括缓存，监听文件和generate、write两个方法
```
return {
  cache,
  watchFiles,
  generate,
  write
}
复制代码
```

graph.build逻辑解析

build方法经过id，深度分析拓扑关系，去除无用块，进而生成咱们的chunks 接受三个参数：入口、提取公共块规则(manualChunks)、是否内嵌动态导入模块

build是很单一的方法，就是产出咱们的chunks。他返回一个promise对象供以后的使用。

return Promise.all([
    入口模块, // 代码为: this.moduleLoader.addEntryModules(normalizeEntryModules(entryModules), true)
    用户定义公共模块 // 这块没有返回值，只是将公共模块缓存到模块加载器上，处理结果由入口模块代理返回。巧妙的处理方式，一箭双雕
  ]).then((入口模块的返回) => {
    // 模块的依赖关系处理
    return chunks;
  });
复制代码

入口模块: this.moduleLoader.addEntryModules(normalizeEntryModules(entryModules), true)

normalizeEntryModules对入口进行标准化处理，返回统一的格式：

UnresolvedModule {
      fileName: string | null;
      id: string;
      name: string | null;
  }
复制代码

addEntryModules对模块进行加载、去重，再排序操做，最后返回模块，公共chunks。其中，在加载过程当中会将处理过的模块缓存到ModuleLoaders的modulesById(Map对象)上。部分代码以下:

// 模块加载部分
  private fetchModule(
    id: string,
    importer: string,
    moduleSideEffects: boolean,
    syntheticNamedExports: boolean,
    isEntry: boolean
  ): Promise<Module> {
    // 主流程以下:
    
    // 获取缓存，提高效率:
    const existingModule = this.modulesById.get(id);
    if (existingModule instanceof Module) {
      existingModule.isEntryPoint = existingModule.isEntryPoint || isEntry;
      return Promise.resolve(existingModule);
    }
    
    // 新建模块:
    const module: Module = new Module(
      this.graph,
      id,
      moduleSideEffects,
      syntheticNamedExports,
      isEntry
    );
    
    // 缓存，以备优化
    this.modulesById.set(id, module);
    
    // 为每个入库模块设置已监听
    this.graph.watchFiles[id] = true;
    
    // 调用用户定义的manualChunk方法，获取公共chunks别名，好比:
    // 好比 manualChunkAlias(id){
    // if (xxx) {
    // return 'vendor';
    // }
    // }
    const manualChunkAlias = this.getManualChunk(id);
    
    // 缓存到 manualChunkModules
    if (typeof manualChunkAlias === 'string') {
      this.addModuleToManualChunk(manualChunkAlias, module);
    }
    
    // 调用load钩子函数并返回处理结果，其中第二个数组参数为传到钩子函数的的参数
    return Promise.resolve(this.pluginDriver.hookFirst('load', [id]))
      .cache()
      .then(source => {
        // 统一格式: sourceDescription
        return {
          code: souce,
          // ...
        }
      })
      .then(sourceDescription => {
        // 返回钩子函数transform处理后的代码，好比jsx解析结果，ts解析结果
        // 参考: https://github.com/rollup/plugins/blob/e7a9e4a516d398cbbd1fa2b605610517d9161525/packages/wasm/src/index.js
        return transform(this.graph, sourceDescription, module);
      })
      .then(source => {
        // 代码编译结果挂在到当前解析的入口模块上
        module.setSource(source);
        // 模块id与模块绑定
        this.modulesById.set(id, module);
        // 处理模块的依赖们，将导出的模块也挂载到module上
        // !!! 注意: fetchAllDependencies中建立的模块是经过ExternalModule类建立的，有别的入口模块的
        return this.fetchAllDependencies(module).then(() => {
          for (const name in module.exports) {
            if (name !== 'default') {
              module.exportsAll[name] = module.id;
            }
          }
          for (const source of module.exportAllSources) {
            const id = module.resolvedIds[source].id;
            const exportAllModule = this.modulesById.get(id);
            if (exportAllModule instanceof ExternalModule) continue;

            for (const name in exportAllModule!.exportsAll) {
              if (name in module.exportsAll) {
                this.graph.warn(errNamespaceConflict(name, module, exportAllModule!));
              } else {
                module.exportsAll[name] = exportAllModule!.exportsAll[name];
              }
            }
          }
        // 返回这些处理后的module对象，从id(文件路径) 转换到 一个近乎具备文件完整信息的对象。
        return module;
      })
    
  }
复制代码

// 去重
  let moduleIndex = firstEntryModuleIndex;
		for (const entryModule of entryModules) {
			// 是否为用户定义，默认是
			entryModule.isUserDefinedEntryPoint = entryModule.isUserDefinedEntryPoint || isUserDefined;
			const existingIndexModule = this.indexedEntryModules.find(
				indexedModule => indexedModule.module.id === entryModule.id
			);
			// 根据moduleIndex进行入口去重
			if (!existingIndexModule) {
				this.indexedEntryModules.push({ module: entryModule, index: moduleIndex });
			} else {
				existingIndexModule.index = Math.min(existingIndexModule.index, moduleIndex);
			}
			moduleIndex++;
		}
  // 排序
  this.indexedEntryModules.sort(({ index: indexA }, { index: indexB }) =>
			indexA > indexB ? 1 : -1
		);
复制代码

模块的依赖关系处理部分

已经加载处理过的模块会缓存到moduleById上，因此直接遍历之，再根据所属模块类进行分类

// moduleById是 id => module 的存储， 是全部合法的入口模块
		for (const module of this.moduleById.values()) {
			if (module instanceof Module) {
				this.modules.push(module);
			} else {
				this.externalModules.push(module);
			}
		}
复制代码

获取全部入口，找到正确的、移除无用的依赖，并过滤出真正做为入口的模块

// this.link(entryModules)方法的内部
  
  // 找到全部的依赖
  for (const module of this.modules) {
    module.linkDependencies();
  }
  
  // 返回全部的入口启动模块(也就是非外部模块)，和那些依赖了一圈结果成死循环的模块相对路径
  const { orderedModules, cyclePaths } = analyseModuleExecution(entryModules);
  
  // 对那些死循环路径进行警告
  for (const cyclePath of cyclePaths) {
    this.warn({
      code: 'CIRCULAR_DEPENDENCY',
      cycle: cyclePath,
      importer: cyclePath[0],
      message: `Circular dependency: ${cyclePath.join(' -> ')}`
    });
  }
  
  // 过滤出真正的入口启动模块，赋值给modules
  this.modules = orderedModules;
  
  // ast语法的进一步解析
  // TODO: 视状况详细补充
  for (const module of this.modules) {
    module.bindReferences();
  }
  
复制代码

剩余部分

// 引入全部的导出，设定相关关系
  // TODO: 视状况详细补充
    for (const module of entryModules) {
			module.includeAllExports();
		}
  
  // 根据用户的treeshaking配置，给引入的环境设置上下文环境
		this.includeMarked(this.modules);
  
		// 检查全部没使用的模块，进行提示警告
		for (const externalModule of this.externalModules) externalModule.warnUnusedImports();
  
  // 给每一个入口模块添加hash，以备后续整合到一个chunk里
  if (!this.preserveModules && !inlineDynamicImports) {
			assignChunkColouringHashes(entryModules, manualChunkModulesByAlias);
		}
  
  let chunks: Chunk[] = [];
  
  // 为每一个模块都建立chunk
		if (this.preserveModules) {
			// 遍历入口模块
			for (const module of this.modules) {
				// 新建chunk实例对象
				const chunk = new Chunk(this, [module]);
				// 是入口模块，而且非空
				if (module.isEntryPoint || !chunk.isEmpty) {
					chunk.entryModules = [module];
				}
				chunks.push(chunk);
			}
		} else {
			// 建立尽量少的chunk
			const chunkModules: { [entryHashSum: string]: Module[] } = {};
			for (const module of this.modules) {
				// 将以前设置的hash值转换为string
				const entryPointsHashStr = Uint8ArrayToHexString(module.entryPointsHash);
				const curChunk = chunkModules[entryPointsHashStr];
				// 有的话，添加module，没有的话建立并添加，相同的hash值会添加到一块儿
				if (curChunk) {
					curChunk.push(module);
				} else {
					chunkModules[entryPointsHashStr] = [module];
				}
			}

			// 将同一hash值的chunks们排序后，添加到chunks中
			for (const entryHashSum in chunkModules) {
				const chunkModulesOrdered = chunkModules[entryHashSum];
				// 根据以前的设定的index排序，这个应该表明引入的顺序，或者执行的前后顺序
				sortByExecutionOrder(chunkModulesOrdered);
				// 用排序后的chunkModulesOrdered新建chunk
				const chunk = new Chunk(this, chunkModulesOrdered);
				chunks.push(chunk);
			}
		}
  
  // 将依赖挂载到每一个chunk上
		for (const chunk of chunks) {
			chunk.link();
		}
复制代码

以上就是rollup.rollup的主流程分析，具体细节参考代码库注释

部分功能的具体解析

插件缓存能力解析，为开发者们提供了插件上的缓存能力，利用cacheKey能够共享相同插件的不一样实例间的数据

function createPluginCache(cache: SerializablePluginCache): PluginCache {
	// 利用闭包将cache缓存
	return {
		has(id: string) {
			const item = cache[id];
			if (!item) return false;
			item[0] = 0; // 若是访问了，那么重置访问过时次数，猜想：就是说明用户有意向主动去使用
			return true;
		},
		get(id: string) {
			const item = cache[id];
			if (!item) return undefined;
			item[0] = 0; // 若是访问了，那么重置访问过时次数
			return item[1];
		},
		set(id: string, value: any) {
			cache[id] = [0, value];
		},
		delete(id: string) {
			return delete cache[id];
		}
	};
}
复制代码

能够看到rollup利用对象加数组的结构来为插件提供缓存能力，即:

{
  test: [0, '内容']
}
复制代码

数组的第一项是当前访问的计数器，和缓存的过时次数挂钩，再加上js的闭包能力简单实用的提供了插件上的缓存能力

总结

到目前为止，再一次加深了职能单一和依赖注入重要性，好比模块加载器，插件驱动器，还有Graph。还有rollup的(数据)模块化，webpack也相似，vue也相似，都是将具象的内容转换为抽象的数据，再不断挂载相关的依赖的其余抽象数据，固然这其中须要符合某些规范，好比estree规范。

鄙人一直对构建很感兴趣，个人github有接近一半都是和构建有关的，因此此次从rollup入口，开始揭开构建世界的那一层层雾霾，还咱们一个清晰地世界。:)

rollup系列不会参考别人的分享(目前也没找到有人分析rollup。。)，彻底自食其力一行一行的阅读，因此不免会有些地方不是很正确。没办法，阅读别人的代码，有些地方就像猜女人的心思，太tm难了，因此有不对的地方但愿大佬们多多指点，互相学习。

仍是那句话，创做不易，但愿获得你们的支持，与君共勉，我们下期见！