@ alwaysmeticulous/recorder-plugin (英语)
注入此选项的捆绑插件 金属录音机
脚本进入 <head> 您的应用程序的 HTML, 每集有一个切入点
支持捆绑/框架.
默认情况下,记录器只在开发建设期间被注入—— 匹配 Meticulous 的建议, 将真实的会话记录在进行中或 通过明确的选择进入生产.
建于顶上
unplugin@3财务报告和审定财务报表tsdown仅限无害环境管理,要求节点20.19+.
安装
npm install @alwaysmeticulous/recorder-plugin --save-dev
# or with yarn
yarn add -D @alwaysmeticulous/recorder-plugin
# or with pnpm
pnpm add -D @alwaysmeticulous/recorder-plugin
使用量
维特
// vite.config.ts
import meticulous from "@alwaysmeticulous/recorder-plugin/vite";
export default defineConfig({
plugins: [
meticulous({
recordingToken: "<your-recording-token>",
}),
],
});
网络软件包
// webpack.config.mjs
import meticulous from "@alwaysmeticulous/recorder-plugin/webpack";
export default {
plugins: [meticulous({ recordingToken: "<your-recording-token>" })],
};
该插件与
html-webpack-plugin 何时
存在,否则会回到重写任何排放物 .html 资产.
包装
// rspack.config.mjs
import meticulous from "@alwaysmeticulous/recorder-plugin/rspack";
export default {
plugins: [meticulous({ recordingToken: "<your-recording-token>" })],
};
建设
更喜欢专用的 Rsbuild 条目, 它钩入 Rsbuild 的 modifyHTML API : (英语)
// rsbuild.config.ts
import { defineConfig } from "@rsbuild/core";
import meticulous from "@alwaysmeticulous/recorder-plugin/rsbuild";
export default defineConfig({
plugins: [meticulous({ recordingToken: "<your-recording-token>" })],
});
您也可以通过 rspack 插件 tools.rspack 如果你需要的话
用其他只使用 rspack 的插件来作曲 :
// rsbuild.config.ts
import { defineConfig } from "@rsbuild/core";
import meticulous from "@alwaysmeticulous/recorder-plugin/rspack";
export default defineConfig({
tools: {
rspack: {
plugins: [meticulous({ recordingToken: "<your-recording-token>" })],
},
},
});
坚果
// nuxt.config.ts
export default defineNuxtConfig({
modules: [
[
"@alwaysmeticulous/recorder-plugin/nuxt",
{ recordingToken: "<your-recording-token>" },
],
],
});
Nuxt 模块通过 nuxt.options.app.head.script, (中文(简体) ),
供入硝基的管道 并正确工作
纳克斯特用的是哪个.
选项
import type { Options } from "@alwaysmeticulous/recorder-plugin";
| 选项 | 类型 | 默认 | 说明 |
|---|---|---|---|
recordingToken | string (必须) | —— 说 | 你的默契录音 被确认为 data-recording-token 在注射时 <script>。 。 。 . |
enabled | "development" | "always" | "never" | (ctx) => boolean | "development" | 何时入入入. "development" 仅在开发建设期间注入( Vite) command === "serve" 或网络包装/软件包 mode !== "production") (中文(简体) ). 传出全控功能. |
inject | "auto" | "replace" | "auto" | "auto" 预留新 <script> 作为第一个孩子 <head>。 。 。 . "replace" 交换占位符脚本标记(见下文). |
placeholderAttribute | string | "data-meticulous" | 当 inject: "replace"。 。 。 . |
snippetUrl | string | "https://snippet.meticulous.ai/v1/meticulous.js" | 覆盖片段 URL . |
attributes | Record<string, string | boolean | null | undefined> | {} | 附加属性于 <script> 标记(例如). nonce) (中文(简体) ). true 发出布尔属性; false编号 :null编号 :undefined 跳过。 覆盖任何默认属性,包括 data-is-production-environment。 。 。 . |
插件总是发出 data-is-production-environment="true" 或者说
data-is-production-environment="false" 在注射时 <script> 基于
捆绑器的检测模式( Vite) command === "build" && mode === "production", (中文(简体) ),
网络包装/软件包 mode === "production") (中文(简体) ). 通过它覆盖 attributes 狦
需要不同的行为:
meticulous({
recordingToken: "<your-recording-token>",
attributes: {
"data-is-production-environment":
process.env.MY_ENV === "prod" ? "true" : "false",
},
});
记录器装入时控制
meticulous({
recordingToken: "<your-recording-token>",
// Always inject — useful in staging.
enabled: "always",
});
meticulous({
recordingToken: "<your-recording-token>",
// Custom predicate.
enabled: (ctx) => ctx.framework === "vite" && ctx.mode !== "test",
});
上游收到一个 EnabledContext数字 :
interface EnabledContext {
framework: "vite" | "webpack" | "rspack";
mode?: string; // Vite mode / webpack mode / NODE_ENV fallback
command?: "serve" | "build"; // Vite-only
isProduction: boolean;
}
替换手工添加的占位符
如果你宁愿控制剧本的所在 index.html,添加一个
占位符和开关 inject 改为 "replace"数字 :
<!-- index.html -->
<head>
<script data-meticulous></script>
<!-- ... -->
</head>
meticulous({
recordingToken: "<your-recording-token>",
inject: "replace",
// placeholderAttribute defaults to "data-meticulous"
});
如果找不到占位符,插件会倒回 "auto" 注射
并发出警告.