.. _patternfly_develop: ======================== PatternFly开发 ======================== 在了解了 :ref:`intro_patternfly` 之后，作为开发者，我们可以在PatternFly的Demo基础上定制开发，也可以自行做 :ref:`patternfly_design` 。 安装包管理器 =============== - 安装 ``npm`` :ref:`fedora_dev_nodejs` 安装Yarn(可选) ------------------ - 使用发行版安装 ``yarn`` :: sudo dnf install yarnpkg - (我使用发行版方法)使用 ``npm`` (已经包含在 node.js )安装和升级Yarn:: npm install --global yarn .. note:: 我参考 `Patternfly React Seed 项目 `_ 文档，采用 ``npm`` 管理包(使用yarn虽然也可以，但是会提示和仓库中其他包管理冲突，看来官方是使用npm，并且文档案例也是如此) 起步 ========== .. warning:: 原文 - 使用React seed起步 - :strike:`安装和配置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 .. note:: `Patternfly React Seed 项目 `_ 默认分支是 TypeScript，如果要使用JavaScript，则Fork和clone出 `JavaScript branch of the PatternFly React Seed project `_ .. note:: 使用 ``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. .. note:: ``npm run start:dev`` 输出信息提示 ``Project is running at http://localhost:9000/`` ，所以通过 :ref:`ssh_tunneling` 方式建立访问服务器通道(我的程序运行在远端 ``z-dev`` 虚拟机中，如果你只是本地电脑开发，可忽略这步) npm和yarn启动监听端口不同:: - npm 使用浏览器访问 http://localhost:9000/ - yarn 使用浏览器访问 http://192.168.6.253:8080/ (其实是对外开放) 应该看到一个初始页面: .. figure:: ../../_static/javascript/patternfly/patternfly_init_start.png :scale: 50 `Patternfly React Seed 项目 `_ 提供了一些 `Patternfly Seed Development scripts `_ 案例，可以作为参考命令 安装和配置PatternFly React(废弃) --------------------------------- 原文这个步骤应该不再需要，我的实践最终参考 `Patternfly React Seed 项目 `_ HTML/CSS =========== .. note:: 安装了 `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//styles.css`` - 面向整个库源代码(Sass)的单个文件: ``node_modules/@patternfly/patternfly/patternfly.scss`` - 每个组件源代码(Sass)的独立文件: ``node_modules/@patternfly/patternfly//styles.scss`` 通过使用上述文件来定制库，实现不同项目的需求 配置项目 ============ .. note:: 提交到git仓库时，在 ``dashboard`` 目录下有一个 ``.gitignore`` 控制忽略以下文件提交: .. literalinclude:: patternfly_develop/gitignore :language: bash :caption: 不包含在patternfly中提交的文件，通过npm install获取 :emphasize-lines: 1 所以把自己的项目从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`` : .. literalinclude:: patternfly_develop/webpack.dev.js :language: javascript :caption: webpack.dev.js 配置绑定主机所有网络接口 :emphasize-lines: 2,9,10 对于代码中使用到的 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`` 添加: .. literalinclude:: patternfly_develop/package.json :language: javascript :caption: 添加新引入的组件依赖 然后再次运行:: npm install && npm run start:dev 参考 ======== - `Develop with PatternFly `_