He estado usando create-reaccionar-paquete de la aplicación para la creación de un reaccionan sitio web. Yo estaba usando rutas relativas a lo largo de mi aplicación para la importación de componentes, recursos, redux, etc. por ejemplo, import action from '../../../redux/action

He intentado usar módulo-alis mecanismo nacional de prevención paquete pero sin éxito. ¿Hay algún plugin que pueda utilizar para importar basándose en el nombre de la carpeta o el alias?

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

OriginalEl autor Prem | 2017-07-20

4 Comentarios

  1. 68

    Crear un archivo llamado .env en la raíz del proyecto y escribir allí:

    NODE_PATH=src

    A continuación, reinicie el servidor de desarrollo. Usted debe ser capaz de importar nada dentro de src sin rutas de acceso relativas.

    Nota, yo no recomendaría a llamar a su carpeta src/redux porque ahora es confuso si redux de importación se refiere a la aplicación o en la biblioteca. En lugar usted puede llamar a su carpeta src/app de importación y cosas de app/....

    Intencionalmente no apoyo personalizado sintaxis como @redux porque no es compatible con el Nodo algoritmo de resolución.

    Puedo hacer esto en reaccionar-crear-app? He intentado, pero parece que no funciona, aunque el chico de aquí, medium.com/@ktruong008/… sugieren la misma
    sí a mí me funciona con crear-reaccionar-app
    ¿cuál es tu versión de crear-reaccionar-app y reaccionar-scripts?
    crear-reaccionar-app-1.4.3 & reaccionar-scripts-1.0.14
    Esto funciona en la última versión de reaccionar de secuencias de comandos

    OriginalEl autor Dan Abramov

  2. 1

    Podemos utilizar webpack 2 resolver la propiedad en el webpack config.

    Muestra webpack config utilizando resolver :

    Aquí componente y utils son independientes de la carpeta que contiene Reaccionar componentes.

    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 que podemos importar directamente en los archivos :

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

    Webpack 2 Resolver Referencia

    Yo uso crear-reaccionar-paquete de la aplicación donde puedo modificar el webpack config. ¿Hay alguna otra forma de hacerlo?
    webpack.config.js está disponible en la siguiente ruta de acceso : /create-react-app/blob/master/packages/react-scripts/config/webpack.config.dev.js /create-react-app/blob/master/packages/react-scripts/config/webpack.config.prod.js
    No, no es posible modificar estas configuraciones. Puede expulsar, pero entonces pierden muchos beneficios de la CRA. Por favor vea mi respuesta para que se admita un modo de hacer esto.

    OriginalEl autor santosh

  3. 1

    Estoy usando babel-plugin-módulo de resolución de para mi proyecto para resolver ese problema.
    babel-plugin-módulo de resolución de también es el mismo como módulo-alis. Así que creo que sólo debería resolver utilizando módulo-alis problema.

    Porque no nos dicen por qué utilizar módulo-alis fue no? Por lo que no puedo mostrar cómo solucionarlo.

    No renunciar a su solución, mientras que usted no sabe la razón!

    Esto no funcionará con Crear Reaccionar de la Aplicación. No apoyo personalizado Babel plugins.

    OriginalEl autor Quang Noi Truong

  4. 1

    en el paquete.archivo json,

    de expulsión de este código en las secuencias de comandos objeto 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 permitirá que la ruta de acceso absoluta de las importaciones en su aplicación

    Esto me dio un plomo de cómo solucionar los problemas de nuestro «reaccionar-scripts de compilación». Ver mi comentario en @dan-abramov ‘s respuesta (stackoverflow.com/a/45214138/2986873). Gracias!

    OriginalEl autor parag patel

Dejar respuesta

Please enter your comment!
Please enter your name here