# @edx/frontend-build 中文文档

规范地址：https://npmcn.com/package/%40edx/frontend-build/

版本：13\.0\.14
npm 元数据更新时间：2026-07-10T14:29:41.808Z
中文译文更新时间：2026-11-13T07:48:34.203Z
软件包许可：AGPL-3\.0

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40edx/frontend-build
原文对照：https://npmcn.com/package/%40edx/frontend-build/?lang=original
项目主页：https://github.com/openedx/frontend-build#readme
源码仓库：https://github.com/openedx/frontend-build

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：12.4 MB，231 个文件
- 模块格式：CommonJS
- TypeScript 类型：未声明
- 运行依赖：57 个
- peer 依赖：react ^16\.9\.0 \|\| ^17\.0\.0
- 首次发布：2019-09-24T21:21:31.316Z
- 最新版本发布：2023-12-15T15:29:15.401Z
- 近 30 天下载量：7747（2026-10-13 至 2026-11-11，npm 官方下载统计）
- 已发布版本数：295（近 12 个月 0 个）

## 中文简介

为前端应用程序构建工具、设置和配置

## 安装

```sh
npm install @edx/frontend-build
```

也可以使用：`pnpm add @edx/frontend-build`、`yarn add @edx/frontend-build`、`bun add @edx/frontend-build`

## README

# 前端建设

## 警告: 软件包已移动

