问故事书插件-文档不显示截取的代码
EN

Stack Overflow用户

提问于 2019-11-14 13:53:03

回答 1查看 3.3K关注 0票数 2

我正在使用Storybook来可视化和记录我们的React组件库。除了不在文档页面中显示代码之外，一切都正常。

项目数据: Typescript、React、Storybook

项目依赖关系：

  "dependencies": {
    "@types/node": "12.11.1",
    "@types/react": "16.9.9",
    "@types/react-dom": "16.9.2",
    "@types/styled-components": "4.1.19",
    "react": "16.10.2",
    "react-dom": "16.10.2",
    "react-scripts": "3.2.0",
    "styled-components": "4.4.0",
    "typescript": "3.6.4"
  },
  "devDependencies": {
    "@babel/core": "7.6.0",
    "@storybook/addon-actions": "5.2.6",
    "@storybook/addon-console": "1.2.1",
    "@storybook/addon-docs": "5.2.6",
    "@storybook/addon-knobs": "5.2.6",
    "@storybook/addon-links": "5.2.6",
    "@storybook/addons": "5.2.6",
    "@storybook/react": "5.2.6",
    "@storybook/theming": "5.2.6",
    "@svgr/cli": "4.3.3",
    "@types/enzyme": "3.10.3",
    "@types/enzyme-adapter-react-16": "1.0.5",
    "@types/jest": "24.0.20",
    "@types/react-test-renderer": "16.9.1",
    "@types/storybook__react": "4.0.2",
    "@typescript-eslint/eslint-plugin": "2.3.0",
    "@typescript-eslint/parser": "2.5.0",
    "babel-loader": "8.0.6",
    "create-ts-index": "1.12.0",
    "enzyme": "3.10.0",
    "enzyme-adapter-react-16": "1.15.1",
    "enzyme-to-json": "3.4.2",
    "eslint-config-airbnb-typescript": "6.0.0",
    "eslint-config-prettier": "6.5.0",
    "eslint-config-react": "1.1.7",
    "eslint-plugin-import": "2.18.2",
    "eslint-plugin-jest": "23.0.2",
    "eslint-plugin-jsx-a11y": "6.2.3",
    "eslint-plugin-prettier": "3.1.1",
    "eslint-plugin-react": "7.14.3",
    "eslint-plugin-react-hooks": "1.7.0",
    "jest": "24.9.0",
    "jest-junit": "8.0.0",
    "jest-styled-components": "6.3.3",
    "prettier": "1.18.2",
    "react-docgen-typescript-loader": "3.3.0",
    "react-test-renderer": "16.10.2",
    "recursive-copy": "2.0.10",
    "themeprovider-storybook": "1.2.4",
    "ts-jest": "24.1.0",
    "ts-loader": "6.2.1"

问题是，在Storybook的文档部分中，除了代码片段-> "No Code available“之外，一切都可以正常工作。

Sceenshot of the Docs Page

.storybook中的我的文件：

我使用Docs React Preset -> presets.js：

module.exports = [
  {
    name: '@storybook/addon-docs/react/preset',
    options: {
      configureJSX: true,
      babelOptions: {},
      sourceLoaderOptions: null,
    },
  },
];

这个webpack.config.js

const path = require('path');

module.exports = ({ config }) => {
  config.module.rules.push({
    test: /\.(ts|tsx)$/,
    exclude: path.resolve(__dirname, '..', 'node_modules'),
    use: [
      {
        loader: require.resolve('babel-loader'),
        options: {
          presets: [require.resolve('babel-preset-react-app')],
        },
      },
      require.resolve('react-docgen-typescript-loader'),
    ],
  });

  return config;
};

Her就是config.tsx

import React, { ReactElement } from 'react';
import { configure, addDecorator, addParameters } from '@storybook/react';
import { withThemesProvider } from 'themeprovider-storybook';
import yourTheme from './yourTheme';
import { brightTheme, GlobalStyle } from '../src';
import './yourStyle.css';

// eslint-disable-next-line @typescript-eslint/no-var-requires
const { setConsoleOptions } = require('@storybook/addon-console');

const themes = [brightTheme];
const withGlobalStyles = (storyFn): ReactElement => {
  return (
    <>
      <GlobalStyle />
      {storyFn()}
    </>
  );
};

addParameters({ options: { theme: yourTheme } });
addDecorator(withThemesProvider(themes));
addDecorator(withGlobalStyles);

setConsoleOptions({ panelExclude: [] });

configure(require.context('../src', true, /.stories.(tsx|mdx)$/), module);