Saltar al contenido

Hacer rutas absolutas relativas a la raíz del proyecto en Webpack

Solución:

los resolve.root la opción no modificar cómo se resuelven los módulos de archivo.

Un módulo obligatorio con el prefijo “https://foroayuda.es/” es una ruta absoluta al archivo. Por ejemplo, require (‘/ home / marco / foo.js’) cargará el archivo en /home/marco/foo.js.

los / se resuelve en la raíz de su sistema de archivos.

Quizás lo que quieras es resolver tu js carpeta como directorio de módulos.

webpack.config.js

resolve: {
  root: path.resolve('./js')
}

Con esta configuración agregada a su archivo de configuración, le indicará a webpack que resuelva cualquier import o require relativo a tu js carpeta. Entonces, en lugar de usar

import foo from '../actions/fooAction'

usted será capaz de:

import foo from 'actions/fooAction`

Cuidado con la falta de / al principio.

Voy a responder a esto de manera ligeramente diferente sin usar resolve.root. Todo lo que dijo @dresyecat es correcto. Sin embargo, acabo de realizar el mismo ejercicio de pasar de rutas relativas en todas partes a rutas de módulos. Aquí está el documento que explica los tres tipos diferentes de rutas que puede usar en la declaración de importación.

Está pidiendo utilizar una ruta de módulo, que creo que es la forma preferida de hacerlo.

El problema es que, de forma predeterminada, las rutas de los módulos solo funcionan con cosas importadas a través de npm porque el nuevo modulos variable en resolver por defecto a [“node_modules”]. Esto le permite importar código de terceros desde npm con mucha facilidad. Pero significa que la importación de su código con una ruta de módulo necesita un cambio de configuración. Por cierto, el modulos solía ser llamado moduleDirectories en versiones anteriores. Aquí están los documentos para la configuración de la variable de resolución.

Ok, asumiendo que tienes una estructura de directorio como esta:

project/
    webpack.config.json
    js/
        components
        actions

Puede configurar el directorio de módulos para que sea:

resolve: {
    extensions: [ '.ts', '.js', '*' ],
    modules: [ path.resolve(__dirname, "js"), "node_modules"]
}

Un par de puntos importantes:

  • Asegúrese de incluir los “node_modules” si está utilizando npm para extraer código de terceros, o sus importaciones comenzarán a fallar
  • Asegúrese de importar el componente de ruta en su configuración para que la ruta esté definida

    var ruta = require (‘ruta’);

Luego, puede usar lo siguiente (como se señaló, sin el / inicial) para importar sus componentes usando el formulario de ruta del módulo:

import "actions/fooAction";
¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)


Tags : /

Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *