Rollup插件（第二部分）

2021-06-23

前言

本文翻译自rollup.js。

插件上下文

很多的实用的函数和信息流可以通过this在所有的hooks中流通。

1	this.emitAsset(assetName: string, source: string) => void

发出要包含在构建输出中的自定义文件并返回其assetId。如果稍后通过this.setAssetSource(assetId)提供源代码，那么可以推迟设置源代码。必须通过方法为每个文件设置字符串或buffer的源码，否则在生成完成时将抛出错误

1	this.error(error: string \| Error, position?: number) => void

结构上等价于this.warn, 但是它还会终止打包过程。

1	this.getAssetFileName(assetId: string) => string

根据assetFileNames的output选项指定的模式获取文件名。

1	this.getModuleInfo(moduleId: string) => ModuleInfo

在表单中返回有关该模块的其他信息

{
  id, // 模块的id
  isExternal, // 是graph中未包含的外部模块
  importedIds // 该模块导入的模块id
}

如果找不到模块id，就会抛出错误。

1	this.isExternal(id: string, parentId: string, isResolved: boolean): boolean

1	this.meta: {rollupVersion: string}

包含潜在有用的Rollup元数据的对象。

1	this.moduleIds: IterableIterator<string>

一个 Iterator 用于访问当前图中的所有模块id。它可以通过

1	for (const moduleId of this.moduleIds) { /* ... */ }

或者通过Array.from(this.moduleIds)转成一个数组

1	this.parse(code: string, acornOptions: AcornOptions) => ESTree.Program

使用Rollup的内部acorn实例将代码解析为AST。

1	this.resolveId(importee: string, importer: string) => string

解析模块id(即文件名)的导入。使用与Rollup本身相同的钩子。

1	this.setAssetSource(assetId: string, source: string \| Buffer) => void

设置文件的源码

1	this.warn(warning: string \| RollupWarning, position?: number )

使用此方法将为构建生成警告队列。这些警告将由CLI打印出来，就像内部生成的警告(插件名称除外)，或者由定制的onwarn处理程序捕获。warning 参数可以是一个string 或者(至少) 有一个 message 属性的对象 :

1
2
3

this.warn( 'hmm...' );
// is equivalent to
this.warn({ message: 'hmm...' });

如果需要向警告对象添加其他属性，请使用第二种形式。Rollup将使用包含插件名称、代码(PLUGIN_WARNING)和id(被转换的文件)属性的 plugin 属性来扩展警告对象。

position参数是发出警告的字符索引。

如果存在，Rollup将使用pos, loc(标准的{ file, line, column }对象)和frame (显示错误的代码片段)来扩展警告对象。

文件URL

要从JS代码中引用文件URL，请使用import.meta.ROLLUP_ASSET_URL_[assetId]替换。下面的示例表示为模块导出一个CSS文件，该模块随后导出一个URL，该URL构造为正确地指向目标运行时环境中发出的文件。

load (id) {
  const assetId = this.emitAsset('style.css', fs.readFileSync(path.resolve(assets, 'style.css')));
  return `export default import.meta.ROLLUP_ASSET_URL_${assetId}`;
}

高级的Loader

load钩子可以选择返回一个{ code, ast }对象。ast必须是标准的ESTree ast。该语法树种的每个节点都有start和end属性。

Transformers

Transformer插件 (即那些返回一个transform函数的插件，例如转化非js文件)应该支持 options.include 和 options.exclude,两者都是最小匹配的块或者最小匹配组成的数组。如果options.include被省略了或者长度为0，文件应该按照默认情况include; 否则，只有当ID匹配其中一个匹配块时，它们才应该被包含。

transform 钩子如果返回一个对象, 也可以包含ast属性。只有在您知道自己在做什么时才使用此功能。请注意，只有transform链中的最后一个AST会被用到(如果存在transform, 那么load钩子生成的任何AST都将被已经transform的模块丢弃)

Transform的例子

(将rollup-pluginutils 用于通常需要的函数,并以推荐的方式实现transformer)

import { createFilter } from 'rollup-pluginutils';

export default function myPlugin ( options = {} ) {
  const filter = createFilter( options.include, options.exclude );

  return {
    transform ( code, id ) {
      if ( !filter( id ) ) return;

      // proceed with the transformation...
      return {
        code: generatedCode,
        map: generatedSourceMap
      };
    }
  };
}

源码的转化

1	sourcemap: falsemappings

如果插件转换源代码，它应该自动生成sourcemap，除非有一个特定的sourceMap: false选项。Rollup只关心mappings属性(其他一切都是自动处理的)。如果生成sourcemap(例如rollup-plugin-string)没有意义，则返回一个空的sourcemap:

return {
  code: transformedCode,
  map: { mappings: '' }
};

如果转换不移动代码，您可以通过返回null来保存现有的源代码:

return {
  code: transformedCode,
  map: null
};

如果你创建了一个你任务对别人有用的插件, 请将它发布到NPM并且提交到https://github.com/rollup/awesome

作者：yegao
链接：https://zhuanlan.zhihu.com/p/53843093
来源：知乎