首页>编程相关>其他源码
下载

插件前端

前端基础设施和代码来补充 mozilla/addons-server。

安全错误报告

该代码及其相关的生产网站包含在 Mozilla 的网络和服务错误赏金计划中。如果您发现安全漏洞，请通过计划和常见问题解答页面中概述的流程提交。有关此应用程序的更多技术详细信息可从 Bug Bounty Onramp 页面获取。

请使用网络安全错误表单通过 Bugzilla 提交所有与安全相关的错误。

切勿通过 Github Issue 或电子邮件提交与安全相关的错误。

要求

  • 您需要 Node LTS（长期支持）版本。
  • 安装yarn来管理依赖关系并运行脚本。

在开发中管理多个节点版本的最简单方法是使用 nvm。

开始使用

如果您使用的是 Windows，请确保也遵循 Windows 指南。

  • 输入yarn来安装所有依赖项
  • 输入yarn amo:stage启动连接到托管登台服务器的本地服务器

开发命令

以下是您可以运行的一些命令：

命令描述
纱线阿莫：奥林匹亚使用本地插件服务器环境中的数据启动开发服务器/代理（对于 amo）。
纱线阿莫：开发使用来自开发服务器的数据启动开发服务器/代理（对于 amo）（https://addons-dev.allizom.org/）
纱线 amo:dev-https与amo:dev相同，但使用 HTTPS，可从以下网址获取：https://example.com:3000/。阅读有关设置此环境的信息
纱线阿莫：舞台使用来自临时服务器 (https://addons.allizom.org/) 的数据启动开发服务器/代理（对于 amo）
纱线结构构建应用程序。
纱线构建-ci运行build和bundlewatch npm 脚本。
纱线束表运行bundlewatch以检查生成的AMO包大小。首先需要构建 AMO。
纱线流量运行流程。默认情况下，这会检查错误并退出
纱线流量：检查显式检查 Flow 错误并退出
纱线流量：dev持续检查 Flow 错误
纱线 eslint Lint JS
纱线启动功能测试服务器启动 Docker 容器进行功能测试
纱线风格皮棉检查 SCSS
纱线绒毛运行所有 JS + SCSS linter
纱线更漂亮运行 Prettier 自动格式化整个代码库
纱线更漂亮的开发运行 [Pretty-Quick][] 自动将修改后的源文件与 master 分支进行比较和格式化
纱线更漂亮-ci如果某些代码未经格式化而被更改，则运行 Prettier 并失败
纱线版本检查检查您是否具有所需的依赖项
纱线测试运行所有测试（在--watch模式下输入 jest）
纱线测试调试使用完整的控制台输出和完整的错误消息运行所有测试（在--watch模式下输入 jest）
纱线测试覆盖率运行所有测试并生成代码覆盖率报告（在--watch模式下输入 jest）
纱线测试覆盖率-一次运行所有测试，生成代码覆盖率报告，然后退出
纱线测试一次运行所有测试，运行所有 JS + SCSS linter，然后退出
纱线测试-ci运行所有持续集成检查。这仅适用于 CI 上运行。

运行测试

您可以通过输入yarn test或yarn test-debug进入交互式玩笑模式。这是开发新功能的最简单方法。

以下是一些提示：

  • yarn test将隐藏大多数控制台输出和详细的测试失败消息，因此最好在运行全套测试时使用。在进行单独的测试时，您可能需要运行yarn test-debug 。
  • 当您启动yarn test时，您可以切换到代码编辑器并开始添加测试文件或更改现有代码。当您保存每个文件时，jest 将仅运行与您更改的代码相关的测试。
  • 如果您在第一次启动时输入了a ，那么即使您更改了特定文件，jest 也会继续运行整个套件。键入o切换回仅运行与您正在更改的文件相关的测试的模式。
  • 有时运行与文件更改相关的测试很慢。在这些情况下，您可以在修复特定测试套件时键入p或t按名称过滤测试。更多信息。
  • 如果您在 Mac OS 上看到类似Error watching file for changes: EMFILE内容，则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，请参考以下提示：

  • 查看入门指南。
  • 通读 web-ext 指南，获取有关如何解决常见 Flow 错误的提示。

要将流覆盖添加到源文件，请在顶部放置/* @flow */注释。您可以选择加入 Flow 的源文件越多越好。

这是我们的 Flow 宣言：

  • 我们使用 Flow 来声明代码的意图并帮助其他人充满信心地重构它。 Flow 还可以让您更轻松地发现错误，然后再花费数小时在调试器中尝试找出发生的情况。
  • 避免任何内部代码的魔术流声明。只需在使用它的代码旁边声明一个类型别名，然后像任何其他对象一样导出/导入它。
  • 切勿仅仅为了引用其类型而导入真正的 JS 对象。创建一个类型别名并导入它。
  • 切勿添加超出您需要的类型注释。 Flow 非常擅长从标准 JS 代码推断类型；它会告诉您何时需要添加显式注释。
  • 当像getAllAddons这样的函数接受对象参数时，调用其类型对象GetAllAddonsParams 。例子： 
 type GetAllAddonsParams = { |
  categoryId : number ,
| } ;

function getAllAddons ( { categoryId } : GetAllAddonsParams = { } ) {
  ...
}
  • 尽可能通过管道语法 ( {| key: ... |} ) 使用精确对象类型。有时，扩展运算符会触发“不精确类型与精确类型不兼容”之类的错误，但这是一个错误。如果需要，您可以使用src/amo/types/util中的Exact<T>解决方法。这是 $Exact 的有效替代品。
  • 为 HOC（高阶组件）中包装的组件添加类型提示，以便 Flow 可以验证对该组件的调用。我们需要添加一个提示，因为我们还没有对我们依赖的所有 HOC 进行适当的类型覆盖。这是一个例子： 
 // 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 问题。
  • 如果您对某些 Flow 注释不起作用的原因感到困惑，请尝试使用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 的 AMO 应用程序。这模仿了我们的生产设置。

开始针对托管 API 进行开发，如下所示： 

 yarn amo:dev

这会将代理配置为使用https://addons-dev.allizom.org来获取 API 数据。此命令是开发新前端功能的最常见方法。请参阅上面的命令表，了解运行服务器的类似方法。

要使用在 Docker 中运行的本地 API 服务器，您可以使用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 设备以进行本地开发

如果您想在 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指向您的开发计算机，但这尚未经过充分测试。

禁用 CSP 进行本地开发

当使用 webpack 服务器进行本地开发时，随机生成的资产 URL 将使我们的内容安全策略 (CSP) 失败，并使您的控制台出现错误。您可以通过在任何本地配置文件（例如local-development-amo.js中将 CSP 设置为false来关闭所有 CSP 错误。例子： 

 module . exports = {
  CSP : false ,
} ;

处理文档

您现在正在阅读的文档以 Github 风格的 Markdown 形式存在于源存储库中。当您对这些文件进行更改时，您可以创建拉取请求来预览它们，或者更好的是，您可以使用grip 在本地预览更改。安装grip后，从源目录运行它，如下所示： 

 grip .

打开其localhost URL，您将看到渲染的README.md文件。当您进行编辑时，它会自动更新。

构建和运行服务

以下是部署中使用的脚本 - 通常不需要，除非您正在测试与部署或构建相关的内容。

环境变量是：

  • NODE_ENV ：节点环境，例如production或development
  • NODE_CONFIG_ENV ：要加载的配置的名称，例如dev 、 stage 、 prod
脚本描述
纱线开始启动 Express 服务器（需要环境变量）
纱线结构构建库（所有应用程序）（需要环境变量）

示例：构建并运行应用程序的生产实例： 

 NODE_ENV=production NODE_CONFIG_ENV=prod yarn build
NODE_ENV=production NODE_CONFIG_ENV=prod yarn start

在本地运行构建

要在生产模式下本地运行应用程序，您需要为本地生产构建创建一个配置文件。可以为不同的环境构建生产版本： dev 、 stage和prod （由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": ""
}

如果根目录中不存在version.json文件，这将返回 415 响应。该文件通常由部署过程生成。

为了与监控脚本保持一致，可以通过以下 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-blog 配合使用。

发布流程

为了发布新版本的addons-frontend-blog-utils ，必须将一个特殊标签推送到主存储库。标签名称必须以blog-utils-开头，并且通常包含版本号。可以使用以下命令自动执行此操作： 

 npm version [major|minor|patch]

从master分支发出此命令将更新package.json中的版本，创建提交并创建标签。将此提交和标签推送到主存储库。

注意：当新的addons-frontend-blog-utils版本合并到 addons-blog 中时，您应该发布新版本的 WordPress 主题。请按照 addons-blog 存储库中的这些说明进行操作。

核心技术

  • 基于 Redux + React
  • ES2015+ 编写的代码
  • 通过节点进行通用渲染
  • 高覆盖率的单元测试（目标是100%）
展开
附加信息
相关应用
为您推荐
相关资讯 全部