DEV Community

Dennis Zhang
Dennis Zhang

Posted on

Create React App 脚手架配置inspector

1、先安装依赖包

npm i -D @react-dev-inspector/babel-plugin react-dev-inspector

Enter fullscreen mode Exit fullscreen mode

2、config-overrides.js配置插件

const {override,addBabelPresets,addBabelPlugins} = require('customize-cra');
const webpackConfig=override(
    ...addBabelPresets('@babel/preset-env','@babel/preset-react'),
    ...addBabelPlugins('xxx',['@react-dev-inspector/babel-plugin',{enable:true}])
)

Enter fullscreen mode Exit fullscreen mode

3、根目录文件index.tsx

import{Inspector} from 'react-dev-inspector'

ReactDOM.render(
    <React.StrictMode>
        <Inspector>
            <App/>
        </Inspector>
    </React.StrictMode>
)


Enter fullscreen mode Exit fullscreen mode

Top comments (0)