Prefacio:
No he usado create-react-app para un proyecto durante mucho tiempo. Esta vez decidí crear uno yo mismo para un proyecto h5 con solo unas pocas páginas (ps: mmp, no lo he usado durante mucho tiempo y Encontré muchos problemas al construirlo).
He usado umi antes. El proyecto del sistema de gestión backend utiliza el marco antd-pro. De hecho, antd-pro es un marco integrado basado en umi. Varias cosas están empaquetadas en el interior, listas para usar nada más sacarlas de la caja.
Mi entorno es el siguiente:
create-react-app v5
"axios": "^1.5.0",
"http-proxy-middleware": "^2.0.6",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router": "^6.16.0",
"react-router-dom": "^6.16.0",
"customize-cra": "^1.0.0",
"react-app-rewired": "^2.2.1"
Hay muchos problemas con la versión v5, hay muchos problemas y los métodos de algunos complementos no son adecuados (hay muchos errores, muchas veces: 2023-09-27).
Los problemas que mencioné fueron causados por el uso de reaccionar-app-rewired y personalizar-cra para configurar algunas cosas cuando no quería exponer la configuración del paquete web. No es un problema con create-reacr-app en sí.
Entonces, si no quiere este problema, puede ejecutar npm eject directamente y usar la configuración tradicional del paquete web.
Si no desea reescribir el paquete web con complementos de terceros, puede leer mi artículo: reaccionar crear-reaccionar-aplicación v5 construida desde cero (usando npm run eject)
Proceso de construcción:
1. Cree un proyecto:
Instale Node y npm: Node >= 14.0.0 y npm >= 5.6
npx install -g create-react-app
npx create-react-app my-app
npx no es un error tipográfico: es el ejecutor de paquetes que viene con npm 5.2+.
reaccionar a la documentación del sitio web oficial
2. Configurar varias cosas necesarias
Ejecute npm start y vea la imagen a continuación, lo que significa que el proyecto se creó correctamente.
Configurar el enrutamiento:
1. Descargue reaccionar-router-dom
npm install react-router-dom
1. Primer npm react-router-dom
2. Escriba el siguiente código en App.js:
import React from "react";
import {
BrowserRouter, Routes, Route } from "react-router-dom";
import routes from './routes';
const App = () => {
console.log(routes)
return (
<BrowserRouter>
<Routes>
{
routes.map((route) => (
<Route key={
route.path} path={
route.path} element={
route.component} />
))}
{
/* <Route path="*" element={<Home />} /> */}
</Routes>
</BrowserRouter>
);
};
export default App;
3.Escribe en index.js:
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
4. Cree un nuevo archivo route.js en src y escriba:
// 导入你的页面组件
import Home from './pages';
const routes = [
{
path: "/", component: <Home/>}
];
export default routes;
Si ejecuta y ve las cosas en el componente Inicio, significa éxito. Después de eso, puede importar otros componentes en scr/router.js y simplemente escribir la ruta y los enrutadores.
Nota: reaccionar-router-dom v6 y v5 api no son lo mismo. Por ejemplo, en v5, la ruta es componente y v6 es elemento. Para conocer métodos de escritura específicos, se recomienda consultar la documentación de la versión que está utilizando.
Si encuentra el error TypeError no detectado: No se pueden leer las propiedades de null (leyendo 'useRef'), puede consultar https://blog.csdn.net/weixin_44058725/article/details/133316898
Configurar menos:
Puede consultar:
reaccionar crear-reaccionar-configuración de la aplicación menos
Configurar el proxy proxy:
Usando http-proxy-middleware
1. Instale http-proxy-middleware
npm install http-proxy-middleware --save
2. Cree un nuevo setupProxy.js en el directorio raíz,
el código es aproximadamente el siguiente:
luego, cuando solicite la interfaz, use /api/xx y el proxy se usará automáticamente.
const {
createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {
app.use(
'/api',
createProxyMiddleware({
target: 'http://localhost:8000',
changeOrigin: true,
// pathRewrite: {
// '^/api': '/',
// },
})
);
};
Configurar axios:
1. Instalar axios
cnpm install axios --save
2. Cree un nuevo archivo request.js en src/utils (si no hay utils, cree un nuevo directorio y luego cree un request.js)
3. El código de solicitud es el siguiente:
Esta es la configuración más simple. Puede configurar la solicitud de interceptación según sus propias necesidades.
import axios from 'axios'
// axios的配置文件, 可以在这里去区分开发环境和生产环境等全局一些配置
const devBaseUrl = 'http://api.k780.com/'
const proBaseUrl = 'http://xxxxx.com/'
// process.env返回的是一个包含用户的环境信息,它可以去区分是开发环境还是生产环境
export const BASE_URL = process.env.NODE_ENV === 'development' ? devBaseUrl : proBaseUrl
export const TIMEOUT = 5000
var request = axios.create({
baseURL:BASE_URL,//基准地址
timeout:TIMEOUT
})
//拦截请求
request.interceptors.request.use((config)=>{
return config
})
//拦截响应
request.interceptors.response.use((response)=>{
return response
},function (error){
//对响应的错误做点什么
return Promise.reject(error);
}
)
export default request;
Configure su propio paquete web sin exponer eject:
- Descargue reaccionar-app-rewired y personalizar-cra-5
npm install react-app-rewired customize-cra-5 --save-dev
2. Cree un archivo config-overrides.js en el directorio raíz del proyecto.
Por ejemplo, al configurar menos, se recomienda consultar la configuración de menos anterior:
const {
override, addLessLoader, addPostcssPlugins } = require("customize-cra-5");
module.exports = override(
addLessLoader({
lessOptions:{
javascriptEnabled: true,
modifyVars: {
'@primary-color': '#1DA57A' }, // 你的主题色
},
})
);
Por ejemplo: cargar antd bajo demanda (carga bajo demanda)
Nota: No es necesario configurar antd-mobile para cargar
antd-mobile manualmente bajo demanda.
De hecho, la versión superior de antd también viene con carga bajo demanda y no necesita ser configurada (el siguiente código es solo una demostración Si tiene otras bibliotecas de interfaz de usuario o complementos, debe cargarlos a pedido. Puede seguir los pasos a continuación): el
enlace oficial de antd se carga a pedido
Es necesario configurar después de instalar cnpm babel-plugin-import
const {
override,
addLessLoader,
addPostcssPlugins,
fixBabelImports,
} = require("customize-cra-5");
module.exports = override(
// addPostcssPlugins([require("autoprefixer")]), //自动给样式加浏览器前缀 不过 cra自带了所以可以不用这个
// addLessLoader({
// lessOptions:{
// javascriptEnabled: true,
// modifyVars: { '@primary-color': '#1DA57A' }, // 你的主题色
// },
// })
// 针对antd-mobile 实现按需打包：根据import来打包 (使用babel-plugin-import)
fixBabelImports("import", {
libraryName: "antd",
libraryDirectory: "es",
style: true, //自动打包相关的样式 默认为 style:'css'
}),
);
Por ejemplo: el alias de ruta src se escribe como @/xxx
const {
override,
addLessLoader,
addPostcssPlugins,
fixBabelImports,
addWebpackAlias
} = require("customize-cra-5");
const path = require('path')
addWebpackAlias({
'@': path.resolve('src')
}),
Luego puedes usar @ para introducir archivos en src.
Por ejemplo, presentando px2rem (aunque está escrito oficialmente de esta manera, no me funciona):
En este momento, no he encontrado ninguna solución a los problemas (2023-09-28, tal vez la haya en el futuro, porque mi proyecto es urgente, debo usar la operación rem de conversión de px para adaptarme al móvil h5)
addPostcssPlugins([require("postcss-px2rem")({
remUnit: 37.5 })])
Parte del contenido se refiere a la API de la solución de adaptación de terminal móvil React
personalizar-cra-5, puedes consultar la documentación en github.
