问题描述
我正在尝试从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
:
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的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!