Comparing babel presets and plugins in TSDX's rollup config vs Storybook's webpack config

[kintz09]

While doing some debugging on my TSDX React Component Library, I was investigating the differences in the default Babel configuration in rollup vs storybook. I found many more babel presets and plugins being used by storybook than rollup.

I'm by no means an expert in this area, so maybe I didn't find all the babel config used by rollup, but here's what I found:

Babel in Storybook Webpack as included in TSDX project

Presets

• @babel/preset-env
• @babel/preset-typescript
• @babel/preset-react
• @babel/preset-flow

Plugins

• @babel/plugin-proposal-class-properties
• babel-plugin-macros
• @babel/plugin-transform-shorthand-properties
• @babel/plugin-transform-block-scoping
• @babel/plugin-proposal-decorators
• @babel/plugin-proposal-private-methods
• @babel/plugin-proposal-export-default-from
• @babel/plugin-syntax-dynamic-import
• @babel/plugin-proposal-object-rest-spread
• @babel/plugin-transform-classes
• @babel/plugin-transform-arrow-functions
• @babel/plugin-transform-parameters
• @babel/plugin-transform-destructuring
• @babel/plugin-transform-spread
• @babel/plugin-transform-for-of
• @babel/plugin-proposal-optional-chaining
• @babel/plugin-proposal-nullish-coalescing-operator
• babel-plugin-polyfill-corejs3
• babel-plugin-add-react-displayname

Babel in TSDX Rollup as configured in TSDX project

Presets

• @babel/preset-env

Plugins

• @babel/plugin-proposal-class-properties
• babel-plugin-macros
• babel-plugin-annotate-pure-calls
• babel-plugin-dev-expression
• babel-plugin-transform-rename-import
• babel-plugin-polyfill-regenerator

Notes:

• 1 preset overlaps between Rollup and Webpack
• 2 plugins overlap between Rollup and Webpack
• I didn't compare the options of all these plugins

Questions

• Does TSDX do anything to help keep the two build processes synced up in a fresh TSDX project?
• Knowing the webpack config uses so many more babel plugins and presets by default than TSDX uses in rollup, can we develop with the assumption that what we see in storybook is an accurate depiction of the library that ultimately gets created?
• What would you recommend to a library developer to improve upon this?
• Is there a recommended way to configure babel for TSDX rollup without interfering with storybook's webpack config?