7

I am trying with following rollup.config.js file

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 */"
      }
    ]
  }
];

I want to rebuild when anything in src changes. I have couple of files which are not imported in .js and .ts files but I want them to copy in dist folder. copy is working fine but the watch is not picking up changes in those other files. Tried alot of variations on chokidar options but no luck yet.

Anyone have any idea how to resolve this?

ThomasH
  • 22,276
  • 13
  • 61
  • 62
Saurabh Nemade
  • 1,522
  • 2
  • 11
  • 20

1 Answers1

19

watch.include only works on files pertaining to the module graph so if they are not imported they won't be included (https://rollupjs.org/guide/en/#watchinclude).

You can solve this by creating a small plugin that calls this.addWatchFile on those external files when the build starts. Here is an example:

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

Combine it with some globbing utility such as fast-glob and just call this.addWatchFile for every file you want to copy:

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);
               }
           }
       } 
    ]
}
Isidrok
  • 2,015
  • 10
  • 15
  • Thanks @Isidork. Nice way to add watcher to files. Any way to watch entire directory? Currently, I managed to get it working by running chokidar manually in scripts as following. `"watch":"chokidar src -c 'yarn build'"` – Saurabh Nemade Aug 23 '20 at 17:51
  • @SaurabhNemade any news here? – canbax Sep 15 '21 at 11:13
  • @SaurabhNemade Isn't this already explained in the post's second example, watching all files in folder `src`? – CherryDT May 01 '22 at 17:53
  • @CherryDT doesn't seems like it covers the case when new files are added to the directory, hence i think this is a valid question – Alex May 28 '22 at 11:23