关于vite-plugin-monkey的启动实时更新的模式是如何实现的 #72

duoluodexiaoxiaoyuan · 2023-04-08T01:42:35Z

duoluodexiaoxiaoyuan
Apr 8, 2023

因为之前一直都是用的大佬的脚手架搭建的项目，当我项目启动以后默认就会打包浏览器加载脚本实时更新。很方便。

但是我昨天在搞一个github的项目，集成了插件和脚本，因为使用的是deno+preact,关于脚本启动我不太清楚，但是是通过启动以后也是把dist目录下面的user.js手动复制到脚本里面，但是是通过
// @require file://E:\daimaxiangmu\vscode\sourceCode\next-translator/dist/userscript/b.user.js (踩坑，必须设置油猴允许访问本地文件，同时通过启动server(require url地址)这种情况做不到实时更新，好像是require有缓存。

同时还遇到了这个项目脚本启动请求跨域，还没有解决
来实现的，所以我好奇大佬的脚手架这块是如何设计的，似乎你那个就不需要。

lisonge · 2023-04-08T03:13:55Z

lisonge
Apr 8, 2023
Maintainer

你说的 实时更新 应该特指 hmr 这类功能

以下是 vite-plugin-monkey 的原理的简单描述

vite 主要有两种工作模式， serve 和 build

在 build 模式下，使用 vite build 将你的项目打包成单个文件 build.user.js ，想要监听文件变化连续构建可以使用 vite build --watch

这种开发方式和你说的 昨天在搞一个github的项目 的运行原理是一样的

而在 serve 模式下，你的代码始终以 esm 格式在浏览器运行，vite 也不会将你的代码打包成单个文件

如果是使用vite开发普通的web项目（不是油猴脚本项目），你的 index.html 一般是如下内容

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Vite + TS</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

当你在 vite serve 下访问 index.html 时，vite 将 index.html 转换为以下内容

<!DOCTYPE html>
<html lang="en">
  <head>
    <script type="module" src="/@vite/client"></script>
    <title>Vite + TS</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

也就是 你的项目自己的域名下 会按顺序运行两个模块 /@vite/client 和 /src/main.ts

而当你使用 vite-plugin-monkey 时，在 vite serve 下油猴脚本安装的代码一般是如下内容

;(({ entrySrc = `` }) => {
  window.GM;
  document.__monkeyWindow = window;
  console.log(`[vite-plugin-monkey] mount monkeyWindow to document`);
  const entryScript = document.createElement("script");
  entryScript.type = "module";
  entryScript.src = entrySrc;
  document.head.insertBefore(entryScript, document.head.firstChild);
  console.log(`[vite-plugin-monkey] mount entry module to document.head`);
})(...[
  {
    "entrySrc": "http://127.0.0.1:5173/__vite-plugin-monkey.entry.js"
  }
]);

这个油猴脚本实际上只做了两件事

将油猴脚本作用域的 window 挂载到 document.__monkeyWindow 以便你的代码通过 vite-plugin-monkey/dist/client 模块访问 GM_api
将代码入口模块 http://127.0.0.1:5173/__vite-plugin-monkey.entry.js 添加到宿主作用域运行

当访问 http://127.0.0.1:5173/__vite-plugin-monkey.entry.js 时，插件会将上面 vite 刚刚转换的这个 index.html 里的 script 全部提取出来生成以下内容

import "/@vite/client";
import "/src/main.ts";

生成这个模块的具体代码是

vite-plugin-monkey/packages/vite-plugin-monkey/src/node/plugins/server.ts

