javascript - div - title html

La resolución requiere rutas con paquete web

Question

Todavía estoy confundido sobre cómo resolver rutas de módulos con el paquete web. Ahora escribo:

myfile = require(''../../mydir/myfile.js'') 

pero me gustaría escribir

myfile = require(''mydir/myfile.js'') 

Estaba pensando que resolve.alias puede ayudar ya que veo un ejemplo similar usando { xyz: "/some/dir" } como alias, entonces puedo require("xyz/file.js") .

Pero si configuro mi alias a { mydir: ''/absolute/path/mydir'' } , require(''mydir/myfile.js'') no funcionará.

Me siento tonto porque he leído el doc muchas veces y siento que me estoy perdiendo algo. ¿Cuál es la forma correcta de evitar escribir todo lo relativo que se requiere con ../../ etc.?

Answer 1

Webpack> 2.0

Ver la respuesta de wtk .

Webpack 1.0

Una forma más directa de hacer esto sería usar resolve.root.

http://webpack.github.io/docs/configuration.html#resolve-root

resolver.root

El directorio (ruta absoluta) que contiene sus módulos. También puede ser una matriz de directorios. Esta configuración se debe usar para agregar directorios individuales a la ruta de búsqueda.

En tu caso:

configuración de paquete web

var path = require(''path'');

// ...

  resolve: {
    root: path.resolve(''./mydir''),
    extensions: ['''', ''.js'']
  }

módulo de consumo

require(''myfile'')

o

require(''myfile.js'')

ver también: http://webpack.github.io/docs/configuration.html#resolve-modulesdirectories

Answer 2

En caso de que alguien más se encuentre con este problema, pude hacerlo funcionar así:

var path = require(''path'');
// ...
resolve: {
  root: [path.resolve(__dirname, ''src''), path.resolve(__dirname, ''node_modules'')],
  extensions: ['''', ''.js'']
};

donde mi estructura de directorio es:

.
├── dist
├── node_modules
├── package.json
├── README.md
├── src
│   ├── components
│   ├── index.html
│   ├── main.js
│   └── styles
├── webpack.config.js

Luego, desde cualquier lugar del directorio src , puedo llamar:

import MyComponent from ''components/MyComponent'';

Answer 3

Lo he resuelto con Webpack 2 de esta manera:

module.exports = {
  resolve: {
    modules: ["mydir", "node_modules"]    
  }
}

Puede agregar más directorios a la matriz ...

Answer 4

Mi peor dolor de cabeza fue trabajar sin un path de espacio de nombres. Algo como esto:

./src/app.js
./src/ui/menu.js
./node_modules/lodash/

Antes solía configurar mi entorno para hacer esto:

require(''app.js'')
require(''ui/menu'')
require(''lodash'')

Encontré mucho más conveniente evitar una ruta src implícita, que oculta información de contexto importante.

Mi objetivo es exigir así:

require(''src/app.js'')
require(''src/ui/menu'')
require(''test/helpers/auth'')
require(''lodash'')

Como puede ver, todo el código de mi aplicación vive dentro de un espacio de nombres de ruta obligatorio. Esto deja bastante claro que requieren llamadas lleva una biblioteca, código de aplicación o un archivo de prueba.

Para esto, me aseguro de que mis rutas de resolución sean solo node_modules y la carpeta de la aplicación actual, a menos que nombre su aplicación dentro de su carpeta de origen como src/my_app

Este es mi predeterminado con el paquete web

resolve: {
  extensions: ['''', ''.jsx'', ''.js'', ''.json''],
  root: path.resolve(__dirname),
  modulesDirectories: [''node_modules'']
}

Sería aún mejor si establece el entorno var NODE_PATH en su archivo de proyecto actual. Esta es una solución más universal y será útil si quiere usar otras herramientas sin paquete web: pruebas, deshierbe ...

Answer 5

No entendí por qué alguien sugirió incluir el directorio padre de myDir en modulesDirectories en el paquete web, eso debería hacer el truco fácilmente:

resolve: {
    modulesDirectories: [
      ''parentDir'',
      ''node_modules'',
    ],
    extensions: ['''', ''.js'', ''.jsx'']
  },

Answer 6

Para referencia futura, el paquete web 2 eliminó todo menos los modules como una forma de resolver los caminos. Esto significa que la root no funcionará.

https://gist.github.com/sokra/27b24881210b56bbaff7#resolving-options

La configuración de ejemplo comienza con:

{
  modules: [path.resolve(__dirname, "app"), "node_modules"]
  // (was split into `root`, `modulesDirectories` and `fallback` in the old options)

Answer 7

Si está utilizando create-react-app , simplemente puede agregar un archivo .env que contenga

NODE_PATH=src/

Fuente: https://medium.com/@ktruong008/absolute-imports-with-create-react-app-4338fbca7e3d

Answer 8

Tengo esto resuelto usando Webpack 2:

   resolve: {
      extensions: ['''', ''.js''],
        modules: [__dirname , ''node_modules'']
    }

Answer 9

modulesDirectories parece desactualizado. a partir de 2018 estaba usando esto:

module.exports = (baseConfig, env) => {
  const config = genDefaultConfig(baseConfig, env);
  config.module.rules.push({
    test: //.(ts|tsx)$/,
    loader: require.resolve(''ts-loader'')
  });
  config.plugins.push(new TSDocgenPlugin());
  config.resolve = {
    extensions: config.resolve.extensions.concat([''.tsx'', ''.ts'']),
    modules: [path.resolve(__dirname, ''src''), ''node_modules'']
  };
  return config;
};

pero todavía no funciona

Answer 10

resolve.alias debería funcionar exactamente de la manera que describiste, por lo tanto, proporciono esto como una respuesta para ayudar a mitigar cualquier confusión que pueda surgir de la sugerencia en la pregunta original de que no funciona.

una configuración de resolución como la siguiente le dará los resultados deseados:

// used to resolve absolute path to project''s root directory (where web pack.config.js should be located)
var path = require( ''path'' );
...
{
  ...
  resolve: {
    // add alias for application code directory
    alias:{
      mydir: path.resolve( __dirname, ''path'', ''to'', ''mydir'' )
    },
    extensions: [ '''', ''.js'' ]
  }
}

require( ''mydir/myfile.js'' ) funcionará como se espera. Si no es así, debe haber algún otro problema.

Si tiene varios módulos que desea agregar a la ruta de búsqueda, resolve.root tiene sentido, pero si solo desea poder hacer referencia a los componentes dentro de su código de aplicación sin rutas relativas, alias parece ser el más simple y directo. explícito.

Una ventaja importante de un alias es que le da la oportunidad de crear espacios de nombre para sus require , lo que puede agregar claridad a su código; al igual que es fácil de ver desde otros require a qué módulo se hace referencia, alias permite escribir require descriptivos que hacen obvio que necesita módulos internos, por ejemplo, require( ''my-project/component'' ) . resolve.root simplemente te coloca en el directorio deseado sin darte la oportunidad de darle más espacio de nombre.

Answer 11

Este hilo es viejo, pero como nadie ha publicado sobre require.context, voy a mencionarlo:

Puede usar require.context para configurar la carpeta para que se vea así:

var req = require.context(''../../mydir/'', true)
// true here is for use subdirectories, you can also specify regex as third param

return req(''./myfile.js'')