Знания о пряже, которые должны знать фронтенд-инженеры

внешний интерфейс Yarn

Пряжа — неотъемлемый инструмент в работе, но на работе многие в основном используют толькоyarn install, и будет удалено вручнуюnode-modulesили удалитьyarn.lockНестандартные операции, такие как файлы. Эта статья начнется с некоторых базовых знаний и постепенно сообщит вамYarnСуществует более глубокое понимание, чтобы обеспечить спецификацию использования пряжи и избежать некоторых скрытых ошибок.
В этой статье в основном представлены следующие знания:

  1. что такое реестр
  2. Значение и написание зависимой версии
  3. Типы зависимостей и различия (devDependences,devDependences,peerDependences,optionalDependencies,bundledDependencies)
  4. Введение в кэширование
  5. yarn.lockФункция файла и введение
  6. yarn installПроцесс установки зависимостей
  7. Модуль выравнивания деревьев зависимостей
  8. общийyarnВведение в команду

что такое реестр

registryДа Репозиторий модулей предоставляет службу запросов, которую мы часто называем источником. В качестве примера возьмем официальный зеркальный источник пряжи, его URL-адрес службы запросовhttps://registry.yarnpkg.com.

Следуйте этому URL-адресу с именем модуля, и вы получите объект JSON с информацией обо всех версиях модуля. Например, посетитеhttps://registry.npmjs.org/vue, вы увидите информацию обо всех версиях модуля vue.

После имени модуля URL-адреса реестра вы также можете указать номер версии или метку, чтобы запросить информацию о конкретной версии.https://registry.yarnpkg.com/vue/2.6.10

В объекте JSON, возвращенном выше, есть свойство dist.tarball, которое является URL-адресом сжатого пакета этой версии. Свойство dist.shasum эквивалентно хеш-значению, которое используется в блокировке и кэше, о чем будет сказано ниже.

dist: {
  "shasum": "a72b1a42a4d82a721ea438d1b6bf55e66195c637",
  "tarball":"https://registry.npmjs.org/vue/-/vue-2.6.10.tgz"
},

мы выполняемyarn installкогдаregistryЗапрос, чтобы получить указанный выше адрес сжатого пакета для загрузки.
На работе у нас могут быть сценарии, в которых нам нужно изменить зеркальный источник, например, изменить его на источник Taobao или частный источник нашей собственной компании.
Просмотрите и установите источники, что можно сделать с помощью команды yarn config.
Просмотр используемых в настоящее время зеркальных источников

yarn config get registry

Измените источник зеркала (в качестве примера возьмем изменение источника Taobao)

yarn config set registry https://registry.npm.taobao.org/

Версия зависимости

соответствие пакета пряжиsemver, семантическая версия. SemVer — это набор соглашений о семантическом контроле версий, определенных в формате

X.Y.Z（主版本号.次版本号.修订号）：
X.主版本号：进行不向下兼容的修改时，递增主版本号
Y.次版本号: 做了向下兼容的新增功能或修改
Z.修订号：做了向下兼容的问题修复

yarnСуществует несколько способов представления диапазона версий зависимостей:

  1. через компаратор
выражать Описание значения
<2.0.0 Любая версия ниже 2.0.0
<=3.1.4 Любая версия ниже или равная 3.1.4
>0.4.2 Любая версия выше 0.4.2
>=2.7.1 Любая версия больше или равна 2.7.1
=4.6.6 Любая версия, равная 4.6.6
>=2.0.0 <3.1.4 Пересечение больше или равно 2.0.0 и меньше 3.1.4
<2.0.0 || >3.1.4 Союз Меньше 2.0.0 или больше 3.1.4

Если оператор не указан, по умолчанию используется =

  1. через дефис
выражать Описание значения
2.0.0 - 3.1.4 >=2.0.0 <=3.1.4
0.4 - 2 >=0.4.0 <=2.0.0

Те части номера версии, которые отсутствуют, заполняются цифрой 0.

  1. X диапазон
    Символы X, x или * можно использовать в качестве подстановочных знаков для частичного или полного заполнения номера версии. Пропущенная часть номера версии по умолчанию соответствует диапазону x.
выражать Описание значения
* >=0.0.0 (любая версия)
2.x >=2.0.0
3.1.x >= 3.1.0
`` (пустая строка) * или >= 0.0.0
2 2.х.х или >= 2.0.0
3.1 3.1.x или >= 3.1.0
  1. ~ диапазон символов
    Используйте символы ~ вместе с младшим номером версии, чтобы разрешить修订号изменять. Используйте символы ~ вместе с основным номером версии, чтобы указать, что это разрешено.次版本изменение номера.
выражать Описание значения
~3.1.4 >=3.1.4 <3.2.0
~3.1 3.1.x или >= 3.1.0
~3 3.x или >= 3.0.0
  1. ^ диапазон символов
    Символ ^ указывает, что первая ненулевая цифра в номере версии, 3 в 3.1.4 или 4 в 0.4.2, не будет изменена. Отсутствующие части номера версии будут дополнены нулями, и эти позиции могут изменяться при сопоставлении.
