Rollup插件（第一部分）

2021-06-23

前言

本文翻译自rollup.js。

一个Rollup插件是一个导出了一个函数的包，这个函数返回了一个对象，这个对象中有下面介绍的属性和钩子,这些属性和钩子遵循特定的规范。

一个简单的例子

下面的这个插件将会拦截导入的”virtual-module”模块，它甚至可以用来替换”virtual-module”模块在所有的入口点中的替换成的结果，如下所示

rollup-plugin-my-example.js

export default function myExample () {
    return {
        name: 'my-example', // 这个名字将会出现在在警告和报错中
        resolveId ( importee ) {
            if (importee === 'virtual-module') {
                return importee; // 这个告诉rollup不应该通过其他的插件或者检查文件系统去寻找这个id
            }
            return null; // 其他的id不受影响
        },
        load ( id ) {
            if (id === 'virtual-module') {
                return 'export default "This is virtual!"'; // "virtual-module"的源码
            }
            return null; // 其他的id还是通过正常的方式解析
        }
    };
}

rollup.config.js

import myExample from './rollup-plugin-my-example.js';
export default ({
    input: 'virtual-module', // 将会被插件处理
    plugins: [myExample()],
    output: [{
        file: 'bundle.js',
        format: 'esm'
    }]
});

规范

1.插件要有一个以rollup-plugin-开头的名字。
2.在package.json设置keyword为rollup-plugin。
3.插件应该被测试，我们推荐开箱即用的mocha 或者 ava 。
4.尽可能使用异步的方法。
5.用英文描述自己的插件。
6.如果可以，请确保你的插件输出正确的代码映射。
7.如果你的插件使用了 'virtual modules' (e.g. for helper functions), 在module ID 之前加上\0.这可以防止其他的插件试图执行它。

属性

name
类型: String
插件的名称, 在错误提示和警告消息中会用到。

钩子

类型: String|Function

一个字符串或者一个返回字符串或Promise的函数。参考 output.banner/output.footer.

buildEnd

类型: Function
形式: ( error ) => void

在rollup完成bundling之后，执行generate或者write之前被调用。你也可以返回一个Promise。如果在build的时候发生错误, 错误将会被传递到这个钩子.

buildStart

类型: Function
形式: ( ) => (void|Promise)

在每个rollup.rollup build之前被调用。

foote r (空格删除)

类型: String|Function

一个字符串或者一个返回字符串或Promise的函数。参考 output.banner/output.footer.

generateBundle

类型: Function
形式: ( outputOptions, bundle, isWrite ) => (void|Promise)

在bundle.generate() 或者 bundle.write()之后被调用。bundle提供了正在编写或生成的文件的完整列表及其详细信息。

intro

类型: String|Function

一个字符串或者一个返回字符串或Promise的函数。参考 output.intro/output.outro.

load

类型: Function
形式: ( id ) => (code | { code, map } | Promise)

自定义一个loader。如果返回null则将取决于其他load函数（最终取决于文件系统默认的加载的行为）。

options

类型: Function
形式: ( inputOptions ) => options

读取并替换或操作传递给rollup.rollup的options对象。返回null不会替换任何内容。

outro

类型: String|Function

一个字符串或者一个返回字符串或Promise的函数。参考 output.intro/output.outro.

renderChunk

类型: Function
形式: (code, { modules, exports, imports, fileName, isEntry }, outputOptions) => (code | { code, map} | Promise)

可以被用来改变每个chunk。为每个Rollup输出的chunk调用。返回null 将不会发生任何改变。

renderError

类型: Function
形式: ( error ) => void

在执行bundle.generate()或者bundle.write()的时候如果发生错误就会被调用。这个错误会被传入这个钩子。如果要在generation成功完成的时候得到通知, 可以使用generateBundle钩子。

renderStart

类型: Function
形式: ( ) => (void|Promise)

在每次bundle.generate()或者bundle.write() 执行的初始阶段被调用。如果要在generation之后得到通知, 可以使用generateBundle钩子或者renderError钩子。

resolveId

类型: Function
形式: ( importee, importer ) => (id|Promise)

自定义一个解析器。解析器加载程序在定位第三方依赖项时非常有用。如果返回null或undefined，则将取决于其他resolveId函数(最终取决于默认的解析方式);返回false表示importee应被视为外部模块而不包括在bundle中。

transform

类型: Function
形式: ( source, id ) => (code|{ code, map, dependencies }|Promise)

可以被用来改变每个模块。在--watch模式中, 会监听dependencies数组中所有文件或者目录的变化。

watchChange

类型: Function
形式: (file) => { }

在--watch模式下，每当受监控的文件发生更改时，都会通知插件。

废弃的

☢️ 这些钩子已经被废弃，并且可能会在未来版本的Rollup中被移除。

ongenerate -改为generateBundle - 这个钩子将会在bundle.generate()被执行的时候被调用。
onwrite - 改为generateBundle - 这个钩子将会在bundle.write()被执行、文件被写到硬盘中之后被调用。
transformBundle – 改为renderChunk - 一个形如( source, { format } ) => code or ( source, { format } ) => { code, map } bundle变换方法。
transformChunk – 改为renderChunk - 一个形如( source, outputOptions, chunk ) => code | { code, map}chunk变换方法。

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