@require的npm脚本，是不是被require的脚本不能有里有require('os')之类的功能

XuQK

比如svgo这个npm库，其内部有一系列的require('os')，require('fs')之类的，我使用@require https://cdn.jsdelivr.net/npm/svgo@3.0.2来进行引入，提示 require not found，是不是就是不可以使用这类库。

刚对油猴脚本开发有了点兴趣，自己大概知道应该是不可以的，但是由于自己太菜了，无法真实的确定，所以来问一下大佬们。😂

李恒道

执行环境不同
看库有没有提供浏览器运行的
比如svgo属于一个开发系统工具
没提供浏览器运行的库
所以只属于node的库
必须在node环境下运行
其他库同理

XuQK

李恒道 发表于 2023-4-3 11:49
执行环境不同
看库有没有提供浏览器运行的
比如svgo属于一个开发系统工具

这下完全确认（死心）了，感谢回复

李恒道

XuQK 发表于 2023-4-3 12:03
这下完全确认（死心）了，感谢回复

o泡时间到~
理论也不算完全死心...
最近几个月有前端个新出的可以在浏览器高仿系统环境的技术
其实可以高仿系统跑node跑svgo
一套下来性能差点倒是也能跑
所以不能算完全不行
就是属于装逼系列，不适合正常使用

steven026

李恒道 发表于 2023-4-3 12:06
o泡时间到~
理论也不算完全死心...
最近几个月有前端个新出的可以在浏览器高仿系统环境的技术

听说electron打包编译出来的那个exe就是魔改过带node环境的chrome
就是不知道要怎么利用【

李恒道

steven026 发表于 2023-4-3 12:14
听说electron打包编译出来的那个exe就是魔改过带node环境的chrome
就是不知道要怎么利用【
...

electron我接触不算深
我记着是node一个进程，chrome一个进程
两个开了个通信通道来进行交流

steven026

李恒道 发表于 2023-4-3 12:16

electron我接触不算深
我记着是node一个进程，chrome一个进程
两个开了个通信通道来进行交流

魔改一下 出个脚本猫浏览器 前后端通吃

李恒道

steven026 发表于 2023-4-3 12:19
[md]魔改一下 出个脚本猫浏览器 前后端通吃
![](https://bbs.tampermonkey.net.cn/data/attachment/forum ...

表情包好可爱！

shabby

李恒道 发表于 2023-4-3 11:49

执行环境不同
看库有没有提供浏览器运行的
比如svgo属于一个开发系统工具

呃呃，仔细了解一下这个目录 https://cdn.jsdelivr.net/npm/svgo@3.0.2/dist/

就发现 svgo 发布了 esm 格式的包，在浏览器测试运行一下

  <script type="module">
    import svgo from 'https://cdn.jsdelivr.net/npm/svgo@3.0.2/dist/svgo.browser.js';

    const svgString = `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M17.3154 17.3152C17.6408 16.9897 17.6408 16.4621 17.3154 16.1366L11.1787 9.99997L17.3153 3.86338C17.6407 3.53795 17.6407 3.01031 17.3153 2.68487C16.9898 2.35944 16.4622 2.35944 16.1368 2.68487L10.0002 8.82146L3.86359 2.68486C3.53815 2.35942 3.01051 2.35942 2.68507 2.68486C2.35964 3.0103 2.35964 3.53794 2.68507 3.86337L8.82167 9.99998L2.685 16.1367C2.35956 16.4621 2.35956 16.9897 2.685 17.3152C3.01043 17.6406 3.53807 17.6406 3.86351 17.3152L10.0002 11.1785L16.1369 17.3152C16.4623 17.6406 16.9899 17.6406 17.3154 17.3152Z" fill="#646A73"/>
</svg>
`;
    console.log(svgo.optimize(svgString, {
      plugins: [`removeXMLNS`]
    }).data)
  </script>

运行结果如下

可以看到成功使用 插件 removeXMLNS 删除了 xmlns 属性，说明 svgo 可以在浏览器正常使用

---

但是不能通过油猴的 @require 直接使用，因为它的原理是直接拼接代码，一般情况只适合 iife 格式或者 umd 格式的代码，而 svgo 发布的是 esm ，油猴不支持 esm

解决方法也很简单，用 vite 之类的打包工具重新打包输出为 iife 或者 umd 就行

我重新打包并发布到 npm 上面了，源代码在 https://github.com/lisonge/pkg-cdn.git

iife/umd 的导出名是 Svgo，使用示例如下

// ==UserScript==
// @name        svgo-test
// @namespace   Violentmonkey Scripts
// @match       https://i.songe.li/
// @grant       none
// @version     1.0
// @author      -
// @description 2023/4/3 14:03:15
// @require     https://cdn.jsdelivr.net/npm/pkg-cdn@latest/dist/svgo/v3.0.2.umd.js
// ==/UserScript==

const svgString = `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M17.3154 17.3152C17.6408 16.9897 17.6408 16.4621 17.3154 16.1366L11.1787 9.99997L17.3153 3.86338C17.6407 3.53795 17.6407 3.01031 17.3153 2.68487C16.9898 2.35944 16.4622 2.35944 16.1368 2.68487L10.0002 8.82146L3.86359 2.68486C3.53815 2.35942 3.01051 2.35942 2.68507 2.68486C2.35964 3.0103 2.35964 3.53794 2.68507 3.86337L8.82167 9.99998L2.685 16.1367C2.35956 16.4621 2.35956 16.9897 2.685 17.3152C3.01043 17.6406 3.53807 17.6406 3.86351 17.3152L10.0002 11.1785L16.1369 17.3152C16.4623 17.6406 16.9899 17.6406 17.3154 17.3152Z" fill="#646A73"/>
</svg>
`;
console.log(
    Svgo.optimize(svgString, {
        plugins: [`removeXMLNS`],
    }).data,
);

李恒道

shabby 发表于 2023-4-3 14:42
[md]呃呃，仔细了解一下这个目录

就发现 svgo 发布了 esm 格式的包，在浏览器测试运行一下

我偷
我去看了一圈文档没发现浏览器以为没有
大佬绝杀啊
牛逼！！！！