Actualmente estoy jugando con React Native. Estoy tratando de estructurar mi aplicación, sin embargo, está empezando a complicarse con las importaciones.
--app/ -- /components -- Loading.js -- index.ios.js Ahora, dentro de mi index.ios.js puedo simplemente hacer:
import Loading from './components/Loading';
Sin embargo, cuando empiezo a crear más componentes, con una estructura de directorios más profunda, empieza a complicarse:
import Loading from '.../../../../components/Loading';
Entiendo que la solución preferida sería hacer módulos npm privados para las cosas, pero eso es excesivo para un proyecto pequeño.
Podría hacer una solución de tipo global.requireRoot en el navegador, pero ¿cómo implemento esto con la importación?
Tuve el mismo problema con React. Así que escribí un complemento para babel que hace posible importar los módulos desde la perspectiva raíz (las rutas no son más cortas), pero está claro lo que importa.
Así que en lugar de:
import 'foo' from '../../../components/foo.js';Puedes usar:
import 'foo' from '~/components/foo.js';La documentación de reacción explica cómo hacerlo: https://create-react-app.dev/docs/importing-a-component/#absolute-imports
simplemente agregue un jsconfig.json en la raíz de su proyecto:
{ "compilerOptions": { "baseUrl": "src" }, "include": ["src"] }Si está utilizando Webpack, puede configurarlo a través de la propiedad de resolución para resolver su ruta de importación.
paquete web 1
resolve: { root: [ path.resolve(__dirname + '/src') ] }......paquete web 2
resolve: { modules: [ path.resolve(__dirname + '/src'), path.resolve(__dirname + '/node_modules') ] }.....Después de eso puedes usar
import configureStore from "store/configureStore";en vez de:
import configureStore from "../../store/configureStore";Webpack configurará su ruta de importación desde el parámetro de resolución pasado.
Lo mismo que puede hacer con el cargador System.js pero con su propio parámetro de configuración (puede ser un mapa o una ruta . Compruébelo en la documentación de System.js) (si desea usarlo. Es principalmente para un caso Angular 2 . Pero sugiero: no use System.js estándar incluso si está trabajando con ng2. Webpack es mucho mejor).