Question

我正在使用Storybook可视化和记录我们的React Component Library。一切正常，没有在文档页面中显示代码。

项目数据：打字稿，React，故事书

项目依赖项：

  "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的“文档”部分中，所有正常工作都超出了代码段->“没有可用的代码”

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;
};

这是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);

在addons.ts中，我仅注册了其他插件。由于存在这些预设，我认为也不必注册addon-doc。

有人可以帮我吗？非常感谢。

Answer 1

我通过Storybook Github Page的帮助找到了它。

在preset.js中，行sourceLoaderOptions: null,终止了已加载故事代码的快照。 ->简单删除该行即可。

故事书加载项文档未显示代码已删除

.storybook中的文件：

1 个答案: