分分钟写一个 rollup 小插件

发表于 | 分类于 | 评论数：

rollup，别问我这是什么鬼，自己去百度不会。// 强行单押
rollup，真的好用到飞，打包es6模块必备。// 单押x4

勒是雾都！

前话

其实不用去对比 rollup webpack parcel 谁更好，谁更强。
所在次元不同，何必呢，大家都可以好好相处的。

我喜欢用 rollup 打包模块，因为他专注于 es6 模块打包。
真的好用到哭，打包完的代码非常完美，干净简洁，整体性强，是可读级别的。
大名鼎鼎的 react, vue 就是 rollup 打包的。

可见对于模块打包 rollup 确实是有优势。

起因

为什么我要去开发个插件呢？
因为遇到坑，没合适的插件啊。。

虽然百度 “rollup 插件开发” 一篇文章都没有，但也没关系。

打开 https://github.com/rollup/rollup/wiki/Plugins 插件列表，随便找个你感兴趣的插件，看下源代码。
有不少插件都是几十行，不超过100行的。

就拿最常用的 uglify 插件来说 https://github.com/TrySound/rollup-plugin-uglify/blob/master/index.js
源代码就 22 行，简单对 uglify 模块封装下即可。

插件开发

我们来开发一个对打包后的代码进行关键词替换的插件，因为我遇到了这的需求。
官网插件中只有对 source 的替换没有对 bundle 的替换，难道就没人对 bundle 做处理么？

直接上代码：

1
2
3
4
5
6
7
8
{
  name: 'replace',
  transformBundle(code) {
    return code
      .replace('关键词', '替换内容')
      .replace(/正则/, '替换内容');
  },
}

你没看错，就这么简单，放到 plugins: [] 数组末尾即可。
差不多就是下面这个样子。

1
2
3
4
5
6
7
8
9
10
11
12
plugins: [
  babel(),
  uglify(),
  {
    name: 'replace',
    transformBundle(code) {
      return code
        .replace('关键词', '替换内容')
        .replace(/正则/, '替换内容');
    },
  },
],

当然你写成插件，像 babel uglify 插件一样调用也可以。

以后遇到简单需求，分分钟就写一个插件搞定，是不是很爽，而且逼格满满。

插件开发文档

也许你不知道 transformBundle 是什么意思，为什么用 transformBundle 函数处理。
这就要看官方给的文档了 https://github.com/rollup/rollup/wiki/Plugins#creating-plugins.

从文档中的 transformBundle 描述看，是对 bundle 的转换函数。
bundle 是一个打包好的模块，不是零散的文件代码。

在 transform 中则是对源代码镜像处理，是模块转换函数。
所以在合适的时机做合适的处理即可。

下面也有些例子，这里就不翻译了。

小结

标题中说的“小插件”是因为只介绍了表面内容，做些简单处理还是蛮方便的。
剩下的内容，自己去挖掘吧。