reactjs - lazy - Cómo evitar el uso de importaciones de rutas relativas(/../../../redux/action/action1) en create-react-app

reactjs code splitting

Question

He estado usando el paquete create-react-app para crear un sitio web reactivo. Estaba usando rutas relativas a lo largo de mi aplicación para importar componentes, recursos, redux, etc., por ejemplo, import action from ''../../../redux/action

He intentado usar el paquete module-alis npm pero sin éxito. ¿Hay algún complemento que pueda usar para importar según el nombre de la carpeta o el alias?

Ej., import action from ''@redux/action'' o import action from ''@resource/css/style.css''

Answer 1

Cree un archivo llamado .env en la raíz del proyecto y escriba allí:

NODE_PATH=src

Luego reinicie el servidor de desarrollo. Debería poder importar cualquier cosa dentro de src sin rutas relativas.

Nota: no recomendaría llamar a su carpeta src/redux porque ahora es confuso si redux import se refiere a su aplicación o a la biblioteca. En su lugar, puede llamar a su carpeta src/app e importar cosas desde app/...

Intencionalmente, no @redux sintaxis personalizada como @redux porque no es compatible con el algoritmo de resolución de nodos.

Answer 2

Estoy usando babel-plugin-module-resolver para mi proyecto para resolver ese problema. babel-plugin-module-resolver también es lo mismo que module-alis . Así que creo que deberías resolver el problema usando el módulo alis .

¿Porque no nos dijiste por qué fallar con el módulo-alis ? Así que no puedo mostrarte cómo solucionarlo.

¡No renuncies a tu solución mientras no sepas la razón!

Answer 3

Podemos usar la propiedad de resolución de webpack 2 en la configuración de webpack.

Ejemplo de configuración de webpack usando resolver:

Aquí componente y utils son carpetas independientes que contienen componentes React.

resolve: {
        modules: [''src/scripts'', ''node_modules''],
        extensions: [''.jsx'', ''.js''],
        unsafeCache: true,
        alias: {
            components: path.resolve(__dirname, ''src'', ''scripts'', ''components''),
            utils: path.resolve(__dirname, ''src'', ''scripts'', ''utils''),
        }
    }

Después de eso podemos importar directamente en archivos:

import UiUtils from ''utils/UiUtils'';
import TabContent from ''components/TabContent'';

Webpack 2 Resolver Referencia

Answer 4

en el archivo package.json,

Expulsa este código en el objeto de scripts como este ...

  "scripts": {
    "start": "node scripts/start.js",
    "build": "node scripts/build.js",
    "test": "node scripts/test.js --env=jsdom",
     "eject": "NODE_PATH=src/ react-scripts eject"
  },

Esto habilitará las importaciones de ruta absoluta en tu aplicación.