1. 背景
公司使用的vue-plugin-eruda github.com/wuxiuran/vi… 但是在网络差的时候会导致加载报错，所以领导感觉不好。并且大佬的项目中使用了cdn，公司有一次代码中使用cdn被拦截，导致随机跳转到了第三方页面。所以不允许使用cdn。所以将大佬的代码改为了本地。特此记录下
vite
Vite 是一个现代化的前端构建工具。
Eruda
Eruda 是一个非常方便的调试工具。为了简化开发流程，我们可以通过编写一个 Vite 插件，在开发环境中自动注入 Eruda。
2. 实现思路
我们的目标是编写一个 Vite 插件，该插件能够在开发环境中自动将 Eruda 的脚本注入到 HTML 页面中，并在页面加载时初始化 Eruda。具体实现步骤如下：
- 获取 Eruda 脚本路径：我们需要找到 Eruda 的脚本文件路径，并将其内容读取出来。
- 注入脚本：将 Eruda 的脚本和初始化代码注入到 HTML 页面的
<head>标签中。 - 控制注入条件：根据开发环境或用户配置决定是否注入 Eruda。
- 发布到 npm：将插件打包并发布到 npm，供其他开发者使用。
3. 代码实现
直接引入import eruda from eruda 这个错误的原因是
eruda是一个浏览器端的调试工具，它依赖于浏览器的全局对象（如self或window），而你在 Node.js 环境中直接导入并运行了eruda，导致self未定义。 问题分析
eruda是浏览器端的库：eruda只能在浏览器环境中运行，因为它依赖于浏览器的全> 局对象（如self、window等）。- Node.js 环境不支持
self：在 Node.js 环境中，没有self这个全局对象，因> > 此会抛出ReferenceError: self is not defined错误
以下是完整的代码实现：
// src/index.ts
import path from "path";
import { dirname } from 'path';
import { fileURLToPath } from 'url';
import fs from "fs";
const src_default = ({
debug
} = {
debug: undefined
}) => {
return {
name: "vite-plugin-local-eruda",
transformIndexHtml(html: string) {
// 获取当前文件的目录路径和文件名
const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);
const erudaPath = path.resolve(__dirname, "../../../node_modules/eruda/eruda.js"); // 指向 eruda 的文件路径
const erudaScript = fs.readFileSync(erudaPath, "utf-8");
const tags = [
{
tag: "script",
children: erudaScript, // 将 eruda 的代码注入到页面中
injectTo: "head"
},
{
tag: "script",
children: "eruda.init();", // 初始化 eruda
injectTo: "head"
}
];
if (debug === true) {
return {
html,
tags
};
} else if (debug === false) {
return html;
}
if (process.env.NODE_ENV !== "production") {
return {
html,
tags
};
} else {
return html;
}
}
};
};
export default src_default;
3.1 代码解析
-
获取当前文件路径：我们使用
import.meta.url获取当前模块的 URL，然后通过fileURLToPath将其转换为文件路径。接着使用dirname获取当前文件的目录路径。 -
读取 Eruda 脚本：通过
path.resolve构建 Eruda 脚本的完整路径，并使用fs.readFileSync读取脚本内容。 -
注入脚本：我们将 Eruda 的脚本和初始化代码封装成一个
tags数组，每个对象表示一个要注入的脚本标签。 -
控制注入条件：根据
debug参数和process.env.NODE_ENV环境变量决定是否注入 Eruda。如果debug为true或者当前环境不是生产环境，则注入 Eruda。
4. 使用插件
要在 Vite 项目中使用这个插件，只需在 vite.config.ts 中引入并配置即可：
import { defineConfig } from 'vite';
import erudaPlugin from 'vite-plugin-local-eruda'; // 从 npm 安装的插件
export default defineConfig({
plugins: [
erudaPlugin({ debug: true }) // 启用 Eruda 调试工具
]
});
5. 发布到 npm
5.1 注册 npm 账号
如果你还没有 npm 账号，需要先注册一个：
- 访问 npm 官网。
- 点击 "Sign Up" 注册一个新账号。
- 完成邮箱验证。
5.2 初始化项目
在项目根目录下运行以下命令，初始化 npm 项目：
npm init
按照提示填写项目信息，例如：
- 包名 (name)：
vite-plugin-local-eruda - 版本 (version)：
1.0.0 - 描述 (description)：
A Vite plugin to automatically inject Eruda debug tool in development environment. - 入口文件 (entry point)：
dist/index.js - 其他信息：按需填写。
完成后会生成一个 package.json 文件。
5.3 配置构建脚本
为了将 TypeScript 代码编译为 JavaScript，我们需要配置构建脚本。首先安装 TypeScript 和构建工具：
npm install typescript --save-dev
npm install @types/node --save-dev
然后在项目根目录下创建 tsconfig.json 文件：
{
"compilerOptions": {
"target": "ES6",
"module": "ESNext",
"outDir": "dist",
"rootDir": "src",
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true
},
"include": ["src/**/*"]
}
在 package.json 中添加构建脚本：
{
"scripts": {
"build": "tsc"
}
}
运行以下命令进行构建：
npm run build
构建完成后，代码会被编译到 dist 目录。
5.4 登录 npm
在终端中运行以下命令登录 npm：
npm login
输入你的 npm 账号、密码和邮箱。
5.5 发布到 npm
在发布之前，确保 package.json 中的 name 字段是唯一的（不与 npm 上已有的包重名）。然后运行以下命令发布：
npm publish
发布成功后，插件终于可以使用 npm install 或者 yarn add 来安装，完结🎉
6. 总结
编写这个 Vite 插件，可以直接在开发环境中使用 Eruda 调试工具，不需要自己引入，根据当前的环境来配置是否调用。最后，我们将插件发布到 npm，这样别人就可以直接npm下我们的包直接使用了，大功告成。
