解读 rollup Plugin （一）

这是我参与更文挑战的第 17 天，活动详情查看： 更文挑战

Lynne，一个能哭爱笑永远少女心的前端开发工程师。身处互联网浪潮之中，热爱生活与技术。

终于有时间对rollup plugin 下手了~~~

尽管对于rollup的插件编写，官网上对于插件的介绍几乎都是英文，学习起来不是很友好, 例子也相对较少，但目前针对 rollup插件的分析与开发指南的文章已经很多见，以关于官方英文文档的翻译与函数钩子的分析为主。

讲道理，稀里糊涂直接看源码分析只会分分钟劝退我，而我只想分分钟写个 rollup 插件而已~~

为了打卡，一篇文章要拆分了QAQ

理解 rollup plugin

引用官网的解释：

Rollup插件是一个具备下面描述的一个或多个属性、构建钩子和输出生成钩子的对象，它遵循咱们的约定。 一个插件应该做为一个包来分发，该包导出一个能够用插件特定选项调用的函数，并返回这样一个对象。 插件容许你定制Rollup的行为，例如，在捆绑以前编译代码，或者在你的node_modules文件夹中找到第三方模块。

简单来讲，rollup的插件是一个普通的函数，函数返回一个对象，该对象包含一些属性(如name)，和不一样阶段的钩子函数（构建build和输出output阶段），此处应该回顾下上面的流程图。

关于约定

• 插件应该有一个带有rollup-plugin-前缀的明确名称。
• 在package.json中包含rollup-plugin关键字。
• 插件应该支持测试，推荐 mocha 或者 ava 这类开箱支持 promises 的库。
• 尽量使用异步方法。
• 用英语记录你的插件。
• 确保你的插件输出正确的 sourcemap。
• 若是你的插件使用 'virtual modules'（好比帮助函数），给模块名加上 \0 前缀。这能够阻止其余插件执行它。

分分钟写个 rollup 插件

为了保持学习下去的热情与动力，先举个栗子压压惊，若是看到插件实现的各类源码函数钩子部分以为脑子不清醒了，欢迎随时回来从新看这一小节，重拾勇气与信心！

插件其实很简单

能够打开rollup 插件列表，随便找个你感兴趣的插件，看下源代码。

有很多插件都是几十行，不超过100行的。好比图片文件多格式支持插件@rollup/plugin-image的代码甚至不超过50行，而将json文件转换为ES6模块的插件@rollup/plugin-json源代码更少。

一个例子

// 官网的一个例子
export default function myExample () {
  return {
    name: 'my-example', // 名字用来展现在警告和报错中
    resolveId ( source ) {
      if (source === 'virtual-module') {
        return source; // rollup 不该该查询其余插件或文件系统
      }
      return null; // other ids 正常处理
    },
    load ( id ) {
      if (id === 'virtual-module') {
        return 'export default "This is virtual!"'; // source code for "virtual-module"
      }
      return null; // other ids
    }
  };
}

// rollup.config.js
import myExample from './rollup-plugin-my-example.js';
export default ({
  input: 'virtual-module', // 经过上述插件处理
  plugins: [myExample()],
  output: [{
    file: 'bundle.js',
    format: 'es'
  }]
});
复制代码

光看不练假把式，模仿写一个：

// 本身编的一个例子QAQ
export default function bundleReplace () {
  return {
    name: 'bundle-replace', // 名字用来展现在警告和报错中
    transformBundle(bundle) {
      return bundle
        .replace('关键词', '替换内容')
        .replace(/正则/, '替换内容');
    },
  };
}

// rollup.config.js
import bundleReplace from './rollup-plugin-bundle-replace.js';
export default ({
  input: 'src/main.js', // 通用入口文件
  plugins: [bundleReplace()],
  output: [{
    file: 'bundle.js',
    format: 'es'
  }]
});
复制代码

嘿！这也不难嘛~~~