Откройте для себя package.json заново

JavaScript
Откройте для себя package.json заново

Предисловие 🤔

  • В корневом каталоге каждого проекта обычно находитсяpackage.jsonФайл, который определяет различные зависимости и информацию о конфигурации проекта (например, имя, версию, лицензию и т. д. метаданные), необходимые для запуска проекта.
  • большинство людей правыpackage.jsonПонимание файла остается только на:
    • Определение имени проекта, версии сборки проекта, лицензии;
    • Определения зависимостей (включаяdependenciesполе,devDependenciesполе);
    • использоватьscriptsполе указываетnpmАббревиатура командной строки.
  • фактически,package.jsonРоль гораздо больше.Мы можем добиться более мощных функций, добавляя новые элементы конфигурации.Следующее приведет вас к новому пониманию.package.json.

От простого к сложному, обогащайте package.json проекта

Простая версия Package.json

  • Когда мы создаем новое имя какmy-testпредметы, использоватьyarn init -yилиnpm init -yПосле команды в каталог проекта добавится новыйpackage.jsonфайл со следующим содержимым:
{
  "name": "my-test", # 项目名称
  "version": "1.0.0", # 项目版本（格式：大版本.次要版本.小版本）
  "description": "", # 项目描述
  "main": "index.js", # 入口文件
  "scripts": { # 指定运行脚本命令的 npm 命令行缩写
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [], # 关键词
  "author": "", # 作者
  "license": "ISC" # 许可证
}
  • можно увидеть,package.jsonСодержание файла являетсяJSONОбъект, каждый член объекта является конфигурацией текущего проекта.

Обязательные атрибуты (имя и версия)

  • package.jsonЕсть много элементов конфигурации, и два поля, которые необходимо заполнить, этоnameполя иversionполя, они состоят изnpmУникальный идентификатор модуля.

поле имени

  • nameПоле определяет имя модуля, и его наименование должно соответствовать некоторым официальным спецификациям и рекомендациям:
    • Имя модуля станет модулемurl, аргумент в командной строке или имя папки, любое неurlБезопасные символы не допускаются в именах модулей (мы можем использоватьvalidate-npm-package-namepackage, чтобы определить, допустимо ли имя модуля);
    • Имена семантических модулей могут помочь разработчикам найти необходимые модули быстрее и избегайте случайного приобретения неправильного модуля;
    • Если в имени модуля есть некоторые символы, символы не должны повторяться с существующим именем модуля после удаления их, например: посколькуreact-router-domуже существует,react.router.dom,reactrouterdomбольше не может быть создан.
  • nameПоля не могут дублироваться с другими именами модулей, мы можем выполнить следующую команду, чтобы увидеть, использовалось ли уже имя модуля:
npm view <packageName>
  • Если модуль существует, вы можете просмотреть некоторую основную информацию о модуле:
  • Если имя модуля никогда не использовалось, будет выдана ошибка 404:
  • Или мы также можем пойтиnpmВведите имя модуля выше, если вы не можете его найти, вы можете использовать имя модуля.

поле версии

  • npmВсе версии модулей в пакете должны следоватьSemVerспецификации, номер стандартной версии этой спецификации принимаетX.Y.Zформат, гдеX,Yа такжеZВсе неотрицательные целые числа, и заполнение нулями перед числами запрещено:
    • Xномер основной версии (major): модифицированный несовместимый API
    • YЭтот номер версии (дополнительный): добавлена ​​обратная совместимость.
    • ZДля номера ревизии (патча): исправлена ​​проблема обратной совместимости
  • Если версия содержит серьезные изменения, нестабильна и может не соответствовать ожидаемым требованиям совместимости, мы можем сначала выпустить предварительную версию.
  • Упреждающий номер версии может быть добавлен к主版本号.次版本号.修订号позади, через-Номер объединяет последовательность идентификаторов, разделенных точками, и информацию о сборке версии:
    • Внутренняя версия (альфа)
    • Публичная бета-версия (beta)
    • Версия-кандидат rc официальной версии (т.е. Кандидат на выпуск)
  • Мы можем проверить версию модуля, выполнив следующую команду:
npm view <packageName> version # 查看某个模块的最新版本
npm view <packageName> versions # 查看某个模块的所有历史版本

  • ПроверитьantdПоследняя версия:

  • ПроверитьantdВсе исторические версии:

  • можно увидеть,antdстрого в соответствии сSemVerВерсия выпущена в соответствии со спецификацией, а номер версии строго в соответствии с主版本号.次版本号.修订号Формат именуется и строго инкрементируется, когда выпущенная версия сильно изменится, она будет выпущена первой.alpha,beta,rcДождитесь первой версии.

описание и ключевые слова

  • descriptionПоле используется для добавления информации описания модуля, чтобы пользователь мог понять модуль.
  • keywordsПоля используются для добавления ключевых слов в модули.
  • когда мы используемnpmПри извлечении модуля модуль будетdescriptionполя иkeywordsполе для соответствия, напишитеpackage.jsonсерединаdescriptionа такжеkeywordsБудет полезно увеличить экспозицию наших модулей.

Установите зависимости проекта (зависимости и devDependencies)

  • dependenciesВ этом поле указывается модуль (используемый в производственной среде), от которого зависит запуск проекта, напримерantd,react,momentДругие библиотеки плагинов:
    • Это зависимости, которые нужны нашей производственной среде при использовании проекта в качествеnpmКогда пакет установлен, пользователь устанавливаетnpmпакет будет установлен толькоdependenciesзависимости внутри.
  • devDependenciesВ этом поле указываются модули, необходимые для разработки проекта (используемые средой разработки), такие какwebpack,typescript,babelЖдать:
    • Нам не нужны эти инструменты, когда код упакован и отправлен на линию, поэтому мы помещаем его вdevDependenciesсередина.
  • Если модуль неpackage.jsonфайл, мы можем установить этот модуль отдельно и использовать соответствующие параметры для его записиdependenciesполе/devDependenciesВ поле:
# 使用 npm
npm install <package...> --save # 写入 dependencies 属性
npm install <package...> --save-dev # 写入 devDependencies 属性

# 使用 yarn
yarn add <package...> # 写入 dependencies 属性
yarn add <package...> --dev # 写入 devDependencies 属性
  • имеютpackage.jsonфайл, который непосредственно используется при разработкеnpm install / yarn installкоманда, необходимые модули будут автоматически установлены в текущем каталоге, а рабочая среда и среда разработки, необходимые для установки и завершения проекта, настроены.

Упрощенные команды терминала (скрипты)

  • scriptsполеpackage.jsonФункция метаданных в , которая принимает объект, свойства которого доступны черезnpm run Сценарий для запуска, значением является фактическая команда для запуска (обычно это команда терминала), например:
"scripts": {
  "start": "node index.js"
},
  • введите команду терминала вscriptsполя, как для их документирования, так и для возможности повторного использования.

Определите запись проекта (основную)

  • mainполеpackage.jsonЕще одна функция метаданных в , которую можно использовать для указания загружаемого файла записи. Если ваш проект являетсяnpmpackage, когда пользователь устанавливает ваш пакет,require('my-module')то, что возвращаетсяmainфайлов, перечисленных в полеmodule.exportsАтрибуты.
  • когда не указаноmainполе, значение по умолчанию ниже корневого каталога модуляindex.jsдокумент.

Опубликовать конфигурацию файла (файлы)

  • filesПоля используются для описания того, что мы используемnpm publishподтолкнуть команду кnpmСписок файлов сервера.Если указана папка, будет включено все содержимое папки.
  • Мы можем просмотреть скачанныйantdизpackage.jsonизfilesПоле, содержание выглядит следующим образом:
"files": [
    "dist",
    "lib",
    "es"
],
  • Вы можете увидеть скачанныйantdПакеты имеют следующую структуру каталогов:
  • Кроме того, мы также можем настроить.npmignoreфайл, чтобы исключить некоторые файлы и предотвратить отправку большого количества ненужных файлов вnpmначальство.

Определить частный модуль (private)

  • Неоткрытые проекты общих компаний установятprivateСтоимость имуществаtrue,Это потому чтоnpmОтказаться от публикации приватных модулей.Установив это поле, можно предотвратить непреднамеренную публикацию приватных модулей.

Укажите применимую систему для модуля (os)

  • Если мы разрабатываем модуль, он может работать только вdarwinВ рамках системы мы должны убедиться, чтоwindowsПользователи не будут устанавливать этот модуль, что позволит избежать ненужных ошибок.
  • В это время используйтеosАтрибут может помочь нам достичь вышеуказанных требований.Этот атрибут может указывать систему, к которой применим модуль, или указывать черный список системы, который не может быть установлен (сообщается об ошибке, когда модуль установлен в системе в системном черном списке). ):
"os" : [ "darwin", "linux" ] # 适用系统
"os" : [ "!win32" ] # 黑名单

Советы: вnodeможно использовать в окружающей средеprocess.platformдля определения операционной системы.

Указанный модуль относится к архитектуре процессора (cpu)

  • и вышеosполя похожи, мы можем использоватьcpuПоля точнее ограничивают среду установки пользователя:
"cpu" : [ "x64", "ia32" ] # 适用 cpu
"cpu" : [ "!arm", "!mips" ] # 黑名单

Советы: вnodeможно использовать в окружающей средеprocess.archсудитьcpuАрхитектура.

Укажите версию узла проекта (движки)

  • Иногда, когда новый проект затягивается из-за использования других разработчиковnodeРазличные версии будут вызывать много странных проблем (например, некоторые ошибки установки зависимостей, запуск проекта после установки зависимостей и т. д.).
  • Для того, чтобы достичь великого идеала проекта из коробки, это время можно использоватьpackage.jsonизenginesполе для указания версии узла проекта:
"engines": {
   "node": ">= 8.16.0"
},
  • В этом поле также можно указать применимыйnpmВерсия:
"engines": {
   "npm": ">= 6.9.0"
 },
  • Следует отметить, что атрибуты движков функционируют только как описание, когда версия пользователя не соответствует указанному значению, не зависящему от влияния установки.

