如何用 Node.js 构建 Taipy GUI 的前端 JavaScript 资源包【免费下载链接】taipyTurns Data and AI algorithms into production-ready web applications in no time.项目地址: https://gitcode.com/GitHub_Trending/ta/taipyTaipy GUI 的客户端 Web 应用用 TypeScript 和 React 编写在 Python 侧的 taipy-gui 包向浏览器交付界面前这部分前端代码必须先打包成 JavaScript 资源包。如果你正在 taipy 仓库中做前端开发、提交贡献或想本地安装开发版本就需要用 Node.js 从源码构建这个包安装依赖、执行npm run build最终产物落在仓库根目录的taipy/gui/webapp中。准备条件Node.js 18 或更高版本。frontend/taipy-gui/README.md 和 CONTRIBUTING.md 对该版本的要求一致标准安装的 Node.js 自带npm包管理器无需额外安装。已将 taipy 仓库克隆到本地克隆方式见 CONTRIBUTING.md 的 Cloning the repository 一节。构建 JavaScript 资源包本身不需要 Python。只有后续要editable 安装 Python 包使用时才要求系统装有 Python 3.9 或更高版本taipy/gui/INSTALLATION.md。构建步骤在仓库根目录下按顺序执行以下命令与 CONTRIBUTING.md 的 Building the JavaScript bundles 一节一致cd frontend/taipy-gui # 安装 DOM 依赖一次性README 中标注 once and for all cd dom npm i cd .. # 安装 web app 依赖 npm i # 构建 web app 和所有元素 npm run build各步骤的作用frontend/taipy-gui/dom安装 DOM 资源包的依赖。查看 dom/package.json 可以看到它依赖一个本地包taipy-gui: file:../packaging即同目录 packaging 中的类型定义这解释了为什么该目录要单独先装依赖而且只需一次。frontend/taipy-gui下的npm i安装 web app 依赖即 package.json 中列出的 React、MUI、plotly 等库及其 devDependencies。npm run build对应脚本webpack --mode production见 package.json 的 scripts。taipy/gui/INSTALLATION.md 提示这一步需要几分钟。构建过程中 ESLint 作为 webpack 插件一并运行webpack.config.js 中的ESLintPlugin代码风格错误会在构建阶段直接报出。验证构建产物成功判据来自 frontend/taipy-gui/README.md命令成功执行后会在[taipy-dir]/taipy/gui/webapp创建新目录其中包含 Taipy GUI 前端依赖的全部代码。按 webpack.config.js 的配置该目录下应包含以下产物可以据此核对构建是否完整taipy-gui-deps.dll.js和taipy-gui-deps-manifest.jsonReact、MUI 等依赖的 DLL 包及其 manifesttaipy-gui.jsUMD 格式主包入口为src/extensions/exports.tstaipy-gui-dom.jsDOM 资源包index.html由public/index.html模板生成taipy.status.json构建时写入frontend_version取自 package.json 的 version 字段当前为 4.2.0、frontend_build_date、frontend_build_mode三个字段用生产方式构建时frontend_build_mode应为production从public/目录复制的静态资源不含 .html以及packaging/中的.d.ts类型文件。列出taipy/gui/webapp目录内容即可验证上述文件是否齐全。可选分支调试构建如果计划修改前端代码、需要在浏览器中调试 TypeScript用开发模式构建替代标准构建CONTRIBUTING.mdnpm run build:dev它执行webpack --mode development会保留调试符号使你可以从调试器中跳转到 TypeScript 源码。webpack 配置中devtool: inline-source-map也仅在 development 模式下生效这与文档描述一致。可选分支免重装 Python 包验证前端改动开发前端代码时反复重装 taipy-gui 包并不必要因为变化的只是 JavaScript 资源包。默认情况下Taipy GUI 从已安装包内的taipy/gui/webapp目录查找前端代码CONTRIBUTING.md 的表述taipy/gui/INSTALLATION.md 同一节写作taipy/src/gui/webapp两处文档不一致以实际安装版本中的路径为准。把环境变量TAIPY_GUI_WEBAPP_PATH指向你反复构建产物所在的目录Taipy GUI 就会从那里加载 web app无需重装包export TAIPY_GUI_WEBAPP_PATH/path/to/your/taipy/taipy/gui/webappimport os os.environ[TAIPY_GUI_WEBAPP_PATH] os.path.normpath(/path/to/your/taipy/taipy/gui/webapp)示例中的/path/to/your/taipy是文档原有占位符替换为你本地 taipy 仓库的绝对路径即可目标即构建产物所在的taipy/gui/webapp目录。构建顺序与后续步骤仓库中还有第二个前端资源包frontend/taipyScenario Management 元素frontend/README.md 明确构建它之前必须先完成taipy-gui部分。构建完本文的包后进入frontend/taipy执行npm i和npm run build产物生成在taipy/gui_core/lib见 frontend/taipy/README.md。若要在使用端跑起来回到仓库根目录执行pip install -e . --user将开发版本以可编辑方式安装taipy/gui/INSTALLATION.md。构建之外package.json 的 scripts 还提供了npm run lintESLint 检查 .ts/.tsx和npm testcross-env TZUTC jest用于前端代码的静态检查与测试。【免费下载链接】taipyTurns Data and AI algorithms into production-ready web applications in no time.项目地址: https://gitcode.com/GitHub_Trending/ta/taipy创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考