If you find yourself filling out the same form over and over again, or working through a weird workflow to enable certain features in your app just to get things developed, then custom DevTools for your app will enhance your productivity. There are so many things you can do once you are enabled to write arbitrary development-only code in your app. In this lesson we‘ll see how we can wire that up to make it possible.
in App.js, there is a feature toggle to switch the logo:
import React from ‘react‘ import featureToggles from ‘./feature-toggles‘ import logo from ‘./logo.svg‘ import ‘./App.css‘ function App() { return ( <div className="App"> <header className="App-header"> {featureToggles.tacos ? ( <span className="App-logo" role="img" aria-label="taco"> ?? </span> ) : ( <img src={logo} className="App-logo" alt="logo" /> )} <a className="App-link" href={ featureToggles.tacos ? ‘https://en.wikipedia.org/wiki/Taco‘ : ‘https://reactjs.org‘ } target="_blank" rel="noopener noreferrer" > Learn about {featureToggles.tacos ? ‘ Tacos‘ : ‘ React‘} </a> </header> </div> ) } export default App
dev-tools/
--dev-tools.js
--load.js
--dev-tools.local.js
In app‘s index.js file, we call load.js to load devtool to initial the settings:
import loadDevTools from ‘./dev-tools/load‘ import React from ‘react‘ import ReactDOM from ‘react-dom‘ import ‘./index.css‘ import App from ‘./App‘ loadDevTools(() => { ReactDOM.render(<App />, document.getElementById(‘root‘)) })
load.js:
function load(callback) { if (process.env.NODE_ENV === ‘development‘) { import(‘./dev-tools‘) .then(mod => mod.install()) .finally(callback) } else { callback() } } export default load
dev-tools.js: Provide the UI for developer and load local devtool file
import React from ‘react‘ import ReactDOM from ‘react-dom‘ const requireDevToolsLocal = require.context( ‘./‘, false, /dev-tools\.local\.js/, ) const local = requireDevToolsLocal.keys()[0] if (local) { requireDevToolsLocal(local) } async function install() { function DevTools() { return ‘Hello from the devtools‘ } const devToolsRoot = document.createElement(‘div‘) document.body.appendChild(devToolsRoot) ReactDOM.render(<DevTools />, devToolsRoot) } export {install}
dev-tools.local.js: modify the settings
import featureToggle from ‘../feature-toggles‘ featureToggle.tacos = true
feature-toggles.js
// APP_CONFIG is set via the `config.js` script that‘s in /public const featureToggles = window.APP_CONFIG.featureToggles export default featureToggles
config.js;
window.APP_CONFIG = {
featureToggles: {},
}
[React] Build a feature toggle devtool
原文：https://www.cnblogs.com/Answer1215/p/14193751.html