[英]Storybook in create-react-app with TypeScript
I am trying to use Stotybook in a create-react-app with TypeScript without ejecting. 我试图在带有TypeScript的create-react-app中使用Stotybook而不会弹出。 I have understood that this should be possible, even though it is not described in the docs.
我已经明白这应该是可能的,即使它没有在文档中描述。 Here are the resources I have used:
以下是我使用过的资源:
https://storybook.js.org/basics/introduction/ https://storybook.js.org/basics/introduction/
https://storybook.js.org/configurations/typescript-config/ https://storybook.js.org/configurations/typescript-config/
https://github.com/wmonk/create-react-app-typescript/issues/405 https://github.com/wmonk/create-react-app-typescript/issues/405
I get storybook to build but it shows: 我得到了要构建的故事书,但它显示:
No Preview
Sorry, but you either have no stories or none are selected somehow.
This is what I have done: 这就是我所做的:
npx -p @storybook/cli sb init
npm install --save-dev react-docgen-typescript-webpack-plugin @storybook/addon-info @types/storybook__react awesome-typescript-loader
npm run storybook
Here is code I have changed from what the init storybook command created: 这是我从init storybook命令创建的代码更改的代码:
tsconfig.js tsconfig.js
...
"rootDirs": ["src", "stories"],
...
.storybook/config.js .storybook / config.js
import { configure } from '@storybook/react';
// automatically import all files ending in *.stories.js
const req = require.context('../', true, /.stories.tsx$/);
function loadStories() {
req.keys().forEach(filename => req(filename));
}
configure(loadStories, module);
.storybook/webpack.config.js .storybook / webpack.config.js
const path = require("path");
const TSDocgenPlugin = require("react-docgen-typescript-webpack-plugin"); // Optional
module.exports = (baseConfig, env, config) => {
config.module.rules.push({
test: /\.(ts|tsx)$/,
loader: require.resolve("ts-loader")
});
config.plugins.push(new TSDocgenPlugin()); // optional
config.resolve.extensions.push(".ts", ".tsx");
return config;
};
src/stories/index.js SRC /故事/ index.js
import * as React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import TicTacToeCell from './TicTacToeCell';
const stories = storiesOf('Components', module);
stories.add(
'TicTacToeCell',
() => <TicTacToeCell value="X" position={{ x: 0, y: 0 }} onClick={action('onClick')} />,
{ info: { inline: true } }
);
What is wrong with my setup? 我的设置有什么问题?
PS. PS。 I don't know if I need all of the packages above, so please let me know if I am adding things to my project that won't be relevant because I am running a create-react-app project
我不知道我是否需要上面的所有软件包,所以如果我在项目中添加不相关的内容,请告诉我,因为我正在运行create-react-app项目
src/stories/index.js
应命名为src/stories/index.tsx
just load your stories directly in .storybook/config.js
只需将您的故事直接加载到
.storybook/config.js
function loadStories() {
require('../src/stories')
}
or you can rename src/stories/index.js
into src/stories/index.stories.tsx
或者您可以将
src/stories/index.js
重命名为src/stories/index.stories.tsx
read the comments carefully 仔细阅读评论
// automatically import all files ending in *.stories.js
const req = require.context('../', true, /.stories.tsx$/);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.