llamar - incluir javascript en html5

Acortar rutas de importación ES2015

Question

Estoy trabajando en un gran proyecto ES2015 que tiene muchas declaraciones de importación que hacen referencia a una biblioteca en una estructura de directorios profunda. Actualmente, las importaciones toman la forma de

import Status from ''../../../Scripts/core/components/Status'';
//import ...

¿Hay alguna solución para acortar la longitud de las rutas de importación además de cambiar la ubicación de los archivos fuente?

editar: estoy usando babel-loader con webpack para compilar los módulos.

Answer 1

Otra posibilidad es la opción resolveModuleSource de Babel, pero tenga en cuenta que solo se puede configurar programáticamente, no a través de .babelrc , y solo se aplicará a la sintaxis del módulo compilada por Babel. Así que, por ejemplo, si necesita hacer referencia a la lib del código que no es la sintaxis del módulo compilada por Babel, eso podría favorecerlo a través del bundler (Webpack) o al poner la lib en node_modules (no importa que no esté publicando) a npm) como otros han sugerido en los comentarios.

Tenga en cuenta que si lo hace a través del bundler, eso solo funcionará en la salida incluida, no para ejecutar el código directamente en Node / usando el gancho requerido de Babel. Así que considere por ejemplo cómo probará este código. ¿Vas a agrupar las pruebas? Es posible que desee usar varias de estas opciones en combinación o en diferentes contextos.

Answer 2

También puede usar resolve.alias para manejar raíces que puedan moverse:

resolve: {
  alias: {
    importName: ''actual/path/here'',
    ''__another_alias__'': ''another/path''
  }
}

Que podrías usar como:

import someImport from ''importName'';
import anotherImport from ''__another_alias__/sub/path'';

Answer 3

Un patrón común es tener un solo archivo que importe todos los componentes de un contexto similar y luego los exporte a todos. Luego puede import desde este único archivo a un nivel mucho más alto en el árbol. Por ejemplo, Angular2 hace esto .

/**
 * @module
 * @description
 * Starting point to import all public core APIs.
 */
export * from ''./src/core/metadata'';
export * from ''./src/core/util'';
export * from ''./src/core/prod_mode'';
export * from ''./src/core/di'';
export * from ''./src/facade/facade'';
export {enableProdMode} from ''angular2/src/facade/lang'';
export {
  createPlatform,
  assertPlatform,
  disposePlatform,
  getPlatform,
  coreBootstrap,
  coreLoadAndBootstrap,
  createNgZone,
  PlatformRef,
  ApplicationRef
} from ''./src/core/application_ref'';
export {
  APP_ID,
  APP_INITIALIZER,
  PACKAGE_ROOT_URL,
  PLATFORM_INITIALIZER
} from ''./src/core/application_tokens'';
export * from ''./src/core/zone'';
export * from ''./src/core/render'';
export * from ''./src/core/linker'';
export {DebugElement, DebugNode, asNativeElements} from ''./src/core/debug/debug_node'';
export * from ''./src/core/testability/testability'';
export * from ''./src/core/change_detection'';
export * from ''./src/core/platform_directives_and_pipes'';
export * from ''./src/core/platform_common_providers'';
export * from ''./src/core/application_common_providers'';
export * from ''./src/core/reflection/reflection'';

Como puede ver, en lugar de tener que import {Foo} from ''./src/core/platform_common_providers'' por ejemplo, simplemente import {Foo} from "angular2/core"