Сократить пути импорта ES2015

Question

Я работаю над большим проектом ES2015, который имеет множество операторов импорта, ссылающихся на библиотеку в глубокой структуре каталога. В настоящее время импорт принимает форму

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

Есть ли какие-либо обходные пути, чтобы сократить длину импорта путей, кроме изменения расположения исходных файлов?

Редактировать: Я использую babel-loader с webpack для компиляции модулей.

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 делает this.

/** 
* @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"

Answer 3

Другая возможность resolveModuleSource вариант Бабеля, но учтите, что он может быть настроен только программно, а не через .babelrc, и только для применения к синтаксису модуля, составленному Babel. Так, например, если вам нужно ссылаться на lib из кода, который не является модульным синтаксисом, скомпилированным Babel, это может способствовать его использованию через bundler (Webpack) или путем помещения lib в node_modules (неважно, что вы не публикуете это к npm), как другие предложили в комментариях.

Обратите внимание, что если вы сделаете это через комплект, это будет работать только в комплекте, а не для запуска кода в узле напрямую/с помощью привязки к Babel. Поэтому рассмотрим, например, как вы будете тестировать этот код. Собираетесь ли вы собирать тесты? Возможно, вы захотите использовать несколько из этих вариантов в комбинации или в разных контекстах.