This video is available to students only

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: src/index.ts.

This module will export all of the components and types defined for our Button and Field components.


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-env allows us to target specific browser environments when transpiling our code

  • @babel/preset-react a combination of plugins that allows us to use JSX and other React features

  • @babel/preset-typescript allows Babel to consume TypeScript (without type checking)

  • babel-plugin-styled-components improves debugging and minification of styles in production environments

  • @babel/plugin-transform-runtime and @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/runtime this will ensure that our package doesn't duplicate them locally.

Let's create our Babel config at .babelrc.

If you want to see the browsers supported by our preset-env target, use: >0.2%, not dead, not op_mini all, like this:

No discussions yet