Help us learn about your current experience with the documentation. Take the survey.

前端常见问题

前端常见问题规则

讨论前端常见问题。 在适用时分享链接，这样当内容过时时有更多人能注意到。
保持简短明了。 如果一个答案需要超过两句话，那它就不应该出现在这里。
尽可能提供背景信息。 链接到相关的源代码、issue/epic 或其他文档有助于理解答案。
看到问题就行动。 一旦发现过时的内容，立即删除或更新。

常见问题

1. 如何查找页面的 Rails 路由？

检查 ‘page’ 数据属性

最简单的方法是在目标页面的浏览器中输入以下内容：

document.body.dataset.page

设置此属性的源代码。

Rails 路由

rails routes 命令可用于列出应用中所有可用的路由。将输出通过管道传输到 grep，我们可以在可用路由列表中执行搜索。输出包括可用的请求类型、路由参数和相关控制器。

bundle exec rails routes | grep "issues"

2. `modal_copy_button` 与 `clipboard_button` 的区别

clipboard_button 使用 copy_to_clipboard.js 行为，该行为在页面加载时初始化。在页面加载时不存在的 Vue 剪贴板按钮（例如 GlModal 中的按钮）没有与剪贴板包关联的点击处理程序。

modal_copy_button 管理特定于该组件实例的 clipboard 插件实例。这意味着剪贴板事件在挂载时绑定，并在按钮销毁时销毁，从而缓解了上述问题。它还绑定到特定的容器或 modal ID，以便与我们 GlModal 创建的焦点陷阱配合工作。

3. 不符合 Pajamas Design System 的 `gitlab-ui` 组件

在 gitlab-ui 中实现的一些 Pajamas Design System 组件不符合设计系统规范。这是因为它们缺少一些计划中的功能或尚未正确样式化。在 Pajamas 网站中，组件示例顶部有一个横幅，指示如下：

此组件尚未符合我们设计系统中定义的正确样式。在引用此组件的视觉效果时，请参考设计系统文档。

例如，在撰写本文时，所有表单组件（如 checkbox）都可以观察到此类警告。然而，这并不意味着不应使用该组件。

GitLab 总是要求在存在合适组件时使用 <gl-*> 组件。这使代码库保持统一，并且在未来更易于维护/重构。

确保产品设计师在 MR 审查过程中审查不符合规范的组件的使用情况。创建一个后续 issue，并将其附加到 Pajamas Design System 组件 epic 中的组件实现 epic 中。

4. 我的提交表单按钮在提交后变为禁用状态

表单中的提交按钮会在表单元素上附加一个 onSubmit 事件监听器。这段代码在表单提交时为提交按钮添加一个 disabled 类选择器。要避免这种行为，请向按钮添加 js-no-auto-disable 类。

5. 引用后端端点时应使用完整 URL 还是完整路径？

最好使用 完整路径（如 gon.relative_url_root）而不是 完整 URL（如 gon.gitlab_url）。这是因为 URL 使用的是与 GitLab 配置的主机名，可能与请求不匹配。这会导致跨域资源共享问题，如这个 Web IDE 示例。

示例：

// 不好的做法 :(
// 如果 gitlab 配置的主机名是 `0.0.0.0`
// 如果我从 `localhost` 发起请求，这会导致 CORS 问题
axios.get(joinPaths(gon.gitlab_url, '-', 'foo'))

// 好的做法 :)
axios.get(joinPaths(gon.relative_url_root, '-', 'foo'))

此外，尽量避免在前端硬编码路径，而是从后端接收它们（见下一节）。引用后端 rails 路径时，避免使用 *_url，改用 *_path。

示例：

-# 不好的做法 :(
#js-foo{ data: { foo_url: some_rails_foo_url } }

-# 好的做法 :)
#js-foo{ data: { foo_path: some_rails_foo_path } }

6. 前端应该如何引用后端路径？

我们不建议通过硬编码路径来增加额外的耦合。如果可能，将这些路径作为数据属性添加到 JavaScript 中引用的 DOM 元素上。

示例：

// 不好的做法 :(
// 这是一个硬编码路径的 Vuex 操作 :(
export const fetchFoos = ({ state }) => {
  return axios.get(joinPaths(gon.relative_url_root, '-', 'foo'));
};

// 好的做法 :)
function initFoo() {
  const el = document.getElementById('js-foo');

  // 路径来自用于初始化 store 的根元素数据 :)
  const store = createStore({
    fooPath: el.dataset.fooPath
  });

  Vue.extend({
    store,
    el,
    render(h) {
      return h(Component);
    },
  });
}

// Vuex 操作现在可以从其状态引用路径 :)
export const fetchFoos = ({ state }) => {
  return axios.get(state.settings.fooPath);
};

7. 如何在本地测试生产构建？

有时需要在本地测试前端生产构建的输出，步骤如下：

停止 webpack：gdk stop webpack。
打开 gitlab/config 文件夹中的 gitlab.yaml，向下滚动到 webpack 部分，将 dev_server 更改为 enabled: false。
运行 yarn webpack-prod && gdk restart rails-web。

生产构建需要几分钟才能完成。此时任何代码更改只有在再次执行上述第 3 步后才会显示。

返回标准开发模式：

打开 gitlab 安装文件夹中的 gitlab.yaml，向下滚动到 webpack 部分，将 dev_server 改回 enabled: true。
运行 yarn clean 以删除生产资源并释放一些空间（可选）。
重新启动 webpack：gdk start webpack。
重启 GDK：gdk restart rails-web。

8. Babel polyfills

GitLab 启用了 Babel preset-env 选项 useBuiltIns: 'usage'。这会为每个我们使用但目标浏览器不支持的 JavaScript 功能添加适当的 core-js polyfills。您无需手动添加 core-js polyfills。

GitLab 添加了非 core-js polyfills 来扩展浏览器功能（如 GitLab SVG polyfill），这允许我们使用 <use xlink:href> 引用 SVG。请确保将这些 polyfills 添加到 app/assets/javascripts/commons/polyfills.js。

要查看正在使用的 polyfills：

转到您的 merge request。
在 merge request 标题下方的二级菜单中，选择 Pipelines，然后选择您要查看的 pipeline 以显示该 pipeline 中的作业。
选择 compile-production-assets 作业。
在右侧边栏中，滚动到 Job Artifacts，然后选择 Browse。
选择 webpack-report 文件夹打开它，然后选择 index.html。
在页面左上角，选择右箭头 ( ) 以显示资源管理器。
在 Search modules 字段中，输入 gitlab/node_modules/core-js 以查看正在加载哪些 polyfills 及其位置：

9. 为什么我的页面在深色模式下显示异常？

参见深色模式文档

10. 如何渲染 GitLab 风格的 Markdown？

如果您需要渲染 GitLab 风格的 Markdown，则需要满足以下两个条件：

使用 v-safe-html 指令将 GLFM 内容传递到 Vue 组件内的 div HTML 元素
向根 div 添加 md 类，这将应用适当的 CSS 样式

前端常见问题