前端建设
警告: 软件包已移动
虽然Paragon设计系统将继续收到更新,但这些更新 将不再在@edx/frontend-building NPU套件上发表。 相反 可通过下列方式找到最新版本: @ openedx/ 前端建设 换句话说.
目的
这一一揽子计划的目的是提供一个常识基础和 前端项目的设置包括:
- 林特(斯林特)
- 测试(测试)
- 开发服务器(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' },
],
};
步骤
- 复制
module.config.js进入您的前端应用程序库, 必要时修改. - 运行
npm install && npm run build在任何共享的国家预防机制软件包中 想要本地使用 . - 重新启动你的应用程序.
页:1
- “ dir” 和“ dist” 键使您对 形状。 举例来说, 需要两个单独的条目来接收JS和SCSS的进口.
- 目录位置
../src(关于你的根 建议为共享的国家预防机制软件包提供前端应用程序存储器) 存储器,因为不管您是否运行 前端通过devstack。 如果你是的话 没有 运行您的前端 devstack, 然后你可以把共享的图书馆 任何地方在你的 文件系统,相应更新“ dir”密钥。 要学得更多, 见 这个本地版的 ADR 软件包。 。 。 . - 此机制使用 Webpack 解析别名, 如本文所记载: https://webpack.js.org/configulation/resolve/#resolvealias (英语)
以 .env. private 取代默认.env. 开发环境变量
在某些情况下,您可能想要覆盖开发环境 在.env.中定义的带有私人环境变量的变量 永远不要被检查到仓库。 例如,a .env. 开发文件可能包含第三方服务的秘密 (例如Algolia),你想在开发期间使用,但希望 确保这些秘密不被检查到Git.
您可以创建一个 [.env.private] {.title-ref] , 并附带任何更改 环境设置配置于 [.env. development]{.title-ref}.
注意: . env. private 应该加入到你的项目的. gitignore 所以它 不被检查.
在当地制作Webpack
在某些情况下,你可能想要运行一个生产 Webpack 构建 当地。 为当地生产大楼提供服务:
- 创建一个
env.config.js包含配置的文件 地方发展,但NODE_ENV='production'。 。 。 . - 运行
npm run build建立生产资产。 产出 资产将依赖于在 前一个步骤. - 添加国家预防机制脚本
serve您的应用程序package.json(即:,"serve": "fedx-scripts serve") (中文(简体) ). - 运行
npm run serve服务于您的生产建设资产。 它会 尝试在您指定的同一端口上运行构建env.config.js文档.
发展
这个项目利用命令行接口,用于 Webpack, jest, 埃斯林特和贝布尔 因此,地方发展可能很棘手。 这个 这个项目最简单的本地开发方式是运行 以实例或用已有文件测试工程中的脚本 计划:
- 删除主机项目中的节点 模块目录 :
rm -rf node_modules/ - 在主机项目内移动前端构建并删除其节点
模块文件夹
mv ../frontend-build ./ && rm -rf frontend-build/node_modules - 安装前端构建的开发版本
npm i --save-dev @edx/frontend-build@file:./frontend-build。 。 。 .
许可证
此寄存器中的代码根据 AGPLv3 许可, 除非 另有说明.
请看 自由主义 详细情况.
捐款
捐款非常受欢迎。 请阅读 怎么样 贡献 详细情况.
此项目目前接受各类贡献, 错误 修正、安全修正、维修工作或新功能。 不过, 请确保讨论一下你的新创意 开发前的维护者 接受你的改变。 您可以创建对话 新的一期 总结你的想法.
获取帮助
如果你有麻烦,我们有讨论论坛 https://discuss.openedx.org (中文(简体) ) 能够与其他人在 社区.
我们的实时对话在Slack上 你可以要求一个 偷懒 邀请,然后加入我们的 社区黑 工作空间因为它是前端 最好的讨论地点是 {\fn方正粗倩简体\fs12\an8\1chffff00\b0}wg前端 频道。 。 。 .
对于任何非部落,最好的途径是 打开一个问题在这里 包含您所面临的问题的详细信息 可以提供.
https://github.com/openedx/frontend-building/issues 互联网档案馆的存檔,存档日期2013-12-02
关于这些选项的更多信息,请参见: 获取 帮助 页 次.
报告安全问题
请不要公开报告安全问题。 请发电子邮件 安全性@ openedx.org。 。 。 .
优化
要通过减少未使用的 CSS 来增加优化, 您可以设置
USE_PURGECSS=true 内 .env 或作为ENV var 在相应的MFE.
但请注意,这样做会增加30%的建设时间。 这是
因此,不建议在开发期间使用这一选项。 另一方面
手,启用 PurgeCSS 将增加终端浏览器的性能
用户人数高达20%(按
灯塔) (中文(简体) ).
鼓励经营者做好生产部署.
欲了解更多关于优化微额供资的信息,请参见: 问题 138号 输入 wg-前端仓库.