仅在开发环境中使用 Rollup 插件

Question

我正在尝试使用

rollup-plugin-copy

插件将包含数据装置的文件从 src 目录复制到公共目录，仅用于开发目的。当rollup在生产环境中捆绑时，我不希望这种情况发生。

plugins: [
    resolve({
        mainFields: ['browser', 'module', 'main'],
        preferBuiltins: true,
        browser: true,
    }),
    () => {
        if (APP_ENV === 'development') {
            copy({
                targets: [
                    {
                        src: 'src/fixtures/list.js',
                        dest: './public',
                        transform: (contents) => contents.toString().replace('module.exports', 'var list'),
                    },
                ],
            });
        }
    }
],

我正在我的汇总配置中执行上述操作，但它似乎不起作用。我如何实现这一目标？

Answer 1

我能够通过创建一个返回插件数组的函数来解决这个问题，然后使用生成的数组列表作为汇总插件列表。

const pluginConfig = (environment) => {
  const pluginList = [
    //...list of other plugins
  ];

  if (environment === 'development') {
      pluginList.push(
        copy({
          targets: [
            {
              src: 'src/fixtures/list.js',
              dest: './public',
              transform: (contents) => contents.toString().replace('module.exports', 'var list'),
            },
          ],
        })
      );
  }

  return pluginList;
};


export default [
  {
      external: ['react', 'react-dom'],
      input: 'src/index.js',
      output: [],
      plugins: pluginConfig(APP_ENV),
  },
];

Answer 2

文档：https://rollupjs.org/configuration-options/#plugins

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

const isProduction = process.env.NODE_ENV === 'production';

export default (async () => ({
    input: 'main.js',
    plugins: [
        resolve(),
        commonjs(),
        isProduction && (await import('@rollup/plugin-terser')).default()
    ],
    output: {
        file: 'bundle.js',
        format: 'cjs'
    }
}))();