How to configure path aliases for react scaffolding
This article mainly introduces the react scaffolding how to configure path aliases, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.
React version 16.13.1
1 enter the command npm run eject to generate the config directory under the root of the project
2 Open the webpack.config.js file under confilg and find the following location
Alias: {/ / Support React Native Web / / https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/ 'react-native':' react-native-web', / / Allows for better profiling with ReactDevTools. (isEnvProductionProfile & & {'react-dom$':' react-dom/profiling', 'scheduler/tracing':' scheduler/tracing-profiling',}) ... (modules.webpackAliases | | {}),}
3 modify the following, and then restart the project
Alias: {/ / Support React Native Web / / https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/ 'react-native':' react-native-web', / / Allows for better profiling with ReactDevTools. (isEnvProductionProfile & & {'react-dom$':' react-dom/profiling', 'scheduler/tracing':' scheduler/tracing-profiling',}) . (modules.webpackAliases | | {}), / / File path alias'@': path.resolve (_ _ dirname,'.. / src'),'@ view': path.resolve (_ _ dirname,'. / src/view'),}, configure proxy:
Simple version configuration:
Add "proxy": "http://localhost:4000"" directly to package.json
Full version configuration:
(1)。 Download: yarn add http-proxy-middleware
(2)。 Create: setupProxy.js under the src directory, with the following contents:
Const proxy = require ('http-proxy-middleware') module.exports = function (app) {app.use (proxy.createProxyMiddleware (' / api', {/ / with api is the request to be forwarded target: 'http://localhost:4000', / / here is the server address changeOrigin: true,// is Boolean, if it is true, the local server will receive your request and send it on your behalf PathRewrite: {'^ / api':'}})}
3. Note: after configuring the proxy for react scaffolding, front-end resources will be requested first when requesting resources, but no more back-end resources will be requested.
Thank you for reading this article carefully. I hope the article "how to configure path aliases for react scaffolding" shared by the editor will be helpful to you. At the same time, I also hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!
