Используйте абсолютные пути в ссылках на приложения Create React

React.js

Прочтите эту статью всего за 6 минут

вместе сCreate React App 3, теперь мы можем использовать абсолютные пути при импорте компонентов или объектов (absolute import), вместо необходимостиejectпроект.

аллилуйя.

Вы можете знать об этом преимуществе без моих объяснений, но позвольте мне все же подвести итог.

  • Ввод путей стал проще, больше не требуется../../../../地狱模式
  • Ты сможешь复制/粘贴Код включает импорт в другие файлы без изменения путей ссылок
  • Вы можете перемещать файлы, не обновляя ссылочные пути (еслиIDEсделал это не для вас)
  • лаконичный

image.png

согласно софициальная документация, созданный в корневом каталоге вашего проектаjsconfig.jsonфайл и добавьте следующий код.

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}

Отлично, теперь можно пользоваться как обычно相对路径

import React from 'react';
import Button from '../../Button/Button';
import { LINKS, STRINGS } from '../../../utils/constants';
import styles from './App.module.css';

function App() {
  return (
    <div className={styles.App}>
      <Button>
        {STRINGS.HELLO}
      </Button>
      
      <a href={LINKS.HELP}>Learn more</a>
    </div>
  );
}

export default App;

В качестве альтернативы вы можете использовать绝对路径сделать все просто,

import React from 'react';
import { LINKS, STRINGS } from 'utils/constants';
import Button from 'components/Button/Button';
import styles from './App.module.css';

function App() {
  return (
    <div className={styles.App}>
      <Button>
        {STRINGS.HELLO}
      </Button>
      
      <a href={LINKS.HELP}>Learn more</a>
    </div>
  );
}

export default App;

К сожалению, официальное объяснение на этом заканчивается, но вам может потребоваться дополнительная настройка.

WebStorm config

если выWebStorm/IntelliJПользователи, вы наверняка сталкивались с такими проблемами:

image.png

WebStorm согласноNode.jsПравила предполагают абсолютный путь вnode_modules, поэтому мы должны сказать, что нам нужно быть крутыми с абсолютными путями.

Сначала настройте свойsrcкаталогResources Root.

image.png

затем выберитеSettings > Editor > Code Style > JavaScript, ВойтиImportsПроверьте под вкладкойUse paths relative to the project, resource or sources roots..

image.png

Теперь Webstorm понимает绝对路径куда указать. в то же времяjump-to-source/autocompleteЭти функции будут работать и предупреждений больше не будет, так же значитauto-importмеханизм будет использовать绝对路径.

Предположим, у нас есть такой файл:

import React from 'react';
import styles from './App.module.css';

function App() {
  return (
    <div className={styles.App}>
    </div>
  );
}

export default App;

Затем мы копируем следующий код в этот файл:

<Button>{STRINGS.HELLO}</Button>
<a href={LINKS.HELP}>Learn more</a>

После настройки Webstorm будет знать, что нам нужно<Button> , STRINGSа такжеLINKSи вставьте абсолютные ссылки пути, где это необходимо.

import React from 'react';
import styles from './App.module.css';
import Button from 'components/Button/Button';
import { LINKS, STRINGS } from 'utils/constants';

function App() {
  return (
    <div className={styles.App}>
      <Button>{STRINGS.HELLO}</Button>
      <a href={LINKS.HELP}>Learn more</a>
    </div>
  );
}

export default App;

Однако он не вставляет ссылки в нужном мне порядке,

Пакет npm --> ссылка на относительный путь

Однако, даже если мне нужно изменить порядок ссылок, это лучше, чем использование относительных путей.

VS Code  — настройка не требуется

Самоучка в VS Codejsconfig.json, когда используешь绝对路径час,jump to sourceа такжеIntellisenseДо сих пор нормально работает.

На самом деле VS Code не заботится о вашем绝对路径Устанавливает ли файл или каталог на существование, он не требует от вас какой-либо конфигурации.

аннотация На мой взгляд, по состоянию на май 2019 года в целом Webstorm по-прежнему лучше, чем VS. Код лучше, особенноgit toolsОднако в плане разрешения конфликтов, рефакторинга кода VS Code пытается догнать, и по сравнению с Webstorm открывается со скоростью света.

Заглавные буквы по соглашению

использовать в вебпаке绝对路径наверное уже давно, и используя驼峰法(PascalCase)Стало обычным называть корневой путь ссылки (вexamples from the Webpack docsЭто делается это).

Это умно, и я очень рекомендую его в вашемcodebaseсередина根目录(top-level directories)使用Верблюжий регистр `имя.

image.png

когдаComponentsа такжеUtilsНабрав заглавную первую букву, легко различить, какие ссылки являютсяnpm packages, которые являются вашим собственным исходным кодом, вы никогда неnpm packageконфликт.

Так же избегайтеsrcфайл определения в корневом каталоге , например, если вы определяетеsrc/constant.js, когда вы импортируетеimport constants from 'constants', выглядит так странно.

ESLint

CRAВ их настройке ESLint есть очень упрощенный набор правил и некоторые твердые мнения о том, почему это так. Если хотите, можете проигнорировать совет Facebook (они не знают, что такое React, и все равно 404), и использоватьAirbnbизESLintконфигурация.

Если вы это сделаете, вы обнаружите, что Airbnb используетeslint-plugin-import, он проверяет неопределенный импорт и выдает ошибку, например:

image.png

ты можешь пройтиESLintизsettingчтобы исправить это, скажите ему, что путь может быть относительноsrcиз:

"eslintConfig": {
  "extends": ["react-app", "airbnb"],
  "settings": {
    "import/resolver": {
      "node": {
        "paths": ["src"]
      }
    }
  }
},

Обратите внимание, что для этого вам не нужно устанавливать какие-либо пакеты npm,settingдостаточно.

Восстановление ясности

для нетронутых绝对路径引入Для разработчиков это может быть немного запутанным, поэтому я предлагаю добавить некоторые описания этой части в вашReadme, в том числе как установитьIDE. Вы также можете добавить ссылку на эту статью, если简书Не спускайтесь вниз, я гарантирую, что не удалю и не изменю содержание этой статьи, самое большее веб-изображение недействительно.

Конечно, стоит отметить, что нам все еще нужно использовать相对路径引入. Я думаю, что файлы в одном каталоге используют相对路径Будет удобнее внедрять, использовать绝对路径Наоборот, путь удлиняется. В то же время, я предлагаю вам посмотреть некоторые связанныеchild componentsиспользуется в相对路径引入. если у тебя есть<Dropdown>компонент и содержит<DropdownItem>компонент, также используя полный подробный绝对路径Цитировать слишком много.

Спасибо за прочтение. Если это поможет вам, пожалуйста, оставьте комментарий или лайк, большое спасибо.

Оригинальный адрес:хакер полдень.com/absolute-IM…

Спасибо оригинальному автору:David Gilbertson

Категории