выражать Описание значения
^3.1.4 >=3.1.4 <4.0.0
^0.4.2 >=0.4.2 <0.5.0
^0.0.2 >=0.0.2 <0.0.3

использоватьyarn add [package-name]Команда устанавливает зависимости, используя по умолчанию диапазон ^.
Обратите внимание, что если компаратор содержит версии с тегом pre-release, он будет сопоставлять только версии с тем же самым major.minor.patch. Например>=3.1.4-beta.2, может соответствовать3.1.4-beta.3, но не совпадет3.1.5-beta.3Версия.

Тип зависимости

dependencesЗависимости, необходимые для выполнения кода, такие как vue, vue-router.

devDependencesЗависимости разработки — это те зависимости, которые необходимы только в процессе разработки и не нужны во время выполнения, например, babel и webpack.

peerDependencesСопутствующие зависимости, которые используются, чтобы сообщить хост-среде, какие зависимости требуются, и диапазоны версий зависимостей.
Если в хост-среде нет соответствующей версии зависимости, при установке зависимости будет выдано предупреждение.
такие как пакетыeslint-plugin-importЕсть зависимости:

 "peerDependencies": {
    "eslint": "2.x - 5.x"
  },

Во время установки, если среда хоста не2.x-5.xверсияeslint, cli выдаст предупреждение. Но он не установит его для нас автоматически, и его все равно нужно установить вручную.

optionalDependenciesНеобязательная зависимость, даже если установка завершится неудачно, Yarn будет считать весь процесс установки зависимостей успешным.
Необязательные зависимости предназначены для тех случаев, когда есть запасной вариант, даже если необязательные зависимости не установлены успешно.

bundledDependenciesЗависимости упаковки.При публикации пакетов пакеты в этом массиве будут упакованы и упакованы в окончательный пакет выпуска.Обратите внимание, чтоbundledDependenciesПакеты в должны быть объявлены в devDependencies или зависимостях.

тайник

yarnУстановленный пакет будет закэширован, так что при повторной установке того же пакета его не нужно скачивать, а нужно копировать прямо из закешированного файла.

по командеyarn cache dirПросмотр каталога глобального кеша пряжи. мой каталог кеша находится в/Library/Caches/Yarn/v1Вниз.

Как можно видеть,yarnРаспакованные пакеты разных версий будут храниться в разных каталогах, и каталоги будут начинаться с

