更多

Question

我可以在大型项目中使用类似命名空间的内容进行导入吗？

例如，而不是

import {formatNumber} from '../../../utils/formatters'

我可以用

import {formatNumber} from utils.formatters

我认为它可以简化项目结构的未来变化，当我移动一些组件时，不必寻找相对的改变路径。

我该如何解决这个问题？

Answer 1

当我移动一些组件而不必寻找改变的相对路径时

使用TypeScript的FWIW将是一个编译错误（您可以使用路径完成https://basarat.gitbooks.io/alm/content/features/autocomplete.html#path-completions之类的东西轻松修复），因此您比使用纯JavaScript更好。

我可以在我的大型项目中使用类似命名空间的内容进行导入

没有。目前，它需要手动管理文件排序，这很快就会变成一种痛苦：https://github.com/TypeStrong/atom-typescript/blob/master/docs/out.md

更多

拥有相对文件路径确实很痛苦。但这就是一些JavaScript模块系统的工作方式（尤其是nodejs）。

Answer 2

我建议采用名为＆＃34; Barrels＆＃34; （doc链接来自angular2但它是一般概念）

https://angular.io/docs/ts/latest/guide/style-guide.html#!#create-and-import-barrels

因此，在全局文件夹级别创建一个包含所有这些链接的文件（并且只保留对那里的每个文件的引用）

export * from './config';
export * from './entity.service';
export * from './exception.service';
export * from './filter-text';
export * from './init-caps.pipe';
export * from './modal';
export * from './nav';
export * from './spinner';
export * from './toast';

稍后文件夹结构中深 ，只需保留对此文件的引用...

你可以拥有更多，甚至使用某种内部子命名空间。例如。这是root / global＆＃39; ng.ts＆＃39;

的示例

// Detail
export * from "@angular/core";

import * as common from "@angular/common";
import * as http from "@angular/http";
import * as upgrade from "@angular/upgrade";
import * as platform from "@angular/platform-browser-dynamic";

// with sub namespaces
export { common, http, platform, upgrade };

然后这是有效的

import * as ng from "../../../ng";

@ng.Component(... // root is 'core'
...
let control = new ng.common.Control(); // 'common' is nested as common

对于使用TypeScript编写的项目，使用变量而不是字符串和相对路径

2 个答案:

更多