本文介绍了设置REACT-STYLEGUIIST、创建REACT应用程序、Tyescript、Material UI和Styleed-Components的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在尝试从Create Reaction App 3(CRA)、TypeScript、Material UI和Styled-Components设置Reaction-StyleGuidist(RSG)。我在此错误中停滞不前:

./node_modules/react-styleguidist/lib/client/rsg-components/ReactExample/ReactExample.js
Module not found: Can't resolve 'rsg-components/Wrapper' in '/Users/ofj/code/new-core-web/node_modules/react-styleguidist/lib/client/rsg-components/ReactExample'

我按照文档设置了MUI主题和样式组件的包装器:
https://react-styleguidist.js.org/docs/thirdparties.html#styled-components

/styleguidist/MuiThemeWrapper.tsx

const muiTheme = getMuiTheme({});
const MuiThemeWrapper = ({ children, ...rest }) => (
    <MuiThemeProvider muiTheme={muiTheme}>
        <ThemeProvider theme={theme}>
            {children}
        </ThemeProvider>
    </MuiThemeProvider>
);

export default MuiThemeWrapper;

我的style guidist配置:

/styleguidist.config.js

const path = require('path');
module.exports = {
    components: "src/components/**/layout.{js,jsx,ts,tsx}",
    propsParser: require('react-docgen-typescript').withCustomConfig(
        './tsconfig.json'
      ).parse,
    serverPort: 6161,
    styleguideComponents: {
      Wrapper: path.join(__dirname, 'styleguidist/MuiThemeWrapper.jsx')
    }
};

我的tsconfig遵循标准CRA/MUI建议
https://material-ui.com/guides/typescript/

tsconfig.json

{
  "compilerOptions": {
    "noImplicitAny": true,
    "noImplicitThis": true,
    "strictNullChecks": true,
    "baseUrl": "src",
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "checkJs": false,
    "pretty": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react"
  },
  "exclude": [
    "node_modules"
  ],
  "types": [
    "./node_modules/@types/"
  ]
}

我没有自定义的webpack/巴别塔配置设置,因为我不知道怎么做,也不会搞砸TS转换。也许这就是RSG工作所缺少的…?或者rsg-Components/ReactExample/ReactExample.js的错误是错误?

推荐答案

我使其正常工作,希望其他人也能发现它的用处,因为到目前为止找到的非键入脚本示例配置很少,也是唯一的。

设置注意事项:

  • Reaction Mui APP在src/,组件在src/components/中,使用modules:webpack配置查看src/中的绝对导入。
  • 应用程序已使用Reaction应用程序创建器创建。
  • tsconfig.json自动创建(稍后仅覆盖专门用于";ts-loader";的noEmit,见下文);下面显示了一个重要的例外/添加。
  • styleguide.config.js中包含的webpack和巴别塔单独配置。

tsconfig.json是样板,除了这里的这个gempaths:'rsg-components/*'需要手动添加--它隐藏在React Styleguidist's Cookbook中。如果没有它,我们需要求助于webpack配置中的别名定义,包括替换包装器!使用tsconfig.json中正确的paths定义,事情最终开始正确进行。

{
  "compilerOptions": {
    "paths": {
      "rsg-components/*": [
        "node_modules/react-styleguidist/lib/client/rsg-components/*"
      ]
    }
  }
}

styleguide.config.js位于项目的顶级目录中:

const path = require('path')

