如何使用 Storybook 制作别名？

Question

我试图为这本故事书起个别名，但我在网站上找了一个 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 may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | }; |

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

我做错了什么？

Answer 1

GitHub Issue

如上文所述link您可以使用以下故事书创建别名：

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
  }
}

如何使用 Storybook 制作别名？

How to make aliases with Storybook?

aliases

reactjs

webpack

storybook