使用rollup将es、cjs模块代码编译成umd模块

Rollup 是一个 JavaScript 模块打包器，专注于打包 ES6 模块以生成更小、更高效的代码。要使用 Rollup 将 ES 或 CJS 模块代码编译成 UMD（Universal Module Definition）模块，你需要首先安装 Rollup 和可能需要的插件。

以下是一个基本的步骤指南：

1. 安装 Rollup

在你的项目根目录下，通过 npm 安装 Rollup 和它的 CLI 工具：

npm install @rollup/plugin-node-resolve @rollup/plugin-commonjs -D

这里还安装了 @rollup/plugin-node-resolve 和 @rollup/plugin-commonjs，前者用于解析外部模块，后者用于将 CommonJS 模块转换为 ES6，以便 Rollup 可以处理它们。

2. 创建 Rollup 配置文件

在项目的根目录下创建一个 rollup.config.js 文件，并添加以下配置：

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';

export default {
  input: 'src/main.js', // 你的入口文件路径
  output: {
    file: 'dist/bundle.js', // 输出的 UMD 文件的路径
    format: 'umd', // 输出格式为 UMD
    name: 'MyLibrary', // UMD 的全局变量名（可选）
    globals: { // 如果你有外部依赖，并且你想在 UMD 中引用它们而不是包含它们，可以在这里定义
      // 'jquery': 'jQuery'
    },
    // 其他 Rollup 输出选项...
  },
  plugins: [
    resolve(), // 告诉 Rollup 如何查找外部模块
    commonjs() // 将 CommonJS 转换为 ES6，以便 Rollup 可以处理
    // ...其他插件
  ],
  // 其他 Rollup 选项...
};

3. 编写你的代码

在你的 src/main.js 文件中，你可以编写 ES6 或 CommonJS 代码。Rollup 将处理它们并生成一个 UMD 模块。

4. 运行 Rollup

在 package.json 文件的 scripts 部分添加一个命令来运行 Rollup：

{
  "scripts": {
    "build": "rollup -c" // 使用你的 Rollup 配置文件进行构建
  },
  // ...其他配置
}

然后，你可以通过运行 npm run build 来构建你的项目。Rollup 将读取你的配置文件，处理你的代码，并生成一个 UMD 模块到指定的输出文件。