Пользовательская команда (бин)

  • использовалvue-cli,create-react-appДрузья строительные леса, интересно, если вам было любопытно, почему после установки этих строительных лесов вы можете использовать аналогичныеvue create/create-react-appтакие как команды, на самом деле это иpackage.jsonсерединаbinсвязанные с полем.
  • binПоле используется для указания местоположения исполняемого файла, соответствующего каждой внутренней команде. когдаpackage.jsonпри условииbinПосле поля это эквивалентно выполнению сопоставления между именем команды и именем локального файла.
  • Когда пользователь устанавливает сbinполевой пакет,
    • Если установлена ​​глобально,npmбудет использовать символические ссылки, чтобы связать эти файлы с/usr/local/node_modules/.bin/;
    • Если он установлен локально, он будет ссылаться на./node_modules/.bin/.
  • Например 🌰, если вы хотите использоватьmy-app-cliВ качестве команды можно настроить следующееbinПоле:
"bin": {
  "my-app-cli": "./bin/cli.js"
}
  • Приведенный выше код указывает,my-app-cliИсполняемый файл, соответствующий команде,binв подкаталогеcli.js, поэтому после установкиmy-app-cliВ проекте пакета его можно легко использоватьnpmВыполните скрипт:
"scripts": {
  start: 'node node_modules/.bin/my-app-cli'
}

  • Эй, как это выглядитvue create/create-react-appТакие заказы не очень похожи? причина:
    • при необходимостиnodeнужно добавить окружениеnodeприставка
    • Если вы добавитеnodeпрефикс, необходимо указатьmy-app-cliпуть ->node_modules/.bin,иначеnode my-app-cliбудет искать текущий путьmy-app-cli.js, что точно не правильно.
  • Чтобы добиться чего-то вродеvue create/create-react-appкоманды, подобные приведенным выше, вы можете использоватьbinИсполняемые файлы в подкаталогахcli.jsВ первой строке напишите следующую команду:
