react component missing build:watch option

[adamborowski]

This issue is a:

• Feature request
• Question / support request

Hi, as a library developer I would like to rebuild the library module every time webpack notices a change so my end-application will be refreshed once that linked module is rebuilt. Now I have to type npm run build on react component module every time I make a change.

[loganvolkers]

Does anyone have a workaround to make this work by modifying nwb.config.js for example?

[insin]

This could be awkward to implement, as we're just running Babel's CLI: https://github.com/insin/nwb/blob/master/src/moduleBuild.js

It'd be easy to add a --watch option and pass that along to the Babel CLI, except:

1. we run Babel twice: once for a CommonJS build in lib/ and once for an ES Modules build in es/. If your app is using Webpack, it could be using either of these depending on your config. We also run it synchronously.
2. Babel no longer supports passing the path to a .babelrc to use, so we temporarily write it to the root of your component project, which prevents running 2 builds at once.

For 2., we could try writing the .babelrc to a temporary directory and spawning the Babel CLI process with the temporary directory as its working directory. For this to work we'd have to ensure every path in the .babelrc is absolute. This is already true of the Babel config nwb creates itself, but we'd also have to try to resolve the absolute paths to any custom presets or plugins the user has configured in nwb.config.js.

Once 2. is solved, we could support having a --watch option and change moduleBuild.js to spawn both Babel builds in parallel, passing a --watch option to it.

[loganvolkers]

Sounds difficult. Luckily the projects for my use cases are small, so using nodemon and re running the whole build is good enough.

For larger projects I could see that getting slow though.

On Jan 26, 2018 8:07 PM, "Jonny Buchanan" [email protected] wrote:

This could be awkward to implement, as we're just running Babel's CLI: https://github.com/insin/nwb/blob/master/src/moduleBuild.js

It'd be easy to add a --watch option and pass that along to the Babel CLI, except:

1. we run Babel twice: once for a CommonJS build in lib/ and once for an ES Modules build in es/. If your app is using Webpack, it could be using either of these depending on your config. We also run it synchronously.
2. Babel no longer supports passing the path to a .babelrc to use, so we temporarily write it to the root of your component project, which prevents running 2 builds at once.

For 2., we could try writing the .babelrc to a temporary directory and spawning the Babel CLI process with the temporary directory as its working directory. For this to work we'd have to ensure every path in the .babelrc is absolute. This is already true of the Babel config nwb creates itself, but we'd also have to try to resolve the absolute path to any custom presets or plugins the user has specified in nwb.config.js.

Once 2. is solved, we could support having a --watch option and change moduleBuild.js to spawn both Babel builds in parallel, passing a --watch option to it.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/insin/nwb/issues/351#issuecomment-360958168, or mute the thread https://github.com/notifications/unsubscribe-auth/ABGn3jDYj3rCCokEAhQEQKKG8AekLJb2ks5tOqDlgaJpZM4Obg00 .

[muhammadtarek]

Is there a workaround if the es/ build is disabled?

[redbmk]

As a workaround, I installed nodemon as a dev dependency and added a build:watch script to package.json:

nodemon -w src -x 'rm .babelrc &> /dev/null; nwb build-react-component --no-demo'

You'd just need to tweak this to use whatever nwb script and flags you need.

Then you can just run yarn build:watch or npm run build:watch.

[muhammadtarek]

@redbmk Thanks for the workaround, you saved me a lot of time switching between the editor and the terminal

[alzalabany]

this is so important to me too. since i'm using yarn workspace and split every part of my app into libraries, most of the time i'm working in 2+ library at same time. and yarn workspace symlink all packages in your monorepo to single node_module, so its very slow and not logic to run whole nwb build twice every time a single line in a file changes :/

[sberney]

Yeah, I'm here at nwb because create-react-app doesn't support creating libraries, only html web apps. If nwb can't live rebuild the library I'm working on, only the demo, it's not doing what I need it to.

I know webpack can watch files, and babel cli also has a watch option. It might be complicated, but it would be great if we could somehow get this feature!