从头开始为 storybook 和 webpack 设置绝对导入

Posted

技术标签:

【中文标题】从头开始为 storybook 和 webpack 设置绝对导入【英文标题】:Setting up absoute imports for storybook and weback from scratch 【发布时间】:2021-11-02 09:22:44 【问题描述】:

我正在尝试创建一个 ui 库作为我的应用程序的单独包。为此,我从头开始设置一个包,创建一个 package.json 并在其中运行 npx storybook init

在运行故事书时,我看到了错误日志:

字段“浏览器”不包含有效的别名配置 /Users/xxx/Code/nl/node_modules/utils/general.jsx 没有 存在 .ts

utils/general 不是包,而是我尝试从绝对路径导入的文件。然而,webpack 似乎无法解决它。

我正在使用 storybooks 默认 webpack 配置,并在我的 tsconfig.json 中由 baseUrl 定义:


    "include": [
      "src"
    ],
    "esModuleInterop": true,
    "compilerOptions": 
      "baseUrl": "src",
      "outDir": "lib",
      "declaration": true,
      "jsx": "react",
      "esModuleInterop": true,
      "skipLibCheck": true
    
  

但是,这不起作用。我很想正确解决我的绝对进口问题。我很乐意为您提供任何帮助。

【问题讨论】:

【参考方案1】:

?(未来参考的解决方案)

module.exports = 
    stories: [
        '../src/**/*.stories.mdx',
        '../src/**/*.stories.@(js|jsx|ts|tsx)',
    ],
    addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
    typescript: 
        reactDocgen: 'react-docgen-typescript',
    ,
    webpackFinal: async (config) => 
        config.resolve.modules.push(path.resolve(__dirname, '../src'));
        return config
    ,
;

参考:https://github.com/storybookjs/storybook/issues/4136

【讨论】:

以上是关于从头开始为 storybook 和 webpack 设置绝对导入的主要内容,如果未能解决你的问题,请参考以下文章

Storybook - 使用自定义 webpack / babel 的 typescript 项目中没有出现任何故事

如何使用 Next.js、Ant Design、Less 和 TypeScript 配置 Storybook.js Webpack

Webpack 5 和 Storybook 6 集成在 DefinePlugin.js 中引发错误

升级到 Webpack 5 打破 Storybook 5

如何安装 Storybook 和 Vue Cli 3?

JS周刊#410 - 全面的webpack 4配置示例,Storybook4.0更新,异步JS的演变,React Hooks介绍