How to resolve aliases in Storybook with Webpack?

在使用Storybook时，解析别名（alias）可以帮助简化组件导入路径，使项目结构更清晰，同时减少文件路径错误的问题。解析别名的具体方法取决于你使用的构建工具（比如Webpack或Babel）。下面以Webpack为例，介绍如何在Storybook中设置别名。

步骤1: 修改Storybook的Webpack配置

Storybook内置支持Webpack，我们可以通过扩展其默认配置来添加别名支持。首先，你需要在.storybook目录中创建一个名为main.js的文件（如果还不存在的话），然后在该文件中添加或修改Webpack的配置。

javascript
// .storybook/main.js
module.exports = {
  webpackFinal: async (config) => {
    // 添加或修改别名
    config.resolve.alias = {
      ...config.resolve.alias,
      '@components': path.resolve(__dirname, '../src/components'),
      '@utils': path.resolve(__dirname, '../src/utils'),
      // 可以根据需要添加更多别名
    };

    // 返回新的配置
    return config;
  },
};

这里@components和@utils是自定义的别名，指向项目中相应的目录。使用path.resolve确保路径是绝对的。

步骤2: 使用别名

设置完别名后，你可以在Storybook的stories文件中使用这些别名来导入组件或其他模块。

javascript
// 例如，在一个story文件中
import React from 'react';
import Button from '@components/Button'; // 使用别名导入

export default {
  title: 'Button',
  component: Button,
};

export const Primary = () => <Button primary>Click me</Button>;

示例: 整合别名在一个复杂项目中

假设你的项目中有多个层级的目录结构，频繁地使用相对路径导入（如 ../../../components/Button）会非常混乱并容易出错。通过设置别名，你可以用简洁的方式引用这些模块，改善代码的可维护性。

结论

通过在Storybook中设置Webpack的别名，可以极大地优化开发体验，使代码更加整洁和易于管理。记得在任何时候，都要确保路径正确，并且在更改Webpack配置后重新启动Storybook服务以应用新的配置。