func-package

函数库, 面向复杂业务场景的 js 类库

Rollup.js插件开发

前言

相比webpack来说rollup.js的编译生态没有那么丰富，有些时候如果没有合适自己需求的编译插件，就需要自己去开发rollup.js的插件，好在rollup.js的插件开发比较简单，本篇主要讲述最简单的插件开发。

实现例子

  • 将源文件的hello world 字符串全部编译成 i am rollup.js

demo例子

https://github.com/chenshenhai/rollupjs-note/blob/master/demo/chapter-05-01/

npm i


## 开发模式
npm run dev


## 生产模式
npm run build

实现步骤

步骤1: 目录和准备

.
├── build ## 编译脚本
│   ├── rollup.config.dev.js
│   ├── rollup.config.js
│   └── rollup.config.prod.js
├── dist ## 编译结果
│   ├── index.js
│   └── index.js.map
├── example
│   └── index.html
├── package.json
├── plugin ## 自定义rollup.js插件
│   └── rollup-plugin-helloworld.js
└── src ## 待编译源文件
    ├── index.js
    └── lib
        └── demo.js

安装对应编译的npm模块

## 安装 rollup.js 基础模块
npm i --save-dev rollup 


## 安装 rollup.js 插件开发工具模块
npm i --save-dev @rollup/pluginutils


## 安装 sourcemap 处理模块
npm i --save-dev magic-string


## 安装 rollup.js 编译本地开发服务插件 模块
npm i --save-dev rollup-plugin-serve


## 安装 rollup.js 编译ES6代码基础插件 模块
npm i --save-dev @rollup/plugin-buble


## 安装 rollup.js 编译代码混淆插件 模块
npm i --save-dev rollup-plugin-uglify

步骤2: rollup配置

  • 编译基本配置 ./build/rollup.config.js
const path = require('path');
const buble = require('@rollup/plugin-buble'); 
const helloworld = require('./../plugin/rollup-plugin-helloworld');
const resolveFile = function(filePath) {
  return path.join(__dirname, '..', filePath)
}


module.exports = [
  {
    input: resolveFile('src/index.js'),
    output: {
      file: resolveFile('dist/index.js'),
      format: 'iife',
    }, 
    plugins: [
      buble(),
      helloworld({
        sourcemap: process.env.NODE_ENV === 'development',
      }),
    ],
  },
]
  • 开发模式配置基本 ./build/rollup.config.dev.js
process.env.NODE_ENV = 'development';


const path = require('path');
const serve = require('rollup-plugin-serve');
const configList = require('./rollup.config');


const resolveFile = function(filePath) {
  return path.join(__dirname, '..', filePath)
}
const PORT = 3000;


const devSite = `http://127.0.0.1:${PORT}`;
const devPath = path.join('example', 'index.html');
const devUrl = `${devSite}/${devPath}`;


setTimeout(()=>{
  console.log(`[dev]: ${devUrl}`)
}, 1000);


configList.map((config, index) => {


  config.output.sourcemap = true;


  if( index === 0 ) {
    config.plugins = [
      ...config.plugins,
      ...[
        serve({
          port: PORT,
          contentBase: [resolveFile('')]
        })
      ]
    ]
  }
  
  return config;
})




module.exports = configList;
  • 生产模式配置基本 ./build/rollup.config.prod.js
process.env.NODE_ENV = 'production';


const { uglify } = require('rollup-plugin-uglify');
const configList = require('./rollup.config');


const resolveFile = function(filePath) {
  return path.join(__dirname, '..', filePath)
}


configList.map((config, index) => {


  config.output.sourcemap = false;
  config.plugins = [
    ...config.plugins,
    ...[
      uglify()
    ]
  ]


  return config;
})


module.exports = configList;
  • 在./package.json配置编译执行脚本
{
  "scripts": {
    "build": "node_modules/.bin/rollup -c ./build/rollup.config.prod.js",
    "dev": "node_modules/.bin/rollup -w -c ./build/rollup.config.dev.js"
  },
}

步骤3: 扩展的rollup.js插件开发

  • 源码路径 ./plugin/rollup-plugin-helloworld.js
const extname = require("path").extname;
const { createFilter } = require('@rollup/pluginutils');
const MagicString = require('magic-string');


const newStr = 'I am rollup.js!';


module.exports = function helloworld (options = {}) {
  const filter = createFilter(options.include, options.exclude);
  const sourcemap = options.sourcemap === true;


	return {
		name: 'helloworld',


		transform (code, id) {
      if (!filter(id) || extname(id) !== ".js") return;


      let codeStr = `${code}`;
      const magic = new MagicString(codeStr);
      if (sourcemap === true) {
        codeStr = codeStr.replace(/hello\sworld/ig, function(match, offset) {
          const start = offset;
          const end = offset + match.length;
          magic.overwrite(start, end, newStr);
          return newStr;
        });
      }
      
      const resultCode = magic.toString();
      let resultMap = false;
      if (sourcemap === true) {
        resultMap = magic.generateMap({
          hires: true,
        });
      }
			return {
				code: resultCode,
				map: resultMap,
      };
    }
    
	};
}

步骤4: 待编译ES6源码

  • 源码内容 ./src/index.js
import demo from './lib/demo';


const arr1 = [1,2,3];
const arr2 = [4,5,6];
console.log([...arr1, ...arr2]);


demo.init();
  • 源码内容 ./src/lib/demo.js
const demo = {
  init() {
    console.log('[001]: hello world!');
    console.log('[002]: hello world!');
    console.log('[003]: hello world!');
  }
}


export default demo;

步骤5: 编译结果

  • 在项目目录下执行 开发模式 npm run dev
  • 编译结果在目录 ./dist/ 下
  • 编译成ES5结果为
(function () {
  'use strict';


  var demo = {
    init: function init() {
      console.log('[001]: I am rollup.js!!');
      console.log('[002]: I am rollup.js!!');
      console.log('[003]: I am rollup.js!!');
    }
  };


  var arr1 = [1,2,3];
  var arr2 = [4,5,6];
  console.log(arr1.concat( arr2));


  demo.init();


}());
//# sourceMappingURL=index.js.map

步骤6: 浏览器查看结果

  • example目录./example/index.html
<html>
  <head></head>
  <body>
    <p>hello world</p>
    <script src="./../dist/index.js"></script>
  </body>
</html>
[1, 2, 3, 4, 5, 6]
[001]: I am rollup.js!!
[002]: I am rollup.js!!
[003]: I am rollup.js!!
>
  • 打断点调试

会发现sourcemap源码是显示 “hello world”，但是被./plugin/rollup-plugin-hellowold插件编译成I am rollup.js!!。

执行的代码是编译后的，但是断点的是sourcemap源码。

wx-0001
2024/10/7 23:51:34