module.exports = {
    components: [
        'src/components/**/*.{ts,tsx}',
        'src/models/**/*.ts',
    ],
    ignore: [
        'src/**/index.{ts,tsx}',
    ],
    // We need to override how to decide on what an example file is, in order
    // to remove default which tries to document undocumented components. Ugh.
    // So, only document components for which we also have an explicit
    // documentation file named the same as the component file, but ending in
    // ".md" instead.
    getExampleFilename: (cpath) => {
        return cpath.replace(/.(tsx?)$/, '.md')
    },
    // Show import commands without the component filename extension and only
    // for the module; also remove the first "src/" path component.
    getComponentPathLine: (cpath) => {
        const cname = ['.tsx', '.ts'].reduce((name, ext) => path.basename(name, ext), cpath)
        const cdir = path.dirname(cpath).replace(/^src//, '')
        return `import { ${cname} } from ${cdir}`
    },
    // How uncivilized: do not list components lacking an example.
    skipComponentsWithoutExample: true,
    // Always expand the props and methods of components.
    usageMode: 'expand',
    // Support rendering prop types of typescript components.
    propsParser: require('react-docgen-typescript').withCustomConfig(
        './tsconfig.json',
        {
            "compilerOptions": { "noEmit": false },
        }
    ).parse,
    // Replace the standard wrapper for example component usage code with our
    // own wrapper which brings in the Material UI theme.
    styleguideComponents: {
        Wrapper: path.join(__dirname, 'styleguidist/MuiThemeWrapper.tsx')
    },
    // Tell webpack what to look for and where and how to load it.
    webpackConfig: {
        resolve: {
            extensions: ['.tsx', '.ts', '.js'],
            // https://webpack.js.org/configuration/resolve/#resolvemodules;
            // we're allowing absolute imports to be satisfied from the src/
            // directory.
            modules: [
                path.resolve(__dirname, 'src/'),
                'node_modules'
            ],
            alias: {
                // Could also be covered by a modules clause, but we are
                // sticking with an alias instead to cover only exactly
                // absolute "styleguidist/..." imports.
                'styleguidist': path.join(__dirname, 'styleguidist'),
            }
        },
        module: {
            rules: [
                {
                    test: /.tsx?$/,
                    exclude: /node_modules/,
                    use: [
                        {
                            loader: 'babel-loader',
                            options: {
                                presets: [
                                    "@babel/preset-env",
                                    "@babel/react",
                                ]
                            },
                        },
                        {
                            loader: 'ts-loader',
                            options: {
                                // Important! Avoids "Error: TypeScript emitted no output for..." errors
                                compilerOptions: {
                                    noEmit: false,
                                },
                            },
                        },
                    ],
                },
                {
                    test: /.css$/,
                    loader: 'style-loader!css-loader?modules',
                },
                {
                    test: /.svg$/,
                    loader: 'url-loader',
                },
                {
                    test: /.(woff(2)?|ttf|eot|svg)(?v=d+.d+.d+)?$/,
                    use: [
                        {
                            loader: 'url-loader',
                            options: {
                                name: '[name].[ext]',
                                outputPath: 'fonts/',
                            }
                        },
                    ]
                }
            ]
        },
    }
}
  • 覆盖styleguidist/绝对导入可以用modules:子句覆盖,但在本例中我选择了别名。您可能会对此做出不同的判断:)
  • 我设置了一个相当严格的制度,只记录带有示例的组件;如果您不想这样做,就取消它。
  • 困难在于给webpack配置正确的装载器,我已经启用了Typescript、tsx和jsx,还拉入了字体资源。
  • 重要信息:包装位于styleguidist/MuiThemeWrapper.tsx中。

这是我的包装器styleguidist/MuiThemeWrapper.tsx

(MUI v5参见MUI v5 + React styleguidist + ScopedCSSBaseline + createTheme styleOverrides: body fontSize change not working答案)

import React from 'react'

import "fontsource-roboto/400.css"
import "fontsource-roboto/500.css"
import "fontsource-roboto/700.css"
import "fontsource-roboto-mono/400.css"

import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles'
import CssBaseline from '@material-ui/core/CssBaseline'

const muiTheme = createMuiTheme({})

const MuiThemeWrapper = ({children}) => (
    <ThemeProvider theme={muiTheme}>
        <CssBaseline />
        {children}
    </ThemeProvider>
)

export default MuiThemeWrapper
  • 显式拉入我的Reaction+Material UI项目中需要的Roboto字体。
  • 应用CSS基线定义,否则将无法正确定义font-family%s。

这篇关于设置REACT-STYLEGUIIST、创建REACT应用程序、Tyescript、Material UI和Styleed-Components的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

06-12 16:16