如何把 Refine CLI 添加到已有项目并使用 refine 命令【免费下载链接】refineA React Framework for building internal tools, admin panels, dashboards B2B apps with unmatched flexibility.项目地址: https://gitcode.com/GitHub_Trending/re/refine如果你手上是一个已经存在的 React、Next.js 或 Remix 项目而不是通过create-refine-app脚手架生成的那么 Refine CLI 默认并不在项目中——官方文档明确说明CLI 只在用create refine-app创建的项目里自动安装。想让已有项目也能执行npm run refine swizzle、npm run refine add resource、npm run refine update这类命令需要手动安装refinedev/cli并在package.json中注册refine脚本。本文基于 Refine CLI 文档 和 Development 文档 给出完整的操作步骤与验证方式。准备条件一个已有项目package.json中已在使用 npm、pnpm 或 yarn 中的任意一种包管理器文档中的安装命令按这三种包管理器分别给出。如果项目已经装了refinedev/core等 Refine 包CLI 相关命令如swizzle只会列出项目中实际安装的包所以建议先确保要操作的 Refine 包已安装。第一步安装 refinedev/cli文档要求把refinedev/cli加入项目的dependencies。按你使用的包管理器执行# npm npm i refinedev/cli# pnpm pnpm add refinedev/cli# yarn yarn add refinedev/cli这一步的副作用是向项目写入依赖并更新锁文件属于常规安装操作。第二步在 package.json 中注册 refine 脚本安装完成后在package.json的scripts字段里加一条refine: refine。CLI 文档给出的 diff 如下{ scripts: { refine: refine } }这样做的原理是refine可执行文件随refinedev/cli安装在node_modules/.bin下通过npm run调用该脚本即可执行 CLI。验证 CLI 是否可用注册脚本后运行npm run refine不跟任何子命令时CLI 会打印Usage: refine command [options]和完整的命令列表。文档展示的输出示例实际版本号以你安装的为准以下是文档示例 npm run refine Usage: refine command [options] Options: -v, --version Output the current version. -h, --help Output usage information. Commands: swizzle Export a component or a function from refine packages to customize it in your project create-resource [options] Create a new resource files (deprecated, please use add resource command) update [options] Interactively select and update all refine packages to selected version. To skip the interactive mode, use the --all option. dev [options] [args...] It runs: unknown . Also accepts all the arguments unknown accepts. build [options] [args...] It runs: unknown . Also accepts all the arguments unknown accepts. start [options] [args...] It runs: unknown . Also accepts all the arguments unknown accepts. run [command] [args...] Runs a defined package script. If no command is provided, it will list the available scripts check-updates Check all installed refine packages are up to date whoami View the details of the development environment proxy [options] Manage proxy settings devtools [command] Start or install refines devtools server; it starts on port 5001. add Add new resources, providers, or integrations help [command] display help for command看到命令列表就说明refine命令已经生效。另外两个文档给出的验证方式Development 文档建议用npm run refine -- --help查看可用命令。npm run refine whoami会打印开发环境详情操作系统、CPU、Node/Yarn/npm 版本、浏览器以及项目中已安装的全部refinedev/*包版本文档示例 npm run refine whoami ## System: - OS: macOS 13.0 - CPU: (8) arm64 Apple M1 Pro ## Binaries: - Node: 16.14.0 - ~/.nvm/versions/node/v16.14.0/bin/node - Yarn: 1.22.17 - /opt/homebrew/bin/yarn - npm: 8.3.1 - ~/.nvm/versions/node/v16.14.0/bin/npm ... ## Refine Packages: - refinedev/antd: 3.62.0 - refinedev/cli: 1.5.1 - refinedev/core: 3.88.1以上为文档示例具体数值取决于你的环境。如果Refine Packages一节列出了你项目里的 refine 包说明 CLI 已正确识别到它们。可选把 dev / build / start 脚本替换为 refine runner文档建议不是必须把package.json里的平台脚本改为通过refine执行。这样refine dev会自动检测项目使用的框架并执行对应命令同时文档明确说明这样做的好处是在运行时给出提醒让 Refine 包保持更新。Development 文档还补充了 runner 的额外能力如果安装了refinedev/devtoolsrefine dev会自动启动 devtools 服务器同时会检查更新并推送 Refine 团队公告。各平台的替换 diff 如下保留原有平台命令只改调用方式ReactCreate React App{ scripts: { - dev: react-scripts start, - build: react-scripts build, dev: refine dev, build: refine build, } }Vite{ scripts: { - dev: vite, - build: vite build, - start: vite preview dev: refine dev, build: refine build, start: refine start } }Next.js{ scripts: { - dev: next dev, - build: next build, - start: next start, dev: refine dev, build: refine build, start: refine start, } }Remix{ scripts: { - dev: remix dev, - build: remix build, - start: remix-serve build dev: refine dev, build: refine build, start: refine start, } }替换后npm run refine [dev | start | build]会按框架执行等价命令React 平台对应react-scripts/vite的 start/buildNext.js 对应next dev/next start/next buildRemix 对应remix dev/remix-serve start/remix build。框架支持的所有参数和参数都可以透传例如npm run refine dev --port 3001会把应用跑在3001端口。替换后可以直接跑一次npm run dev或你项目里对应的启动脚本确认应用照常启动即验证脚本替换没有破坏原有构建链路。安装后常用命令refine脚本就绪后日常会用到这几个命令均来自 CLI 文档命令用途npm run refine swizzle交互式选择包和组件把 Refine 包内的组件/函数导出到你项目里以便自定义npm run refine add resource为指定资源生成 CRUD 组件文件旧的create-resource已标记 deprecated文档提示改用add resourcenpm run refine add provider auth生成 provider 的空实现骨架可选auth、data、live、access-control、audit-log、i18n、notificationnpm run refine add integration交互式为项目添加 UI/路由集成如 Ant Design、React Routernpm run refine update交互式更新过期的 refine 包加--all跳过交互--dry-run只打印安装命令不执行npm run refine check-updates以表格展示已安装 refine 包的 current / wanted / latest 版本npm run refine run command运行package.json中定义的其他脚本找不到时回退到node_modules/.bin用于跑 CLI 未支持的命令npm run refine whoami查看开发环境与已安装 refine 包详情使用 swizzle 时的行为边界把组件导出到项目后你会直接编辑这些文件所以文档给出了三点行为说明CLI 会按你使用的框架决定导出路径例如普通 React/Vite 项目是src/components/layoutRemix 项目则是app/components/layout。交互式选择包时只会列出项目中已安装的 refine 包。目标目录中已存在同名文件时swizzle不会覆盖它。以Layout组件为例执行npm run refine swizzle并选择refinedev/antd包、Layout组件后文档展示的示例输出Successfully swizzled Layout Files created: - src/components/layout/sider.tsx - src/components/layout/header.tsx - src/components/layout/title.tsx - src/components/layout/index.tsx输出末尾会提示如果想改默认布局需要在Refine组件内部用导出的Layout包裹页面例如import { Layout } from components/layout后在Refine内使用Layout。限制与注意dev、start、build三个 runner 依赖 CLI 对框架的自动检测文档按 ReactCRA/Vite、Next.js、Remix 三类平台分别给出等价命令如果你的平台脚本不在上述列表内建议保留原脚本只用npm run refine跑 swizzle、add、update 等命令。update命令会实际执行安装除非加--dry-run--tag支持latest、next两个版本范围交互模式下会按 Patch / Minor / Major 分组展示可选包。更多命令细节add的-a/--actions、-p/--path参数默认路径等见 CLI 文档。完成以上步骤后判断标准很直接npm run refine能打印命令列表、npm run refine whoami能列出项目里已安装的refinedev/*包版本即表示 Refine CLI 已成功接入你的已有项目之后swizzle、add、update等命令都通过npm run refine command调用即可。【免费下载链接】refineA React Framework for building internal tools, admin panels, dashboards B2B apps with unmatched flexibility.项目地址: https://gitcode.com/GitHub_Trending/re/refine创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考