汇总监视包含目录

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);
               }
           }
       } 
    ]
}

汇总监视包含目录

rollup watch include directory

rollup

rollupjs