reactjs - Storybook Typescript 不加载新添加的 props 类型,需要重启 storybook
module.exports = {
stories: ["../**/*.stories.mdx", "../stories/**/*.stories.@(js|jsx|ts|tsx)"],
addons: [
"@storybook/addon-links",
"@storybook/addon-essentials",
"@storybook/addon-interactions",
"@storybook/preset-create-react-app",
"@storybook/addon-a11y"
],
typescript: {
reactDocgen: "react-docgen-typescript",
reactDocgenTypescriptOptions: {
shouldExtractLiteralValuesFromEnum: true,
compilerOptions: {
allowSyntheticDefaultImports: false,
esModuleInterop: false
}
}
},
staticDirs: ["../src/assets"],
framework: "@storybook/react",
core: {
builder: "@storybook/builder-webpack5"
},
webpackFinal: (config) => {
config.module.rules.push({
test: /\.tsx?$/,
exclude: /node_modules/,
use: [
{
loader: require.resolve("babel-loader"),
options: {
presets: [
require("@babel/preset-typescript").default,
[require("@babel/preset-react").default, { runtime: "automatic" }],
// @ts-ignore
require("@babel/preset-env").default
]
}
}
]
});
config.resolve.extensions.push(".ts", ".tsx");
// config.module.rules.push({
// test: /\.mjs$/,
// include: /node_modules/,
// type: "javascript/auto"
// });
// config.resolve.extensions.push(".mjs");
return config;
}
};
上面是我的 main.js 文件
export type ButtonProps= {
width: string;
/** Some comments */
height: string; // let say I added this after starting up Storybook
}
在向我的按钮类型的 props 类型中添加新的 props(比如 height)后,Storybook 可能不会显示新添加的 props 或新添加的注释,只有在通过执行 npm run storybook 脚本重新启动 Storybook 后,新 props 或注释才会显示。重新启动 Storybook 后,所有内容(描述、属性)都会被加载并显示。
自第一天起,我就在我的 main.js 中包含了 TypeScript 配置,并决定寻求帮助,因为如果新更改没有显示出来而必须重启 Storybook,这样做效率不高。请告诉我可以尝试的任何方法来解决这个问题。