#!/usr/bin/env node
  • Цель этой команды — указать системе использоватьnodeParse, поэтому команду можно сократить какmy-app-cli.

Реагировать на проект, связанный с

Установите корневой путь приложения (домашняя страница)

  • когда мы используемcreate-react-appстроительные лесаReactпроекта по умолчанию используется встроенныйwebpackконфигурация, когдаpackage.jsonне настроен вhomepageпуть к приложению файлового ресурса по умолчанию после упаковки сборки/,Как показано ниже:
  • Вообще говоря, наши упакованные статические ресурсы будут развернуты вCDNДля того, чтобы наше приложение знало, куда загружать ресурсы, нам нужно задать корневой путь, тогда мы можем передатьpackage.jsonсерединаhomepageПоле задает корневой путь приложения.
  • когда мы устанавливаемhomepageПосле атрибута:
{
  "homepage": "https://xxxx.cdn/my-project",
}
  • Путь упакованного ресурса будет добавленhomepageадрес:

Среда разработки для решения междоменных задач (прокси)

  • При работе над проектом с раздельным фронтом и бекендом вы столкнетесь с междоменными проблемами при вызове интерфейса.Находясь в среде разработки, вы можете настроитьpackage.jsonсерединаproxyЧтобы решить междоменную проблему, конфигурация выглядит следующим образом:
{
  "proxy": "http://localhost:4000"  // 配置你要请求的服务器地址
}
  • Обратите внимание, что когдаcreate-react-appвыше, чем версия 2.0, когдаpackage.jsonможно настроить только вstringtype, что означает, что если вы хотите использоватьpackage.jsonЧтобы решить междоменную проблему, вы можете проксировать только один адрес сервера.
  • Если вы хотите проксировать несколько адресов серверов, вам необходимо установитьhttp-proxy-middleware,существуетsrcновый каталогsetupProxy.js:
const proxy = require("http-proxy-middleware");
 
module.exports = function(app) {
  app.use(
    proxy("/base", {
      target: "http://localhost:4000",
      changeOrigin: true
    })
  );
  app.use(
    proxy("/fans", {
      target: "http://localhost:5000",
      changeOrigin: true
    })
  );
};

Принимать разные значения глобальных переменных (настраиваемые поля) в зависимости от среды разработки

  • Допустим есть такой компонент, при клике на компонент он перескакивает в тестовую среду в среду разработкиsentryАдрес, в формальной среде, перейти в формальную средуsentryадрес.
  • Во-первых, путем настройки ранее упомянутогоscriptsПоле для реализации настройки переменных окружения (NODE_ENV):
"scripts": {
  "start": "NODE_ENV=development node scripts/start.js",
  "build": "NODE_ENV=production node scripts/build.js",
},
  • После того, как проект запущен, в коде мы можем передатьprocess.env.NODE_ENVдоступ кNODE_ENVценность .
Вариант первый
  • Мы можем написать в компоненте код оценки, аналогичный следующему, и предоставить его в соответствии с различными средами.sentryUrlУстановите разные значения:
let sentryUrl;
if (process.env.NODE_ENV === 'development') {
    sentryUrl = 'test-sentry.xxx.com';
} else {
    sentryUrl = 'sentry.xxx.com';
}
  • Кажется, что в этом нет ничего плохого, но если вы обдумаете это подробно, если есть несколько компонентов, разные адреса службы (несколько служб) должны использоваться в соответствии с разными средами.Если описанный выше метод написан, будет много повторяющихся кодов суждений в проекте, и при изменении адреса службы компоненты, содержащие эти адреса службы, должны быть соответственно изменены, что явно нецелесообразно.