Lines 134 to 185 in 99839cc

    
           } else if (reqUrl.startsWith(entryPath)) { 
        
             const htmlText = await server.transformIndexHtml( 
        
               '/', 
        
               `<html><head></head></html>`, 
        
               req.originalUrl, 
        
             ); 
        
             const doc = parseDocument(htmlText); 
        
             type Element = ReturnType<typeof DomUtils.findAll> extends Array< 
        
               infer T 
        
             > 
        
               ? T 
        
               : never; 
        
             const scriptList = DomUtils.getElementsByTagType( 
        
               ElementType.Script, 
        
               doc, 
        
             ) as Element[]; 
        
             const entryList: string[] = finalOption.server.mountGmApi 
        
               ? [gmApiPath] 
        
               : []; 
        
             scriptList.forEach((p) => { 
        
               const src = p.attribs.src ?? ''; 
        
               const textNode = p.firstChild; 
        
               let text = ''; 
        
               if (textNode?.type == ElementType.Text) { 
        
                 text = textNode.data ?? ''; 
        
               } 
        
               if (src) { 
        
                 entryList.push(src); 
        
               } else { 
        
                 const scriptUrl = new URL(origin); 
        
                 scriptUrl.pathname = pullPath; 
        
                 scriptUrl.searchParams.set( 
        
                   'text', 
        
                   Buffer.from(text, 'utf-8').toString('base64url'), 
        
                 ); 
        
                 entryList.push(scriptUrl.pathname + scriptUrl.search); 
        
               } 
        
             }); 
        
             let realEntry = finalOption.entry; 
        
             if (path.isAbsolute(realEntry)) { 
        
               realEntry = normalizePath( 
        
                 path.relative(viteConfig.root, realEntry), 
        
               ); 
        
             } 
        
             const entryUrl = new URL(realEntry, origin); 
        
             entryList.push(entryUrl.pathname + entryUrl.search); 
        
             res.end( 
        
               entryList.map((s) => `import ${JSON.stringify(s)};`).join('\n'), 
        
             );

也就是 在脚本宿主域名下 会按顺序运行两个模块 /@vite/client 和 /src/main.ts

这相当于使用 vite 开发普通 web 项目，只不过模块运行的环境和域名不一样

因此 vite 和其他插件在 web 项目里提供的 hmr 功能也能照常运行

hmr(热更新) 是由 vite 和其他插件提供的，不是 vite-plugin-monkey 提供的， vite-plugin-monkey 只是将模块入口放到了脚本宿主域名下

2 replies

pingfangdeguang Apr 8, 2023

感谢解答，想问一下这个报错大佬遇到过吗
我猜测可能的情况都试了，mac和windows都会报这个错，我不明白为什么会报跨域这个错

lisonge Apr 8, 2023
Maintainer

@pingfangdeguang

具体运行的油猴脚本代码是什么呢？报错日志是看不出来的

LinLin00000000 · 2023-12-22T02:45:50Z

LinLin00000000
Dec 22, 2023

因为之前一直都是用的大佬的脚手架搭建的项目，当我项目启动以后默认就会打包浏览器加载脚本实时更新。很方便。

但是我昨天在搞一个github的项目，集成了插件和脚本，因为使用的是deno+preact,关于脚本启动我不太清楚，但是是通过启动以后也是把dist目录下面的user.js手动复制到脚本里面，但是是通过 // @require file://E:\daimaxiangmu\vscode\sourceCode\next-translator/dist/userscript/b.user.js (踩坑，必须设置油猴允许访问本地文件，同时通过启动server(require url地址)这种情况做不到实时更新，好像是require有缓存。

同时还遇到了这个项目脚本启动请求跨域，还没有解决来实现的，所以我好奇大佬的脚手架这块是如何设计的，似乎你那个就不需要。

我使用 @require file 的方式没遇到缓存, 而且这个很关键, 我就是通过这个来绕过 CSP 的
难道油猴不同, 实现不一样? 我用的是 Tampermonkey

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

关于vite-plugin-monkey的启动实时更新的模式是如何实现的 #72

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 2 comments 2 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

关于vite-plugin-monkey的启动实时更新的模式是如何实现的 #72

Uh oh!

Uh oh!

duoluodexiaoxiaoyuan Apr 8, 2023

Replies: 2 comments · 2 replies

Uh oh!

Uh oh!

lisonge Apr 8, 2023 Maintainer

Uh oh!

pingfangdeguang Apr 8, 2023

Uh oh!

lisonge Apr 8, 2023 Maintainer

Uh oh!

LinLin00000000 Dec 22, 2023

duoluodexiaoxiaoyuan
Apr 8, 2023

Replies: 2 comments 2 replies

lisonge
Apr 8, 2023
Maintainer

lisonge Apr 8, 2023
Maintainer

LinLin00000000
Dec 22, 2023