zhao333 v1.0.0

要使用 Rollup 打包一个插件，支持 Node.js、ES6 和通过 script 标签使用，并设置一个统一入口文件来实现按照使用环境动态加载打包的文件，可以按照以下步骤进行：

1. 创建项目结构

确保项目结构如下：

my-plugin/
├── dist/
├── src/
│   ├── index.js
│   └── plugin.js
├── .babelrc
├── package.json
├── rollup.config.js
├── index.js
└── README.md

2. 编写插件代码

src/plugin.js：

export function myPlugin() {
  return 'Hello from myPlugin!';
}

src/index.js：

import { myPlugin } from './plugin';

export { myPlugin };

3. 配置 Babel

创建 .babelrc 文件，配置 Babel：

{
  "presets": [
    "@babel/preset-env"
  ]
}

4. 配置 Rollup

创建 rollup.config.js 文件：

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import babel from '@rollup/plugin-babel';
import { terser } from '@rollup/plugin-terser';

const env = process.env.BUILD_ENV;

const config = {
  input: 'src/index.js',
  plugins: [
    resolve(),
    commonjs(),
    babel({
      babelHelpers: 'bundled',
      exclude: 'node_modules/**'
    })
  ]
};

switch (env) {
  case 'cjs':
    config.output = {
      file: 'dist/my-plugin.cjs.js',
      format: 'cjs',
      sourcemap: true
    };
    break;
  case 'esm':
    config.output = {
      file: 'dist/my-plugin.esm.js',
      format: 'esm',
      sourcemap: true
    };
    break;
  case 'umd':
    config.output = [
      {
        file: 'dist/my-plugin.umd.js',
        format: 'umd',
        name: 'MyPlugin',
        sourcemap: true
      },
      {
        file: 'dist/my-plugin.umd.min.js',
        format: 'umd',
        name: 'MyPlugin',
        plugins: [terser()],
        sourcemap: true
      }
    ];
    break;
  case 'iife':
    config.output = [
      {
        file: 'dist/my-plugin.iife.js',
        format: 'iife',
        name: 'MyPlugin',
        sourcemap: true
      },
      {
        file: 'dist/my-plugin.iife.min.js',
        format: 'iife',
        name: 'MyPlugin',
        plugins: [terser()],
        sourcemap: true
      }
    ];
    break;
  default:
    throw new Error('No matching format found. Please specify BUILD_ENV variable.');
}

export default config;

5. 配置 package.json

确保 package.json 中有必要的字段和脚本：

{
  "name": "my-plugin",
  "version": "1.0.0",
  "description": "A plugin that provides myPlugin function",
  "main": "dist/my-plugin.cjs.js",
  "module": "dist/my-plugin.esm.js",
  "browser": "dist/my-plugin.umd.js",
  "scripts": {
    "build:cjs": "BUILD_ENV=cjs rollup -c",
    "build:esm": "BUILD_ENV=esm rollup -c",
    "build:umd": "BUILD_ENV=umd rollup -c",
    "build:iife": "BUILD_ENV=iife rollup -c",
    "build": "npm run build:cjs && npm run build:esm && npm run build:umd && npm run build:iife"
  },
  "keywords": [
    "plugin",
    "example"
  ],
  "author": "Your Name",
  "license": "MIT",
  "devDependencies": {
    "@babel/preset-env": "^7.0.0",
    "@rollup/plugin-babel": "^5.0.0",
    "@rollup/plugin-commonjs": "^15.0.0",
    "@rollup/plugin-node-resolve": "^9.0.0",
    "@rollup/plugin-terser": "^7.0.0",
    "rollup": "^2.0.0"
  }
}

6. 创建统一入口文件

在项目根目录下创建统一入口文件 index.js：

(function(global, factory) {
  if (typeof module === "object" && typeof module.exports === "object") {
    // Node.js 环境 (CommonJS)
    module.exports = factory(require('./dist/my-plugin.cjs.js'));
  } else if (typeof define === "function" && define.amd) {
    // AMD 模块环境
    define(['./dist/my-plugin.esm.js'], factory);
  } else {
    // 浏览器环境
    global.MyPlugin = factory(global.MyPlugin);
  }
})(typeof window !== "undefined" ? window : this, function(library) {
  return library;
});

7. 编写 README 文件

创建 README.md 文件，提供包的基本信息和使用说明：

# My Plugin

A plugin that provides `myPlugin` function.

## Installation

```bash
npm install my-plugin

Usage

CommonJS

const { myPlugin } = require('my-plugin');
console.log(myPlugin());

ES Module

import { myPlugin } from 'my-plugin';
console.log(myPlugin());

Browser

Include the script in your HTML:

<script src="node_modules/my-plugin/dist/my-plugin.iife.js"></script>
<script>
  console.log(MyPlugin.myPlugin());
</script>

### 8. 打包

运行以下命令来生成所有格式的打包文件：

```bash
npm run build

9. 发布到 npm

确保你已经登录到 npm：

npm login

然后发布包：

npm publish

10. 测试发布的包

创建一个新的测试项目来安装和使用你的包：

mkdir test-my-plugin
cd test-my-plugin
npm init -y
npm install my-plugin

创建一个 index.js 文件来测试你的包：

// CommonJS 导入方式
const { myPlugin } = require('my-plugin');
console.log(myPlugin());

或者，如果你使用 ES Module：

// ES Module 导入方式
import { myPlugin } from 'my-plugin';
console.log(myPlugin());

在浏览器环境中测试：

创建一个简单的 HTML 文件：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Test My Plugin</title>
</head>
<body>
  <script src="node_modules/my-plugin/dist/my-plugin.iife.js"></script>
  <script>
    console.log(MyPlugin.myPlugin());
  </script>
</body>
</html>

使用静态服务器（如 http-server）来测试这个 HTML 文件：

npm install -g http-server
http-server

然后访问 http://localhost:8080 并查看控制台输出。

总结

通过上述步骤，你可以使用 Rollup 打包一个支持 Node.js、ES6 和通过 script 标签使用的插件，并通过统一入口文件根据运行环境动态加载打包文件。这种方法确保你的插件在不同的环境下都能正常工作，从而提高兼容性和使用方便性。