Question

我想创建一个汇总插件，该插件实际上仅复制输入文件，而无需更改输出目录。这样做的原因是，我们正在编写一个UI库，并且有很多scss mixin，我们希望其他人随我们的组件一起提供。示例：

项目结构

root
 ∟ src
    ∟ components
      ∟ Anchor.vue
      ∟ Button.vue
    ∟ mixins
      ∟ rem.scss
      ∟ color.scss
 ∟ lib
    // This folder should be generated by rollup
    ∟ components
      ∟ Anchor.js
      ∟ Button.js
    ∟ mixins
      ∟ rem.scss
      ∟ color.scss

因此我们当前的配置如下所示，该配置可为每个js文件创建vue文件

import multiInput from 'rollup-plugin-multi-input';

// Fake implementation to show how it works / what it returns
function getComponents(dir) {
  return {
    Anchor: `${dir}/Anchor.vue`,
    Button: `${dir}/Button.vue`,
  }
}

export default [
    {
        input: getComponents(components),
        plugins: [multiInput(), resolve(), commonjs(), vue({ css: false }), scss(scssOpts)],
        external: ['vue'],
        output: {
            dir: output,
            interop: false,
            format: 'esm',
        },
    },
  // There are more configs here to create a CJS bundle etc
];

multiInput允许我们有多个入口点，但这只是为了解释我们在这里所做的事情。我们有多个输入没关系。

我们遇到的问题是，如何才能将scss文件作为输入并进行汇总，只需将该文件复制到其他位置，而无需更改就可以完成。

就像这将是所需的汇总配置：

export default [
    {
        input: getMixins("./src/mixins"),
        plugins: [multiInput(), simplyCopyPlugin()],
        output: {
            dir: output,
        },

    }
]

因此理想情况下，这只会读取所有输入文件，并将它们（原始地，没有捆绑在一起）与原始文件名一起写入输出目录。

我们一直在尝试编写自己的汇总插件，如下所示：

export default function copyScss() {
    return {
        name: 'copy-scss',
        outputOptions: outputOptions => {
            return Object.assign({}, outputOptions, {
                entryFileNames: '[name].scss',
            });

        },
        transform(code) {
            return code;
        },
    };
}

但是，这只会引发错误，即汇总无法处理文件的内容。一旦我们还包括了官方的scss插件（只是为了暂时摆脱该错误），我们将获得完全空的文件。另外，我们还必须对文件结尾进行硬编码。

您是否看到一种方法，也许我们可以编写一个插件来接收输入文件，将它们复制到输出目录，然后什么都不做？

汇总：只需复制粘贴文件并使用.scss作为文件结尾

0 个答案: