如何配置 babel

在此之前你需要首先了解一下什么是 babel ，以及 babel的使用指南 如果你需要其他babel的版本，还请参考[ https://babel.docschina.org/versions] 。

Babel是可以配置！许多其他工具具有类似的配置：ESLint (.eslintrc), Prettier (.prettierrc)。

允许使用所有 Babel API选项 。然而，如果该选项需要JavaScript，您可能需要使用Javascript 配置文件 。

在项目的根目录下(package.json的位置)创建一个名为babel.config.js的文件，其中包含以下内容:

查看 babel.config.js文档 ，以查看更多配置选项。

在项目的根目录下(package.json的位置)创建一个名为.babelrc的文件，其中包含以下内容:

查看 .babelrc文档 ，以查看更多配置选项。

或者，您可以选择在package.json中，使用babel键值指定.babelrc配置，如下所示：

与.babelrc的配置结构相同，但你可以用JavaScript编写它。

您可以访问任何Node.js API，例如基于流程环境的动态配置：

查看 babel-cli文档 ，以查看更多配置选项。

查看 babel-core文档 ，以查看更多配置选项。

react 项目

create react app + 下面命令

Note: 项目中必须有package.json ， 否则上面的命令会报错

1- 按照依赖

2- 配置脚本

3- Create the main file (告诉storybook去哪找stories)

4- write stories

每个story是组件的一个状态，如上例：按钮组件的两个实例

Button

├── With Text

└── With Emoji

5- 启动storybook

1- 获取完整的webpack默认配置

// .storybook/main.js

执行命令

2- webpackFinal添加配置

函数

参数： 第一个参数是storybook使用的webpack配置，第二个参数是接收的来自storybook的对象， 可以告诉你这些配置来自哪里

For example, here’s a .storybook/main.js to add Sass support:

添加插件配置

Using Your Existing Config---merge two config

默认情况下，Storybook加载根.babelrc文件并加载这些配置。但有时这些选择可能会导致故事书抛出错误。

在这种情况下，您可以为Storybook提供一个定制的.babelrc。为此，在Storybook config目录中创建一个名为.babelrc文件的文件（默认情况下，它是.Storybook）。

然后Storybook将只从该文件加载Babel配置。目前我们不支持package.json中的 Babel config

1- Typescript configuration presets

2- Setting up TypeScript with ts-loader

3- Setting up TypeScript with babel-loader

3- Using TypeScript with the TSDocgen addon

storybook info addon 能自动为每个组件生成属性表文档， 但是不适用与typescript

解决方案：react docgen typescript loader预处理typescript文件，以向Info插件提供所需的内容，webpack配置如上

组件正常使用info即可

请参阅react docgen typescript loader文档，以向typescript接口写入属性说明和其他注释。

可以在.storybook/preview.js中添加其他的说明

注意：对于只导出为默认值的组件，无法生成组件docgen信息。通过使用命名导出导出组件，可以解决此问题。

4- Setting up Jest tests

This is an example jest.config.js file for jest:

6- Building your TypeScript Storybook

---