如何使用 rollup-plugin-copy 插件？-JavaScript中文网-JavaScript教程资源分享门户

本题详细解读

1. 安装 `rollup-plugin-copy` 插件

首先，你需要通过 npm 或 yarn 安装 rollup-plugin-copy 插件：

npm install rollup-plugin-copy --save-dev

或者

yarn add rollup-plugin-copy --dev

2. 配置 Rollup 使用 `rollup-plugin-copy`

在你的 Rollup 配置文件中，引入 rollup-plugin-copy 插件，并在 plugins 数组中配置它。rollup-plugin-copy 的主要配置项是 targets，它是一个数组，每个元素都是一个对象，包含 src 和 dest 属性。

src: 指定要复制的文件或文件夹路径，支持 glob 模式。
dest: 指定文件或文件夹复制到的目标路径。

3. 示例配置

假设你的项目结构如下：

// www.javascriptcn.com code example
project/
├── src/
│   ├── main.js
│   ├── assets/
│   │   ├── image1.png
│   │   └── image2.png
│   └── fonts/
│       ├── font1.ttf
│       └── font2.ttf
└── dist/

你希望在打包时将 src/assets/ 和 src/fonts/ 中的文件复制到 dist/assets/ 和 dist/fonts/ 目录中。你可以使用以下配置：

// www.javascriptcn.com code example
import copy from 'rollup-plugin-copy';

export default {
  input: 'src/main.js',
  output: {
    file: 'dist/bundle.js',
    format: 'cjs'
  },
  plugins: [
    copy({
      targets: [
        { src: 'src/assets/*', dest: 'dist/assets' },
        { src: 'src/fonts/*', dest: 'dist/fonts' }
      ]
    })
  ]
};

4. 运行 Rollup

配置完成后，运行 Rollup 进行打包：

npx rollup -c

打包完成后，dist/ 目录下将包含 bundle.js 文件以及从 src/assets/ 和 src/fonts/ 复制过来的文件。

5. 其他配置选项

rollup-plugin-copy 还支持其他配置选项，例如：

verbose: 设置为 true 可以在控制台输出复制的文件信息。
hook: 指定在 Rollup 的哪个阶段执行复制操作，默认为 buildEnd。

例如：

copy({
  targets: [
    { src: 'src/assets/*', dest: 'dist/assets' }
  ],
  verbose: true,
  hook: 'buildEnd'
})

通过这些配置，你可以更灵活地控制文件的复制行为。

如何使用 rollup-plugin-copy 插件？

推荐答案