从头开始为 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 似乎无法解决它。
我正在使用 storybook
s 默认 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 中引发错误
JS周刊#410 - 全面的webpack 4配置示例,Storybook4.0更新,异步JS的演变,React Hooks介绍