Сначала это были табуляции и пробелы, затем болтающиеся запятые, а теперь "входить или не входить" (в данном случае "баррель" означает "точка входа").
Я так понимаю, у вас в IDE или отладчике Chrome открыта дюжина вкладок, и все они говорят index.js (или index.ts).
Конечно, вы можете навести курсор на вкладку и использовать родительский каталог, чтобы найти ту, которая вам нужна. ищу, но это супер-раздражает.
Помимо того факта, что у вас уже может возникнуть эта проблема при поиске сверхдлинного имени компонента.component.ts и сверхдлинного имени компонента.component.scss или сервисов с похожими именами из разных не такая уж большая проблема с современными IDE.
- Webstorm, IntelliJ и Sublime достаточно умны, чтобы добавлять дополнительную информацию о пути при загрузке файлов с одинаковым именем.
- Вышеуказанные инструменты и разработчик Chrome позволяют быстро искать файл с помощью Cmd+Shift+O, Cmd+P или Cmd+O.
Рис. 1: Cmd+P — возвышенное
Поэтому, если бы я хотел отредактировать таблицу стилей для моего компонента «о», я бы набрал Cmd+O и нажал «о/ст»+Ввод, и редактор открылся бы с моим файлом, аналогичным образом я бы набрал «о/ i» для фактического компонента и «about/t» для html-шаблона. Это намного быстрее, чем сканировать вкладки или просматривать длинный список результатов поиска по запросу «компонент».
Рис. 2. Cmd+Shift+O — веб-шторм
Рис. Cmd+O — Chrome
Теперь представьте, что я хочу переименовать компонент: я выполняю глобальный поиск и замену, чтобы изменить все ссылки в файловой системе, но теперь мне также нужно изменить связанные имена файлов! К счастью, мой контроль версий обычно достаточно умен, чтобы понять, что имена файлов изменились, и может отслеживать историю коммитов.
Кроме того, хотя интерфейсы командной строки и генераторы частично избавляют от проблем с созданием шаблонов, многие из нас по-прежнему используют копирование и вставку для создания новых компонентов, затем выполняют глобальный поиск и замену. Иметь одинаковый импорт — это всего лишь одна вещь, о которой нужно беспокоиться.
@Component({ selector: ‘home’, directives: […FORM_DIRECTIVES], pipes: [], styles: [require(‘./style.scss’)], template: require(‘./template.html’) })
Это мелочи, которые складываются, например, сокращенный импорт:
import {Api} from ‘./services/api’; // ./services/api/index.ts import {Home} from ‘./components/home’; // ./components/home/index.ts and { path: ‘/my-long-pathname’, loader: () => require(‘./components/my-long-component-name’)(‘About’), name: ‘About’ } vs { path: ‘/my-long-pathname’, loader: () => require(‘./components/my-long-component-name/my-long-component-name.async’)(‘About’), name: ‘About’ }
Дополнения:
Эта статья была первоначально написана, когда Angular 2 находился в поздней бета-версии.
На момент публикации статьи Webstorm скрывает информацию о ключевом пути к каталогу на вкладке редактора (например, component/…/index.jsx). Я рекомендую использовать Tabdir и снять флажок Count from start
.
"[смотрите также]"