缩短ES2015导入路径

Question

我正在处理一个大型ES2015项目，该项目具有许多导入语句，这些语句引用了深层目录结构中的库。 目前，进口采取的形式是

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

除了更改源文件的位置以外，是否有其他解决方法可以缩短导入路径的长度？

编辑：我使用带有webpack的babel-loader来编译模块。

Answer 1

您还可以使用resolve.alias处理可能移动的根：

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

然后可以将其用作：

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

Answer 2

一种常见的模式是拥有一个文件，该文件可以导入相似上下文的所有组件，然后将其全部导出。 然后，您可以从树中更高级别的单个文件中import 。 例如， Angular2执行此操作 。

/**
 * @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';

如您所见，例如，不必import {Foo} from './src/core/platform_common_providers' import {Foo} from "angular2/core"您只需import {Foo} from "angular2/core"

Answer 3

另一种可能性是Babel的resolveModuleSource选项，但是请注意，它只能以编程方式配置，而不能通过.babelrc进行配置，并且仅适用于Babel编译的模块语法。 因此，例如，如果您需要引用不是由Babel编译的模块语法的代码中的lib，则可能更喜欢通过捆绑程序（Webpack）或通过将lib放入node_modules （这并不重要，因为您没有发布到npm），就像其他人在评论中建议的那样。

请注意，如果通过捆绑程序执行此操作，则只能在捆绑输出中使用，不适用于直接在Node中运行代码/使用Babel的require挂钩。 因此，请考虑例如如何测试此代码。 您要捆绑测试吗？ 您可能要组合或在不同的上下文中使用这些选项中的几个。