It plays an auxiliary role in visualizing the component design during implementation and activating smooth discussions. It will lead to shrinking the cost of development.
MIT License
Analyze the component tree of react and displays it as a diagram in the browser. You can refer to the corresponding code from the diagram.
npm i -D react-component-analyzer
By specifying the React root file and the component files, it will parse them and output the stats.html
file.
npx rca ./src/main.tsx
The following options can be set in the configuration file.
Prepare a rca.config.js
file with the following properties.
Property | Type | Description |
---|---|---|
vscode | boolean | Use vscode schema to code jump to the target component. (default true ) |
alias | Array | Specify multiple aliases for entry points. |
outputPath | string | Specify the absolute path of the file to be output after analysis. |
alias Property
Property | Type | Description |
---|---|---|
find | String | Entry point alias. |
replacement | String | Resolve aliases by specifying absolute paths. |
const path = require('path')
module.exports = {
alias: [
{
find: '@',
replacement: path.resolve(__dirname, 'src'),
},
],
}
Please see the principles of conduct when building a site.
This library is licensed under the MIT license.