addons frontend
blog-utils-0.25.0
Интерфейсная инфраструктура и код для дополнения mozilla/addons-server.
Этот код и связанный с ним рабочий веб-сайт включены в программу Mozilla по вознаграждению за обнаружение ошибок в сети и сервисах. Если вы обнаружили уязвимость безопасности, отправьте ее, используя процедуру, описанную в программе и на страницах часто задаваемых вопросов. Более подробную техническую информацию об этом приложении можно найти на странице Bug Bounty Onramp.
Пожалуйста, сообщайте обо всех ошибках, связанных с безопасностью, через Bugzilla, используя форму об ошибках веб-безопасности.
Никогда не сообщайте об ошибках, связанных с безопасностью, через выпуск Github или по электронной почте.
Самый простой способ управлять несколькими версиями узла в разработке — использовать nvm.
Если вы используете Windows, обязательно следуйте рекомендациям Windows.
yarn , чтобы установить все зависимостиyarn amo:stage , чтобы запустить локальный сервер, который подключается к размещенному промежуточному серверу. Вот несколько команд, которые вы можете запустить:
| Команда | Описание |
|---|---|
| пряжа амо:олимпия | Запустите сервер/прокси-сервер разработки (для amo), используя данные из локальной среды сервера надстроек. |
| пряжа амо:dev | Запустите сервер разработки/прокси (для amo), используя данные с сервера разработки (https://addons-dev.allizom.org/). |
| пряжа амо:dev-https | То же, что и amo:dev , но с HTTPS, доступно по адресу: https://example.com:3000/. Прочтите о настройке этой среды. |
| пряжа амо: сцена | Запустите сервер разработки/прокси (для amo), используя данные промежуточного сервера (https://addons.allizom.org/). |
| сборка пряжи | Создайте приложение. |
| сборка пряжи-ci | Запустите сценарии npm build и bundlewatch . |
| пучок пряжичасы | Запустите Bundlewatch, чтобы проверить размеры сгенерированных пакетов AMO. Сначала необходимо построить AMO. |
| поток пряжи | Запустить поток. По умолчанию это проверяет наличие ошибок и завершает работу. |
| поток пряжи: проверьте | Явно проверьте наличие ошибок потока и выйдите. |
| поток пряжи: dev | Постоянно проверяйте наличие ошибок потока. |
| пряжа | Линт JS |
| запуск-функции-тест-сервера пряжи | Запустите Docker-контейнер для функциональных тестов. |
| стиль пряжи ворс | Линт SCSS |
| пряжа ворс | Запустите все линтеры JS + SCSS. |
| пряжа красивее | Запустите Prettier, чтобы автоматически отформатировать всю кодовую базу. |
| пряжа prettier-dev | Запустите [Pretty-Quick][] для автоматического сравнения и форматирования измененных исходных файлов с основной веткой. |
| пряжа prettier-ci | Запустите Prettier и потерпите неудачу, если какой-то код был изменен без форматирования. |
| проверка версии пряжи | Убедитесь, что у вас есть необходимые зависимости |
| тест пряжи | Запустить все тесты (входит jest в режим --watch ) |
| тест-отладка пряжи | Запустите все тесты с полным выводом на консоль и полными сообщениями об ошибках (входит jest в режим --watch ) |
| тестовое покрытие пряжи | Запустите все тесты и создайте отчет о покрытии кода (входит jest в режим --watch ) |
| тестовое покрытие пряжи один раз | Запустите все тесты, создайте отчет о покрытии кода, затем выйдите. |
| тест пряжи - один раз | Запустите все тесты, запустите все линтеры JS + SCSS, затем выйдите. |
| пряжа test-ci | Запустите все проверки непрерывной интеграции. Это предназначено только для работы на CI. |
Вы можете войти в интерактивный режим шутки, набрав yarn test или yarn test-debug . Это самый простой способ разработки новых функций.
Вот несколько советов:
yarn test скроет большую часть вывода консоли и подробные сообщения об ошибках теста, поэтому лучше всего запускать полный набор тестов. При работе над отдельным тестом вы, вероятно, захотите запустить yarn test-debug .yarn test , вы можете переключиться на редактор кода и начать добавлять тестовые файлы или изменять существующий код. Когда вы сохраняете каждый файл, jest будет запускать только тесты, связанные с измененным вами кодом.a при первом запуске, jest продолжит запускать весь пакет, даже если вы измените определенные файлы. Введите o чтобы вернуться в режим запуска только тестов, связанных с изменяемыми файлами.p или t , чтобы фильтровать тесты по имени во время работы над исправлением определенного набора тестов. Дополнительная информация.Error watching file for changes: EMFILE в Mac OS, то brew install watchman может это исправить. См. jestjs/jest#1767. По умолчанию yarn test запускает только подмножество тестов, относящихся к коду, над которым вы работаете.
Чтобы явно запустить подмножество тестов, вы можете ввести t или p , которые описаны в разделе об использовании jest watch.
Альтернативно вы можете запустить программу запуска тестов с определенным файлом или регулярным выражением, например:
yarn test tests/unit/amo/components/TestAddon.js
Если вы хотите запустить все тесты и выйти, введите:
yarn test-once
При запуске тестов вы увидите отчет об ошибках Eslint в конце результатов теста:
yarn test
Если вы хотите запускать тесты без проверок Eslint, установите переменную среды:
NO_ESLINT=1 yarn test
Поддержка использования Flow для проверки цели нашей программы ограничена.
При запуске тестов вы увидите отчет об ошибках Flow в конце результатов теста:
yarn test
Если вы хотите запускать тесты без проверок Flow, установите переменную среды:
NO_FLOW=1 yarn test
Чтобы проверять наличие проблем с Flow только во время разработки и редактирования файлов, запустите:
yarn flow:dev
Если вы новичок в работе с Flow, вот несколько советов:
Чтобы добавить покрытие потока в исходный файл, поместите комментарий /* @flow */ вверху. Чем больше исходных файлов вы сможете использовать в Flow, тем лучше.
Вот наш манифест Flow:
getAllAddons , принимает аргументы объекта, вызовите ее объект типа GetAllAddonsParams . Пример: type GetAllAddonsParams = { |
categoryId : number ,
| } ;
function getAllAddons ( { categoryId } : GetAllAddonsParams = { } ) {
...
}{| key: ... |} ). Иногда оператор распространения вызывает ошибку типа «Неточный тип несовместим с точным типом», но это ошибка. При необходимости вы можете использовать обходной путь Exact<T> из src/amo/types/util . Это рабочая замена $Exact. // Imagine this is something like components/ConfirmButton/index.js
import { compose } from 'redux' ;
import * as React from 'react' ;
// This expresses externally used props, i.e. to validate how the app would use <ConfirmButton />
type Props = { |
prompt ?: string | null ,
| } ;
// This expresses internally used props, such as i18n which is injected by translate()
type InternalProps = { |
... Props ,
i18n : I18nType ,
| } ;
export class ConfirmButtonBase extends React . Component < InternalProps > {
render ( ) {
const prompt = this . props . prompt || this . props . i18n . gettext ( 'Confirm' ) ;
return < button > { prompt } < / button > ;
}
}
// This provides a type hint for the final component with its external props.
// The i18n prop is not in external props because it is injected by translate() for internal use only.
const ConfirmButton : React . ComponentType < Props > = compose ( translate ( ) ) (
ConfirmButtonBase ,
) ;
export default ConfirmButton ;Object или any , но не стесняйтесь использовать их, если вы тратите слишком много времени на объявление типов, которые зависят от других типов, которые зависят от других типов, и так далее.$FlowFixMe , чтобы пропустить проверку Flow, если вы столкнетесь с ошибкой или нажмете что-то, из-за чего вам придется удариться головой о клавиатуру. Если вы считаете, что это невозможно исправить, используйте вместо этого $FlowIgnore . Пожалуйста, объясните свое обоснование в комментарии и, если возможно, дайте ссылку на проблему GitHub.yarn flow type-at-pos ... чтобы отследить, какие типы применяются к коду. Подробности смотрите yarn flow -- --help type-at-pos .Мы используем Prettier для автоматического форматирования нашего кода JavaScript и прекращения всех текущих дебатов по поводу стилей.
Чтобы просмотреть отчет о покрытии кода, введите:
yarn test-coverage-once
Будет распечатана таблица файлов, показывающая процент покрытия кода. Непокрытые строки будут показаны в правом столбце, но вы можете открыть полный отчет в браузере:
open coverage/lcov-report/index.html
Прокси-сервер предоставляется для запуска приложения AMO с API на том же хосте, что и интерфейс. Это имитирует нашу производственную установку.
Начните разработку с использованием размещенного API следующим образом:
yarn amo:dev
Это настроит прокси-сервер на использование https://addons-dev.allizom.org для данных API. Эта команда является наиболее распространенным способом разработки новых функций внешнего интерфейса. См. таблицу команд выше, чтобы узнать об аналогичных способах запуска сервера.
Чтобы использовать локальный сервер API, работающий в Docker, вы можете использовать команду yarn amo . Однако в настоящее время это не работает. См. выпуск 7196.
Аутентификация будет работать, если она инициирована из addons-frontend, и будет сохраняться на addons-server, но не будет работать при входе в систему со страницы addons-server. См. mozilla/addons-server#4684 для получения дополнительной информации об исправлении этой проблемы.
Если вам нужно переопределить какие-либо настройки во время работы yarn amo , yarn amo:dev или yarn amo:stage , сначала создайте локальный файл конфигурации с таким названием:
touch config/local-development.js
Внесите любые изменения в конфигурацию. Например:
module . exports = {
trackingEnabled : true ,
} ;Перезапустите сервер, чтобы увидеть, как это подействует.
Обратитесь к документации по порядку загрузки файла конфигурации, чтобы узнать больше о том, как применяется конфигурация.
Если вы хотите получить доступ к своему локальному серверу на устройстве Android, вам необходимо изменить несколько настроек. Допустим, ваш локальный компьютер доступен в вашей сети по IP-адресу 10.0.0.1 . Вы можете запустить свой сервер следующим образом:
API_HOST=http://10.0.0.1:3000
SERVER_HOST=10.0.0.1
WEBPACK_SERVER_HOST=10.0.0.1
yarn amo:dev
На вашем устройстве Android вы сможете получить доступ к сайту разработки по адресу http://10.0.0.1:3000 .
ПРИМЕЧАНИЕ . В настоящее время невозможно войти в систему с этой конфигурацией, поскольку клиент учетных записей Mozilla перенаправляется на localhost:3000 . Возможно, вы сможете попробовать другой подход, отредактировав /etc/hosts на своем устройстве, чтобы localhost указывал на вашу машину разработки, но это не было полностью протестировано.
При локальной разработке с использованием сервера веб-пакетов случайно сгенерированный URL-адрес ресурса не соответствует требованиям нашей Политики безопасности контента (CSP) и загромождает вашу консоль ошибками. Вы можете отключить все ошибки CSP, установив для CSP значение false в любом локальном файле конфигурации, например local-development-amo.js . Пример:
module . exports = {
CSP : false ,
} ; Документация, которую вы сейчас читаете, находится внутри репозитория исходного кода в формате Markdown со вкусом Github. Когда вы вносите изменения в эти файлы, вы можете создать запрос на включение для их предварительного просмотра или, что еще лучше, вы можете использовать захват для предварительного просмотра изменений локально. После установки grip запустите его из исходного каталога следующим образом:
grip .
Откройте URL-адрес localhost , и вы увидите отрисованный файл README.md . По мере внесения изменений он будет обновляться автоматически.
Ниже приведены сценарии, которые используются при развертывании. Обычно они вам не нужны, если вы не тестируете что-то, связанное с развертыванием или сборкой.
Переменные окружения:
NODE_ENV : среда узла, например production или developmentNODE_CONFIG_ENV : имя загружаемой конфигурации, например, dev , stage , prod| Скрипт | Описание |
|---|---|
| начало пряжи | Запускает экспресс-сервер (требуются переменные окружения) |
| сборка пряжи | Собирает библиотеки (все приложения) (требуются переменные окружения) |
Пример. Создание и запуск рабочего экземпляра приложения:
NODE_ENV=production NODE_CONFIG_ENV=prod yarn build
NODE_ENV=production NODE_CONFIG_ENV=prod yarn start
Чтобы запустить приложение локально в рабочем режиме, вам необходимо создать файл конфигурации для локальных рабочих сборок. Производственные сборки могут быть созданы для разных сред: dev , stage и prod (контролируются переменной env NODE_CONFIG_ENV ), но для локального запуска этих сред требуется только один дополнительный файл конфигурации.
Переименуйте файл с именем config/local.js.dist в config/local.js . После этого перестройте и перезапустите, используя yarn build и yarn start , как описано выше. Если вы раньше использовали 127.0.0.1 с другой конфигурацией, обязательно очистите файлы cookie. Приложение должно быть доступно по адресу: http://127.0.0.1:4000/.
ПРИМЕЧАНИЕ . В настоящее время войти в систему с использованием этого подхода невозможно.
Вы можете проверить, какой коммит addons-frontend развернут, какие эксперименты A/B проводятся или какие флаги функций включены, сделав такой запрос:
curl https://addons-dev.allizom.org/__frontend_version__
{
"build": "https://circleci.com/gh/mozilla/addons-frontend/10333",
"commit": "47edfa6f24e333897b25516c587f504e294e8fa9",
"experiments": {
"homeHero": true
},
"feature_flags": {
"enableFeatureAMInstallButton": true,
"enableFeatureStaticThemes": true
},
"source": "https://github.com/mozilla/addons-frontend",
"version": ""
}
Это вернет ответ 415, если файл version.json не существует в корневом каталоге. Этот файл обычно создается в процессе развертывания.
Для обеспечения совместимости со сценариями мониторинга те же данные можно получить по этому URL-адресу:
curl https://addons-dev.allizom.org/__version__
Вы можете установить расширение amo-info, чтобы легко просматривать эту информацию.
Этот проект также содержит код для создания библиотеки addons-frontend-blog-utils и предлагает следующие команды:
yarn build:blog-utils-dev : создайте библиотеку, запустите наблюдатель для перестройки библиотеки при изменении и отправьте страницу разработки по адресу http://127.0.0.1:11000.yarn build:blog-utils-prod : собрать библиотеку в производственном режимеЭта библиотека предназначена исключительно для работы с аддонами-блогами.
Чтобы опубликовать новую версию addons-frontend-blog-utils , в основной репозиторий необходимо поместить специальный тег. Имя тега должно начинаться с blog-utils- и обычно содержит номер версии. Это можно автоматизировать с помощью следующей команды:
npm version [major|minor|patch]
Выполнение этой команды из master ветки обновит версию package.json , создаст фиксацию и создаст тег. Отправьте этот коммит и тег в основной репозиторий.
Примечание. Когда новый выпуск addons-frontend-blog-utils объединяется с addons-blog, вам следует опубликовать новую версию темы WordPress. Пожалуйста, следуйте этим инструкциям в репозитории addons-blog.