虽然Paragon设计系统将继续收到更新,但这些更新 将不再在@edx/frontend-building NPU套件上发表。 相反 可通过下列方式找到最新版本: [@ openedx/ 前端建设](https://www.npmjs.com/package/@openedx/frontend-build) 换句话说.

[![Build Status](https://api.travis-ci.com/edx/frontend-build.svg?branch=master)](https://travis-ci.com/edx/frontend-build) ![npm\_version](https://img.shields.io/npm/v/@edx/frontend-build.svg) [![Codecov](https://img.shields.io/codecov/c/github/edx/frontend-build)](https://codecov.io/gh/edx/frontend-build) [![license](https://img.shields.io/npm/l/@edx/frontend-build.svg)](https://github.com/edx-unsupported/frontend-base/blob/master/LICENSE)

## 目的

这一一揽子计划的目的是提供一个常识基础和 前端项目的设置包括:

-   林特(斯林特)
-   测试(测试)
-   开发服务器(webpack-dev-server)
-   构建(网包)

这个软件包可以作为单一的dev依赖,取代大型的 dev和建立依赖关系的数量。 它旨在提供常识 默认对框外的大多数 edX 项目都有好处,但 必要时可以延长或推翻.

## 克隆和启动

```{.}
1. Clone your new repo:

  ``git clone https://github.com/openedx/frontend-build.git``

2. Use node v18.x.

  The current version of the micro-frontend build scripts support node 18.
  Using other major versions of node *may* work, but this is unsupported.  For
  convenience, this repository includes an .nvmrc file to help in setting the
  correct node version via `nvm <https://github.com/nvm-sh/nvm>`_.

3. Install npm dependencies:

  ``cd frontend-build && npm ci``
```

## 使用量

CLI 命令的结构 : `fedx-scripts <targetScript> <options>`。 。 。 . 选项被传递到目标脚本, 所以参考每个目标 脚本的 CLI 文档来学习哪些选项可供选择. 示例 软件包。json:

```
{
   "scripts": {
      "build": "fedx-scripts webpack",
      "i18n_extract": "fedx-scripts formatjs extract",
      "lint": "fedx-scripts eslint --ext .jsx,.js .",
      "precommit": "npm run lint",
      "snapshot": "fedx-scripts jest --updateSnapshot",
      "start": "fedx-scripts webpack-dev-server --progress",
      "test": "fedx-scripts jest --coverage --passWithNoTests",
      "serve": "fedx-scripts serve"
   },
   "dependencies": {
      ...
   },
   "devDependencies": {
      "@edx/frontend-build": "1.0.0"
   }
}
```

## 扩展或覆盖配置预设

此软件包包含一组配置预设 :

-   网络软件包(或网络软件包)
-   webpack-dev(或webpack-dev-服务器)
-   webpack- dev- stage (用于运行针对相相相的开发应用程序)
-   宝贝
-   保温模块
-   欢笑
-   埃斯林特语name

需要扩展或修改配置时,可以自行添加 通过扩展前端构建的配置来配置文件 文档或提供自己的批发.

方法1:扩展基础配置(babel.config.js) :

```
const { createConfig } = require('@edx/frontend-build');
module.exports = createConfig('babel', {
   /* option overrides or extensions */
});
```

方法2:自定义操纵(babel.config.js):

```
const { getBaseConfig } = require('@edx/frontend-build');
const config = getBaseConfig('babel');

/* Custom config manipulations */

module.exports = config;
```

前端会查看以下位置进行配置 文档.

-   爱斯林特: `<project_root>/.eslintrc.js`
-   笑话: `<project_root>/jest.config.js`
-   贝尔: `<project_root>/babel.config.js`
-   网络软件包: `<project_root>/webpack.prod.config.js`
-   网络包- dev- server : `<project_root>/webpack.dev.config.js`

您可以通过命令行指定自定义配置文件位置, 如果您 选择不同的地点。 示例软件包。 json :

```
{
   "scripts": {
      "build": "fedx-scripts webpack --config ./config/webpack.config.js",
      "start:stage": "fedx-scripts webpack-dev-server --config webpack.dev-stage.config.js",
      ...
   }
}
```

注意, 为 bail 指定自定义配置位置可能引起问题 其他工具在前端建设。 爱斯林特,笑话,网络包装 webpack-dev-服务器配置预设依赖于 bail 配置和 根据默认解析配置文件的位置 上述地点。 如果您需要移动 Bail 配置文件到 自定义位置,您可能需要自定义引用 位于其他配置文件中。 请联系联邦X队 如果你需要这样做 并且遇到了问题.

## Webpack 本地模块配置

开发的网络包配置允许工程师创建 包含本地模块覆盖的"module.config.js"文件. 这意味着 如果你正在开发一个共享库的新功能 (@edx/frontend-platform, @edx/paragon等),您可以添加本地语言 该寄存器的位置到您的模块. config.js 文件 用于您的应用程序的 webpack 构建将自动拾取并使用 它,而不是它的节点 模块版本的文件.

**注意: 此模块. config.js 文件应添加到您的** \[.gitignore\]{.title-ref\] (中文(简体) ).

一个实例模块.config.js文件看起来像如下. 你可以复制 此选项将输入您使用本地版本的参数和 前端平台 :

```
module.exports = {
  /*
  Modules you want to use from local source code.  Adding a module here means that when this app
  runs its build, it'll resolve the source from peer directories of this app.

  moduleName: the name you use to import code from the module.
  dir: The relative path to the module's source code.
  dist: The sub-directory of the source code where it puts its build artifact.  Often "dist".
  */
  localModules: [
    { moduleName: '@edx/brand', dir: '../src/brand-openedx' }, // replace with your brand checkout
    { moduleName: '@edx/paragon/scss/core', dir: '../src/paragon', dist: 'scss/core' },
    { moduleName: '@edx/paragon/icons', dir: '../src/paragon', dist: 'icons' },
    { moduleName: '@edx/paragon', dir: '../src/paragon', dist: 'dist' },
    { moduleName: '@edx/frontend-platform', dir: '../src/frontend-platform', dist: 'dist' },
  ],
};
```

## 步骤

1.  复制 `module.config.js` 进入您的前端应用程序库, 必要时修改.
2.  运行 `npm install && npm run build` 在任何共享的国家预防机制软件包中 想要本地使用 .
3.  重新启动你的应用程序.

## 页:1

-   “ dir” 和“ dist” 键使您对 形状。 举例来说, 需要两个单独的条目来接收JS和SCSS的进口.
-   目录位置 `../src` (关于你的根 建议为共享的国家预防机制软件包提供前端应用程序存储器) 存储器,因为不管您是否运行 前端通过devstack。 如果你是的话 _没有_ 运行您的前端 devstack, 然后你可以把共享的图书馆 任何地方在你的 文件系统,相应更新“ dir”密钥。 要学得更多, 见 [这个本地版的 ADR 软件包](https://github.com/openedx/devstack/tree/master/docs/decisions/0005-frontend-package-mounts.rst)。 。 。 .
-   此机制使用 Webpack 解析别名, 如本文所记载: [https://webpack.js.org/configulation/resolve/#resolvealias (英语)](https://webpack.js.org/configuration/resolve/#resolvealias)

## 以 .env. private 取代默认.env. 开发环境变量

在某些情况下,您可能想要覆盖开发环境 在.env.中定义的带有私人环境变量的变量 永远不要被检查到仓库。 例如,a .env. 开发文件可能包含第三方服务的秘密 (例如Algolia),你想在开发期间使用,但希望 确保这些秘密不被检查到Git.

您可以创建一个 \[.env.private\] {.title-ref\] , 并附带任何更改 环境设置配置于 \[.env. development\]{.title-ref}.

**注意: . env. private 应该加入到你的项目的. gitignore 所以它 不被检查.**

## 在当地制作Webpack

在某些情况下,你可能想要运行一个生产 Webpack 构建 当地。 为当地生产大楼提供服务:

1.  创建一个 `env.config.js` 包含配置的文件 地方发展,但 `NODE_ENV='production'`。 。 。 .
2.  运行 `npm run build` 建立生产资产。 产出 资产将依赖于在 前一个步骤.
3.  添加国家预防机制脚本 `serve` 您的应用程序 `package.json` (即:, `"serve": "fedx-scripts serve"`) (中文(简体) ).
4.  运行 `npm run serve` 服务于您的生产建设资产。 它会 尝试在您指定的同一端口上运行构建 `env.config.js` 文档.

## 发展

这个项目利用命令行接口,用于 Webpack, jest, 埃斯林特和贝布尔 因此,地方发展可能很棘手。 这个 这个项目最简单的本地开发方式是运行 以实例或用已有文件测试工程中的脚本 计划:

1.  删除主机项目中的节点 模块目录 : `rm -rf node_modules/`
2.  在主机项目内移动前端构建并删除其节点 模块文件夹 `mv ../frontend-build ./ && rm -rf frontend-build/node_modules`
3.  安装前端构建的开发版本 `npm i --save-dev @edx/frontend-build@file:./frontend-build`。 。 。 .

## 许可证

此寄存器中的代码根据 AGPLv3 许可, 除非 另有说明.

请看 [自由主义](https://npmcn.com/package/%40edx/frontend-build/LICENSE) 详细情况.

## 捐款

捐款非常受欢迎。 请阅读 [怎么样 贡献](https://openedx.org/r/how-to-contribute) 详细情况.

此项目目前接受各类贡献, 错误 修正、安全修正、维修工作或新功能。 不过, 请确保讨论一下你的新创意 开发前的维护者 接受你的改变。 您可以创建对话 新的一期 总结你的想法.

## 获取帮助

如果你有麻烦,我们有讨论论坛 [https://discuss.openedx.org (中文(简体) )](https://discuss.openedx.org/) 能够与其他人在 社区.

我们的实时对话在Slack上 你可以要求一个 [偷懒 邀请](https://openedx.org/slack),然后加入我们的 [社区黑 工作空间](https://openedx.slack.com/)因为它是前端 最好的讨论地点是 [{\\fn方正粗倩简体\\fs12\\an8\\1chffff00\\b0}wg前端 频道](https://openedx.slack.com/archives/C04BM6YC7A6)。 。 。 .

对于任何非部落,最好的途径是 打开一个问题在这里 包含您所面临的问题的详细信息 可以提供.

[https://github.com/openedx/frontend-building/issues 互联网档案馆的存檔,存档日期2013-12-02](https://github.com/openedx/frontend-build/issues)

关于这些选项的更多信息,请参见: [获取 帮助](https://openedx.org/community/connect) 页 次.

## 报告安全问题

请不要公开报告安全问题。 请发电子邮件 [安全性@ openedx.org](mailto:security@openedx.org)。 。 。 .

## 优化

要通过减少未使用的 CSS 来增加优化, 您可以设置 `USE_PURGECSS=true` 内 `.env` 或作为ENV var 在相应的MFE. 但请注意,这样做会增加30%的建设时间。 这是 因此,不建议在开发期间使用这一选项。 另一方面 手,启用 PurgeCSS 将增加终端浏览器的性能 用户人数高达20%(按 [灯塔](https://developer.chrome.com/docs/lighthouse/overview/)) (中文(简体) ). 鼓励经营者做好生产部署.

欲了解更多关于优化微额供资的信息,请参见: [问题 138号](https://github.com/openedx/wg-frontend/issues/138) 输入 wg-前端仓库.

## 常见问题

### @edx/frontend-build 是什么？

为前端应用程序构建工具、设置和配置

### 如何安装 @edx/frontend-build？

在项目目录运行 npm install @edx/frontend-build，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^16\.9\.0 \|\| ^17\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。它还提供命令行工具 fedx-scripts，可以用 npx fedx-scripts 直接运行。

### @edx/frontend-build 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/edx\_\_frontend-build 是否存在。

### @edx/frontend-build 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @edx/frontend-build 可以商用吗？

@edx/frontend-build 使用 AGPL-3\.0 许可。最严格的 Copyleft：除分发外，通过网络向用户提供基于它的服务也需要开源对应源码。闭源 SaaS 使用前务必评估。以上为概括，不构成法律意见，请以许可原文为准。

### @edx/frontend-build 的下载量有多少？

根据 npm 官方下载统计，@edx/frontend-build 在 2026/10/13 – 2026/11/11 这 30 天内被下载 7,747 次，日均约 258 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @edx/frontend-build 还在维护吗？

最新版本 13\.0\.14 发布于 2023/12/15（2 年前）；至今共发布 295 个版本，其中过去 12 个月发布了 0 个；首次发布于 2019/09/25。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。