npm-[package name]-[version]-[shasum]`

называть. шасум вышеregistryприобретенныйdist.shasum.

Мы можем просмотреть кешированные пакеты с помощью команды.

yarn cache list    列出已缓存的每个包

yarn cache list --pattern <pattern>  列出匹配指定模式的已缓存的包

например, выполнитьyarn cache list --pattern vue

yarn.lock

yarn.lockКонкретная информация о версии каждой зависимости будет точно храниться на сервере, чтобы гарантировать получение одинаковых результатов при установке на разных компьютерах.

Давайте возьмем @babel/code-frame в качестве примера, чтобы увидеть, какая информация записывается в yarn.lock.

  1. Первая строка"@babel/code-frame@7.0.0-beta.54"Имя и номер пакета, определенные в package.json.
  2. versionполе, которое записывает точную версию.
  3. resolvedПоле записывает URL-адрес пакета. Среди них хэш-значение, то есть указанное вышеdist.shasum.
  4. dependenciesПоле записывает зависимости текущего пакета, то есть текущий пакет находится вpackage.jsonизdependenciesВсе зависимости в поле.

YarnВо время установки только текущий проектyarn.lockфайл (т.е. файл верхнего уровняyarn.lockфайл), будут игнорировать любые зависимости вyarn.lockдокумент. на вершинеyarn.lockсодержит всю информацию обо всех версиях пакетов во всем дереве зависимостей, которые необходимо заблокировать.

yarn.lockфайлы создаются во время установкиYarnОн автоматически генерируется и управляется yarn.Его нельзя изменять вручную, а файл yarn.lock не следует удалять.Он должен быть отправлен в систему контроля версий, чтобы избежать проблем, вызванных несовместимостью версий пакетов, установленных на разных машинах.

Процесс установки пряжи

первое исполнениеyarn installустановка, буду следоватьpackage.jsonСемантическое управление версиями в , гдеregistryЗапросите и получите последний пакет зависимостей, соответствующий правилам загрузки, и постройте дерево зависимостей. например, вpackage.jsonВерсия vue, указанная в^2.0.0, вы получите2.x.xСамая высокая версия пакета. затем автоматически генерироватьyarn.lockфайл и создать кеш.

выполнить позжеyarn install, будем сравниватьpackage.jsonдиапазон версий средней зависимости иyarn.lockПроверьте, совпадают ли номера версий.

  1. номер версии совпадает, будет основываться наyarn.lockсерединаresolvedполе для просмотра кэша, если кэш есть, копировать напрямую, если кэша нет, следуйте инструкциямresolvedURL-адрес поля для загрузки пакета.
  2. Номера версий не совпадают, согласноpackage.jsonДиапазон версийregistryЗапросите, загрузите последний пакет, соответствующий правилам версии, и обновите доyarn.lockсередина.

сплющивание модуля

Как упоминалось выше, при установке зависимостей анализируются зависимости для построения дерева зависимостей. Например, зависимости первого уровня моего проекта (то есть зависимости в зависимостях текущего проекта и devDependences, за исключением зависимостей) включают в себя три пакета: A, B и C. Пакеты A и B зависят от пакета D в одном и том же диапазон версий. Тогда дерево зависимостей для этой части выглядит так:

├── A    				
│ └── D    
├── B    				
│ └── D  
├── C

При установке непосредственно в соответствии с таким деревом зависимостей модуль D будет находиться в пакете A и пакете B.node_modulesустановлены в обоих, что приведет к избыточности модулей.

Чтобы в дереве зависимостей не было большого количества повторяющихся модулей, при установке yarn выполнит операцию дедупликации, обойдёт все узлы и поместит модули один за другим под корневым узлом, который является текущим узлом проекта.node-modulesсередина. Когда такой же модуль будет найден, он будет оценивать указанный модуль текущего модуля.semverПересекается ли диапазон версий, если да, то сохраняется только совместимая версия, если нет, то она находится в текущем пакетеnode-modulesУстановите ниже.
Таким образом, в случае, упомянутом выше, окончательная установка выглядит следующим образом: пакеты A, B, C, D будут установлены на первом уровне.node-modulesВниз.

├── A    				
├── B    				
├── C 
├── D

Если пакет A и пакет B зависят от несовместимых версий, предполагается, что пакет A зависит от версии D@1, а пакет B зависит от версии D@2. Окончательный результат установки выглядит следующим образом:

├── A    				
├── B    
│ └── D@2 
├── C 
├── D@1

когда кодrequireилиimportКогда модульpackageизnode-modulesНачни искать внутри, если не найдешь, переходи на предыдущий уровень текущего пакетаnode-modulesИщите здесь, чтобы всегда можно было найти глобальные node_modules. Таким образом, древовидная структура приведенной выше установки может гарантировать, что каждыйpackageТребуемая версия пакета может быть получена.

Общие команды пряжи

  1. пряжа установить установить зависимости
yarn install / yarn  在本地 node_modules 目录安装 package.json 里列出的所有依赖
yarn install --force 重新拉取所有包，即使之前已经安装的（所以以后别在删除node-modules了...）
yarn install --modules-folder <path> 为 node_modules 目录指定另一位置，代替默认的 ./node_modules
yarn install --no-lockfile 不读取或生成 yarn.lock 文件
yarn install --production[=true|false] / --production / --prod 只安装 dependence下的包，不安装 devDependencies 的包
  1. yarn add
yarn add package-name 会安装 latest 最新版本。
yarn add <package...>  安装包到dependencies中
yarn add <package...> [--dev/-D]  用 --dev 或 -D 安装包到 devDependencies
yarn add <package...> [--peer/-P]  用 --peer 或者 -P 安装包到 peerDependencies
yarn add <package...> [--optional/-O] 用 --optional 或者 -O 安装包到 optionalDependencies 
yarn add <package...> [--exact/-E] 用 --exact 或者 -E 会安装包的精确版本。默认是安装包的主要版本里的最新版本。 比如说， yarn add foo@1.2.3 会接受 1.9.1 版，但是 yarn add foo@1.2.3 --exact 只会接受 1.2.3 版。
yarn add <package...> [--tilde/-T]  用 --tilde 或者 -T 来安装包的次要版本里的最新版。 默认是安装包的主要版本里的最新版本。 比如说，yarn add foo@1.2.3 --tilde 会接受 1.2.9，但不接受 1.3.0。
  1. пряжа config управлять файлами конфигурации
yarn config get <key> 查看配置key的值
yarn config list 查看当前的配置
yarn config delete <key> 从配置中删除配置key
yarn config set <key> <value> [-g|--global] 设置配置项 key 的值为 value
  1. Другие общие команды
yarn list 查询当前工作文件夹所有的依赖
yarn info <package> [<field>]  查看包信息，可以查看特定
yarn remove <package...>  从依赖里移除名包，同时更新你 package.json 和 yarn.lock 文件。
yarn <script> [<args>] 执行用户自定义的脚本
  1. режим подробного журнала При запуске команды yarn добавьте параметры--verbose, что полезно при устранении неполадок
yarn <command> --verbose

Может распечатать детали выполнения (созданные каталоги, скопированные файлы или HTTP-запросы и т. д.)

Добро пожаловать в мой публичный аккаунт "Front-end Xiaoyuan", я буду регулярно обновлять на нем оригинальные статьи.

Категории