构建者.io 视觉 CMS Devtools
设置和整合 构建者.io 视觉 CMS 使用 Devtools 插件进行开发。 建构器 Devtools 可以通过两种方式与项目开发结合起来 下一个.js 配置, (中文(简体) ), 重混配置, (中文(简体) ), Vite 插件,或 Webpack 插件。 。 。 .
安装构建器 Devtools
建筑师的 Devtools 可以是 安装和初始化 使用:
无
npm init builder.io@latest
小时
pnpm create builder.io@latest
此命令将更新配置文件( 如下个. config.js, 或 vite. config.js)并安装 @builder.io/dev-tools 软件包。 一旦安装, 您可以启动您的应用程序的 Dev 服务器 :
npm run dev
地方发展
本地开发和测试构建器 Devtools :
- 在devtools目录中,构建并链接软件包:
cd dist/dev-tools
npm link
- 在您的应用程序目录中, 链接到本地 devtools :
npm link @builder.io/dev-tools
- 您现在可以运行 Figma 生成命令 :
npx builder.io figma generate
手动安装
或者,您可以手动安装 Builder 的 Devtools, 并按照以下步骤更新配置文件 .
npm install -D @builder.io/dev-tools
下一步是在您的构建工具的配置文件中添加 Devtools 插件 。 例如,如果您正在使用 Next.js , 请参见下面关于如何导入和添加 Devtools 到 Next.js app 的文件 .
下一个.js
配置包件函数 下一个.js 配置 用于在开发期间运行 Devtools 。 使用 withBuilderDevTools() 在配置文件顶端需要时创建的函数.
// next config file
const withBuilderDevTools = require("@builder.io/dev-tools/next")({
// Builder Devtools Options
});
module.exports = withBuilderDevTools({
// next config
});
或配置为函数 :
module.exports = (phase, defaultConfig) => {
return withBuilderDevTools(defaultConfig);
};
重混合
配置包件函数 重混配置 用于在开发期间运行 Devtools 。 使用 withBuilderDevTools() 在配置文件顶端需要时创建的函数.
// remix config file
const withBuilderDevTools = require("@builder.io/dev-tools/remix")({
// Builder Devtools Options
});
module.exports = withBuilderDevTools({
// remix config
});
维特
这个 Vite 插件 对于Devtools来说,它是指使用Vite开发的框架。 目前, Devtools 支持 齐克 与维特融合. 导入 builderDevTools 从 @builder.io/dev-tools/vite 并将其作为第一个确保运行在他人之前的插件.
// vite config file
import { defineConfig } from "vite";
import { builderDevTools } from "@builder.io/dev-tools/vite";
export default defineConfig(() => {
return {
plugins: [builderDevTools()],
};
});
网络软件包
Devtools Webpack插件用于React项目. 如果你的项目使用 Next.js,请参见 下一个.js 上面关于如何在下一个配置中添加 Devtools 插件的文档 。 下面是将军 网络包配置 反应项目.
// webpack config file
const { BuilderDevToolsPlugin } = require("@builder.io/dev-tools/webpack");
module.exports = {
plugins: [new BuilderDevToolsPlugin()],
};
国 际
Devtools也可以从CLI指令开始,如果有不符合上述解决方案之一的自定义设置,这种指令可能有用. 以下是从 npm 脚本运行 CLI 的例子 :
{
"scripts": {
"devtools": "builder-dev-tools"
}
}
环境变量
BUILDER GBAL AMPLUDE 互联网档案馆的存檔,存档日期2013-12-02
设定 BUILDER_DISABLE_AMPLITUDE=true 在使用 Devtools CLI 时禁用振幅分析跟踪。 这对于有隐私意识的环境或者当你想阻止分析数据收集时,是有用的.
BUILDER_DISABLE_AMPLITUDE=true npx builder.io fusion dev
或者把它加进你的 .env 文件 :
BUILDER_DISABLE_AMPLITUDE=true