PatternFly开发

在了解了 PatternFly简介 之后，作为开发者，我们可以在PatternFly的Demo基础上定制开发，也可以自行做 PatternFly设计 。

安装包管理器

安装Yarn(可选)

  • 使用发行版安装 yarn

    sudo dnf install yarnpkg

  • (我使用发行版方法)使用 npm (已经包含在 node.js )安装和升级Yarn:

    npm install --global yarn

备注

我参考 Patternfly React Seed 项目 文档，采用 npm 管理包(使用yarn虽然也可以，但是会提示和仓库中其他包管理冲突，看来官方是使用npm，并且文档案例也是如此)

起步

警告

原文

  • 使用React seed起步

  • 安装和配置PatternFly React

但是实际上文档没有及时更新，目前应该按照 Patternfly React Seed 项目 使用一个 使用React seed 起步就可以，如果再叠加 安装和配置PatternFly React 会导致文件冲突破坏

使用React seed起步

  • Fork出 Patternfly React Seed 项目

  • 安装项目:

    git clone https://github.com/patternfly/patternfly-react-seed
mv patternfly-react-seed dashboard
cd dashboard
npm install && npm run start:dev

备注

Patternfly React Seed 项目 默认分支是 TypeScript，如果要使用JavaScript，则Fork和clone出 JavaScript branch of the PatternFly React Seed project

备注

使用 yarn 代替 npm 进行包管理会提示:

warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.

备注

npm run start:dev 输出信息提示 Project is running at http://localhost:9000/ ，所以通过 SSH隧道 方式建立访问服务器通道(我的程序运行在远端 z-dev 虚拟机中，如果你只是本地电脑开发，可忽略这步)

npm和yarn启动监听端口不同:

- npm 使用浏览器访问 http://localhost:9000/
- yarn 使用浏览器访问 http://192.168.6.253:8080/ (其实是对外开放)

应该看到一个初始页面:

../../_images/patternfly_init_start.png

Patternfly React Seed 项目 提供了一些 Patternfly Seed Development scripts 案例，可以作为参考命令

安装和配置PatternFly React(废弃)

原文这个步骤应该不再需要，我的实践最终参考 Patternfly React Seed 项目

HTML/CSS

备注

安装了 Patternfly React Seed 项目 后执行本步骤

HTML/CSS库提供了一系列代码案例，可以使用统一的PatternFly markup和styling来构建接口。

  • 使用 npm 方式安装:

    npm install @patternfly/patternfly --save

这里会有一点提示:

added 1 package, and audited 2872 packages in 35s

229 packages are looking for funding
  run `npm fund` for details

47 vulnerabilities (1 low, 6 moderate, 37 high, 3 critical)

To address issues that do not require attention, run:
  npm audit fix

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

这个命令执行会在 ./node_modules/@patternfly 目录下再增加一个 patternfly 子目录，包含了一系列组件，后续可以进行定制

完成了HTML/CSS安装之后，包含了:

三大模块(layouts, components, utilities) 提供了一个 Sass 文件 (.scss) 和 CSS 文件。如果需要定制元素，建议从 .scss 文件中寻找变量，并扩展变量，而不是直接覆盖CSS。

当安装了 PatternFly之后，软件包包括了:

  • 面向整个编译库的单个文件: node_modules/@patternfly/patternfly/patternfly.css

  • 每个组件单独编译的独立文件: node_modules/@patternfly/patternfly/<ComponentName>/styles.css

  • 面向整个库源代码(Sass)的单个文件: node_modules/@patternfly/patternfly/patternfly.scss

  • 每个组件源代码(Sass)的独立文件: node_modules/@patternfly/patternfly/<ComponentName>/styles.scss

通过使用上述文件来定制库，实现不同项目的需求

配置项目

备注

提交到git仓库时，在 dashboard 目录下有一个 .gitignore 控制忽略以下文件提交:

不包含在patternfly中提交的文件，通过npm install获取
**/node_modules
dist
yarn-error.log
yarn.lock
stats.json
coverage
storybook-static
.DS_Store
.idea
.env

所以把自己的项目从git仓库中再次clone下来之后，需要恢复 dashboard 目录下这个 .gitignore 文件，并执行以下命令恢复运行环境:

npm install && npm start run:dev

默认 npm start run:dev 只监听本地回环地址，所以如果要提供给外部查看，需要绑定所有网络接口: 参考 How to make the webpack dev server run on port 80 and on 0.0.0.0 to make it publicly accessible? 修改 webpack.dev.js :

webpack.dev.js 配置绑定主机所有网络接口
...
/* const HOST = process.env.HOST || 'localhost'; */
const PORT = process.env.PORT || '9000';
...
module.exports = merge(common('development'), {
  mode: 'development',
  devtool: 'eval-source-map',
  devServer: {
/*    host: HOST, */
    host: '0.0.0.0',
    port: PORT,
...

对于代码中使用到的 react 模块，如果之前没有包含，则需要修订 package.json 添加。例如，运行报错:

ERROR in ./src/app/Count/Arm/ArmCount.tsx 3:0-72
Module not found: Error: Can't resolve '@patternfly/react-table' in '/home/admin/onesre/dashboard/src/app/Count/Arm'
resolve '@patternfly/react-table' in '/home/admin/onesre/dashboard/src/app/Count/Arm'

则修订 package.json 添加:

添加新引入的组件依赖
  "dependencies": {
    ...
    "@patternfly/react-styles": "^4.31.1",
    "@patternfly/react-table": "^4.31.1",
    ...
  }

然后再次运行:

npm install && npm run start:dev

参考