Вариант 2
  • Решение: адрес соответствующей службы настроен вpackage.json, при изменении проектаwebpackконфигурация.
  • Примечание. ИзменитеwebpackНастройте проект, который необходимо извлечьwebpackКонфигурация (подробнее можно прочитать 👉:Процесс настройки проекта react + typescript).
  • Использовать в корневом каталоге проектаyarn ejectПосле успешного извлечения конфигурации вы можете обнаружить, что изменения в каталоге проекта следующие:
  • Если требуется индивидуальный проект, он обычно находится вconfigкаталог по умолчаниюwebpackКонфигурация модифицирована, тут надо обратить вниманиеconfig/path.jsа такжеconfig/env.jsДва файла:
    • env.jsОсновная цель читатьenvфайл конфигурации иenvИнформация о конфигурации передается в глобальную переменнуюprocess.env;
    • path.jsОсновная цель - предоставить различные пути для проекта, включая путь сборки,publicпуть и т.д.
  • Поскольку целью этой статьи является не изучениеwebpackКонфигурация здесь описывает только то, как реализовать функцию [использования различных значений глобальных переменных в соответствии со средой разработки].
  • Во-первых, вам нужноpackage.jsonНастройте следующее в:
"scripts": {
  "start": "NODE_ENV=development node scripts/start.js",
  "build": "NODE_ENV=production node scripts/build.js",
},
"sentryPath": {
  "dev": "https://test-sentry.xxx.com",
  "prod": "https://sentry.xxx.com"
 }
  • Затем изменитеpath.jsфайл со следующим содержимым:
// 重写 getPublicUrl 方法
const getPublicUrl = (appPackageJson, pathName) => {
  let path;
  switch (process.env.DEPLOY_ENV) {
    case 'development':
      path = require(appPackageJson)[pathName].dev;
      break;
    case 'production':
      path = require(appPackageJson)[pathName].prod;
      break;
    default:
      path = envPublicUrl || require(appPackageJson).homepage;
  }
  return path;
}

// 新增 getSentryPath 方法
const getSentryPath = (appPackageJson) => {
  return getPublicUrl(appPackageJson, 'sentryPath');
}

// config after eject: we're in ./config/
module.exports = {
  ...,
  sentryUrl: getSentryPath(resolveApp('package.json')), // 新增
};
  • Последний отзывenv.jsфайл со следующим содержимым:
// 修改 getClientEnvironment 方法
function getClientEnvironment(publicUrl) {
  const raw = Object.keys(process.env)
    .filter(key => REACT_APP.test(key))
    .reduce(
      (env, key) => {
        ...
      },
      {
        NODE_ENV: process.env.NODE_ENV || 'development',
        PUBLIC_URL: publicUrl,
        SENTRY_URL: paths.sentryUrl // 新增
      }
    );

  const stringified = {
    ...
  };
  return { raw, stringified };
}
  • Через приведенную выше конфигурацию мы можем передать компонентprocess.env.SENTRY_URLполучатьsentryАдрес сервиса сейчас хоть и выглядит сложнее первого плана, но такой заработок долгосрочный, если хотите добавить новыйsonarqubeуслугу можно реализовать таким же образом, используяpackage.jsonВы также можете четко видеть адреса, используемые текущей службой в разных средах.

Резюме 👀

  • В этой статье описываетсяpackage.jsonРазнообразие общих полей и функций конфигурации, а также примеры для углубления понимания каждогоpackage.jsonпонимания этих полей.
  • В дополнение к некоторым часто используемым полям, также введенным вReactпроектpackage.jsonПредставлены некоторые функции, которые могут быть реализованы файлом.

Если есть какие-либо упущения или ошибки в вышеуказанном содержании, пожалуйста, оставьте сообщение ✍️Укажите и продвигайтесь вперед вместе💪💪💪

Если вы считаете, что эта статья полезна для вас, 🏀🏀 оставьте свой драгоценный 👍

Ссылки 📖

  1. Creating a package.json file
  2. Роль package.json bin
  3. Запросы прокси-API в среде разработки
  4. Процесс настройки проекта react + typescript
  5. Заметки об исследовании React
Категории