Our build process will require us to configure Babel and RollupJS separately.
Before we can configure our build, we need to create an entry-point for our library. This module will export all of the applicable components, APIs, and TypeScript values that we want to make publicly consumable. We will create the file:
This module will export all of the components and types defined for our
Our Storybook environment is already using Babel internally. You can see some existing Babel dependencies in our
package.json. We will be adding some additional presets and plugins that match our requirements. Install the following packages:
Each package has a specific purpose:
@babel/preset-envallows us to target specific browser environments when transpiling our code
@babel/preset-reacta combination of plugins that allows us to use JSX and other React features
@babel/preset-typescriptallows Babel to consume TypeScript (without type checking)
babel-plugin-styled-componentsimproves debugging and minification of styles in production environments
@babel/runtime. When a library is transpiled with Babel there are several helper functions and utilities that are included with the output. As you consume more packages these helpers are duplicated and increase the bundle size of your application. By including a runtime dependency to
@babel/runtimethis will ensure that our package doesn't duplicate them locally.
Let's create our Babel config at
If you want to see the browsers supported by our preset-env target, use:
>0.2%, not dead, not op_mini all, like this: