best approach to use rollup instead of webpack to output esm build of components

[antoine-durand]

Hi everyone,

I would like my react components to be build as esm module with rollup.
after lot of time spent on the doc, I would try the following:

1. create a new Env from the react one: bit create react-env envs/react-rollup-env
2. apply the new env to any component to test: bit env set path/to/my-component envs/react-rollup-env
3. create a new Build-task to be used in the new env instead of webpack: bit create build-task modules/rollup-task
4. in the new Env use react env's react.overrideBuildPipe() API to override the tasks in the build pipeline with the new task
5. try to invoke rollup in the new Build-Task

is this a good start ?

Thank you

[antoine-durand]

Context: I want to generate esm Module because I use dynamic import inside some components.
so that the final bundling of any Webb App using those components can benefit from webpack lazy loading and chunks splitting.
when using the default build pipeline of bit's react-env, 'import' are transpiled/replaced by different keyword or loader function and the final App can't detect dynamic import to generate lazy loading chunks.

[antoine-durand]

I followed the example here: Executing the pipelines
but I'm stuck on very simple step yet !
even after bit tag --all,
my new build-task is not executed, and do not appears in the output of bit build --list-tasks path/to/my-component

[antoine-durand]

in #4727 @benjgil said bit wil target esm build by default in a near futur.
would resolve this issue as well as tree shaking, etc...