¿Cómo puedo usar @import para importar mis componentes en mis scripts desde otras carpetas en mi proyecto de reacción?
Por ejemplo, tengo una estructura de carpetas como esta
src | --- App.jsx | --- pages | |___ home.jsx | | --- components |__ HomeComponent.jsx¿Cómo puedo usar en home.jsx?
import HomeComponent from "@components/HomeComponent"si solo trato de importar HomeComponent de "@components/HomeComponent" de esta manera, aparece el módulo de error no encontrado.
Puede hacer una importación relativa desde pages/home.jsx como esta
import HomeComponent from "../components/HomeComponent" Aquí ../ significa que está subiendo un nivel de directorio y luego al directorio de components
También puede realizar importaciones absolutas configurando herramientas adicionales como babel o webpack. Una importación absoluta se vería así cuando haya establecido src como su directorio raíz
import HomeComponent from "components/HomeComponent" Si está utilizando create-react-app , esta configuración es fácil de hacer ya que create-react-app ya maneja todas las herramientas
Puede leer sobre esto aquí en la sección de importaciones absolutas: https://create-react-app.dev/docs/importing-a-component/
Este complemento puede simplificar las rutas de solicitud/importación en su proyecto. Por ejemplo, en lugar de usar rutas relativas complejas como ../../../../utils/my-utils , puede escribir @utils/my-utils . Te permitirá trabajar más rápido ya que no necesitarás calcular cuántos niveles de directorio tienes que subir antes de acceder al archivo.
// Use this: import MyUtilFn from 'utils/MyUtilFn'; // Instead of that: import MyUtilFn from '../../../../utils/MyUtilFn'; // And it also work with require calls // Use this: const MyUtilFn = require('utils/MyUtilFn'); // Instead of that: const MyUtilFn = require('../../../../utils/MyUtilFn');Instalar el complemento
npm install --save-dev babel-plugin-module-resolvero
yarn add --dev babel-plugin-module-resolver Especifique el complemento en su .babelrc con la raíz personalizada o el alias. Aquí hay un ejemplo:
{ "plugins": [ ["module-resolver", { "root": ["./src"], "alias": { "test": "./test", "underscore": "lodash" } }] ] } Versión .babelrc.js Especifique el complemento en su archivo .babelrc.js con la raíz personalizada o el alias. Aquí hay un ejemplo:
const plugins = [ [ require.resolve('babel-plugin-module-resolver'), { root: ["./src/"], alias: { "test": "./test" } } ] ];Buen ejemplo: https://gist.github.com/nodkz/41e189ff22325a27fe6a5ca81df2cb91