汇总监视包含目录

Question

我正在尝试使用以下 rollup.config.js 文件

import typescript from "rollup-plugin-typescript2";
import pkg from "./package.json";
import copy from 'rollup-plugin-copy'
import clean from 'rollup-plugin-clean';

export default [
  {
    input: "src/index.ts",
    external: Object.keys(pkg.peerDependencies || {}),
    watch: {
        skipWrite: false,
        clearScreen: false,
        include: 'src/**/*',
        //exclude: 'node_modules/**',
        // chokidar: {
        //     paths: 'src/**/*',
        //     usePolling: false
        // }
    },
    plugins: [
      clean(),
      copy({
        targets: [
          { src: 'src/*', dest: 'dist' }
        ]
      }),
      typescript({
        typescript: require("typescript"),
        include: [ "*.ts+(|x)", "**/*.ts+(|x)", "*.d.ts", "**/*.d.ts" ]
      }),
    ],
    output: [
      { file: pkg.main, format: "cjs" },
      { file: pkg.module, format: "esm" },
      {
        file: "example/src/reactComponentLib/index.js",
        format: "es",
        banner: "/* eslint-disable */"
      }
    ]
  }
];

当 src 中的任何内容发生变化时，我想重建。我有几个文件没有在 .js 和 .ts 文件中导入，但我希望它们复制到 dist 文件夹中。副本工作正常，但手表没有发现其他文件中的更改。在 chokidar 选项上尝试了很多变化，但还没有运气。

任何人都知道如何解决这个问题？

Answer 1

watch.include仅适用于与模块图有关的文件，因此如果未导入它们，则不会包含它们（https://rollupjs.org/guide/en/#watchinclude）。

您可以通过创建一个在构建开始时调用this.addWatchFile这些外部文件的小插件来解决这个问题。下面是一个例子：

plugins: [
       {
           name: 'watch-external',
           buildStart(){
               this.addWatchFile(path.resolve(__dirname, 'foo.js'))
           }
       }
    ]

将它与一些 globbing 实用程序结合起来，例如fast-glob调用this.addWatchFile您要复制的每个文件：

import fg from 'fast-glob';

export default {
    // ...
    plugins: [
       {
           name: 'watch-external',
           async buildStart(){
               const files = await fg('src/**/*');
               for(let file of files){
                   this.addWatchFile(file);
               }
           }
       } 
    ]
}