rollup-plugin-multi-input 项目使用教程

rollup-plugin-multi-input 项目使用教程

rollup-plugin-multi-inputA Rollup plugin to bundle modular libraries项目地址:https://gitcode.com/gh_mirrors/ro/rollup-plugin-multi-input

1. 项目目录结构及介绍

rollup-plugin-multi-input/
├── src/
│   ├── index.js
│   └── ...
├── test/
│   ├── test.js
│   └── ...
├── package.json
├── rollup.config.mjs
└── README.md

• src/: 存放项目的源代码文件，包括插件的主要逻辑。
• test/: 存放项目的测试文件，用于测试插件的功能。
• package.json: 项目的元数据文件，包含依赖、脚本等信息。
• rollup.config.mjs: 项目的 Rollup 配置文件，定义了打包的规则和插件的使用。
• README.md: 项目的说明文档，通常包含项目的介绍、安装和使用方法。

2. 项目的启动文件介绍

项目的启动文件通常是 src/index.js，这是插件的入口文件。它定义了插件的主要功能和导出内容。以下是一个简化的示例：

// src/index.js
import { createRequire } from 'node:module';
import multiInput from 'rollup-plugin-multi-input';

const require = createRequire(import.meta.url);
const packageJson = require('./package.json');

export default {
  input: ['src/**/*.js'],
  external: Object.keys(packageJson.dependencies),
  output: [
    { dir: 'lib/cjs/', format: 'cjs' },
    { dir: 'lib/esm/', format: 'esm' }
  ],
  plugins: [
    multiInput()
  ]
};

3. 项目的配置文件介绍

项目的配置文件是 rollup.config.mjs，它定义了 Rollup 打包的规则和插件的使用。以下是一个简化的示例：

// rollup.config.mjs
import commonjs from '@rollup/plugin-commonjs';
import json from '@rollup/plugin-json';
import resolve from '@rollup/plugin-node-resolve';
import multiInput from 'rollup-plugin-multi-input';
import peerDepsExternal from 'rollup-plugin-peer-deps-external';
import postcss from 'rollup-plugin-postcss';
import typescript from 'rollup-plugin-typescript2';

const require = createRequire(import.meta.url);
const packageJson = require('./package.json');

export default {
  input: ['src/**/*.js'],
  external: Object.keys(packageJson.dependencies),
  output: [
    { dir: 'lib/cjs/', format: 'cjs' },
    { dir: 'lib/esm/', format: 'esm' }
  ],
  plugins: [
    peerDepsExternal(),
    resolve({ browser: true }),
    commonjs(),
    typescript({ useTsconfigDeclarationDir: true, tsconfig: './tsconfig.build.json' }),
    postcss({ extensions: ['.css'] }),
    json(),
    multiInput()
  ]
};

配置文件说明

• input: 定义了打包的入口文件，使用通配符匹配 src 目录下的所有 .js 文件。
• external: 定义了外部依赖，避免将这些依赖打包到最终的输出文件中。
• output: 定义了输出的目录和格式，支持 CommonJS 和 ES Module 两种格式。
• plugins: 定义了使用的 Rollup 插件，包括 multiInput 插件，用于处理多输入文件的打包。

通过以上配置，项目可以实现多输入文件的打包，并生成不同格式的输出文件。

rollup-plugin-multi-inputA Rollup plugin to bundle modular libraries项目地址:https://gitcode.com/gh_mirrors/ro/rollup-plugin-multi-input