如何使用 Storybook 制作别名？答案

【问题标题】：How to make aliases with Storybook?如何使用 Storybook 制作别名？
【发布时间】：2021-10-16 16:53:45
【问题描述】：

我尝试为故事书设置别名，但我在网站上查找了solution。但是，我的问题仍然存在，并且不起作用。我原来的webpack.config.js 中已经有一些别名，但我不明白它是如何不能被缓存的。所以，当我yarn storybook 时，我有一个错误。

下面是.storybook文件夹中的我的JS文件；我用的是documentation。

main.js

const path = require('path');
const custom = require('../webpack.config.js');

module.exports = {
  webpackFinal: async (config) => {
    return {
      ...config,
      module: {
        ...config.module,
        rules: [
          {
            test: /\.scss$/,
            use: ['style-loader', 'css-loader', 'sass-loader'],
            include: path.resolve(__dirname, '../'),
          }
        ],
      },
      resolve: { ...config.resolve, alias: custom.resolve.alias}
    };
  },
  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)",
    "../src/**/**/*.stories.@(js|jsx|ts|tsx)",
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials"
  ],
  "core": {
    "builder": "webpack5"
  }
}

错误

ModuleParseError: Module parse failed: Unexpected token (10:27) You 可能需要合适的加载器来处理这种文件类型，目前没有加载程序配置为处理此文件。看 https://webpack.js.org/concepts#loaders | }; |

const Template = (args) =>
; | |导出 const Primary = Template.bind({}); 在 handleParseError (/path/project/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModule.js:933:19) 在 /path/project/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModule.js:1035:5 在 processResult (/path/project/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModule.js:755:11) 在 /path/project/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModule.js:819:5 在 /path/project/node_modules/loader-runner/lib/LoaderRunner.js:406:3 在 iterateNormalLoaders (/mnt/d/Sites/chillwatch/node_modules/loader-runner/lib/LoaderRunner.js:232:10) 在阵列。 (/path/project/node_modules/loader-runner/lib/LoaderRunner.js:223:4) 在 runCallbacks (/path/project/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:27:15) 在 /path/project/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:200:4 在 /path/project/node_modules/graceful-fs/graceful-fs.js:123:16 在 FSReqCallback.readFileAfterClose [as oncomplete] (node:internal/fs/read_file_context:75:3)

我做错了什么？

【问题讨论】：

标签： reactjs webpack storybook aliases

【解决方案1】：

GitHub Issue

如上述链接所述，您可以为故事书创建别名，如下所示：

const path = require("path")

module.exports = {
  "webpackFinal": async (config) => {
    config.resolve.alias['#'] = path.resolve(__dirname, '../src')
    config.resolve.alias['#components'] = path.resolve(__dirname, '../src/components')
    return config
  }
}

【讨论】：