javascript - JS无限循环保护，如何使用没有节点的babel-standalone插件或有DOM的web-worker？

Question

有一个浏览器代码编辑器 (ace)，可以为 p5.js 即时编译用户编写的代码。研究如何防止无限循环，了解到一些这样的编辑器使用 babel-standalone连同 loop-protect .为了避免定时循环标志(默认 100 毫秒)出现问题，有一个名为 transform-prevent-infinite-loops.js 的插件被 repl.it 使用这反而限制了迭代次数。

两者看起来都很棒并且想对其进行测试，但我无法弄清楚如何将其中一个(两个 CommonJS 模块)与 babel-standalone 一起使用，尤其是在不使用 bundler 或 nodejs 时。我乐观地认为有一种方法可以直接加载这些插件，因为我不需要解析我自己的代码，只需分析作为变量字符串等待的代码。得到内联 lolizer插件示例有效——但上面的无限循环保护插件要复杂得多，不幸的是文档似乎没有提到独立导入外部插件。是否可以在没有 bundler 或 nodejs 的情况下使用它们？

基本设置:https://pastebin.com/LEYx8Kr4

---

之前分享过其他尝试，但按照建议减少为单个问题。

带有 web-worker 的基本设置:https://pastebin.com/NgAPZzCX

还在 pastebin 上尝试使用 web-worker route , 但是它似乎不支持 DOM API ，其中引入了 p5.js 函数。为了解决这个问题，尝试做一些花哨的正则表达式将代码简化为循环，但是你缺少变量，即。如果循环计数是 loopCount 而不是 10。

最终目标是在存在无限循环时发出红旗，以防止重新编译会覆盖当前运行代码的错误代码(实时编码环境)。 web-worker 路由提供了这一点，如果我正确理解 babel，它不会标记它，但实际上会更改正在编译的代码以捕获该无限循环......是否还有另一种技术需要考虑或者可能是所有技术的混合体?

Answer 1

我正在为我的图书馆制作一个 repl，并且已经在使用独立的 babel。

这个问题对我来说很准确，因为它帮助我使用来自 React 的链接 babel 插件解决了这个问题。

如果你在某处声明你的插件函数

const preventInfiniteLoops = ({ types: t, template }) => {
  const buildGuard = template(`
    if (ITERATOR++ > MAX_ITERATIONS) {
      throw new RangeError(
        'Potential infinite loop: exceeded ' +
        MAX_ITERATIONS +
        ' iterations.'
      );
    }
  `)

  return {
    visitor: {
      'WhileStatement|ForStatement|DoWhileStatement': (path, file) => {
        // An iterator that is incremented with each iteration
        const iterator = path.scope.parent.generateUidIdentifier('loopIt')
        const iteratorInit = t.numericLiteral(0)
        path.scope.parent.push({
          id: iterator,
          init: iteratorInit,
        })
        // If statement and throw error if it matches our criteria
        const guard = buildGuard({
          ITERATOR: iterator,
          MAX_ITERATIONS: t.numericLiteral(MAX_SOURCE_ITERATIONS),
        })
        // No block statment e.g. `while (1) 1;`
        if (!path.get('body').isBlockStatement()) {
          const statement = path.get('body').node
          path.get('body').replaceWith(t.blockStatement([guard, statement]))
        } else {
          path.get('body').unshiftContainer('body', guard)
        }
      },
    },
  }
}

然后将其添加到babel standalone中很简单

更新您的 pastebin 示例:(这是一个猜测，我还没有测试过)

Babel.availablePlugins['preventInfiniteLoops'] = preventInfiniteLoops
let output = Babel.transform(codeIn.value, { presets: [], plugins: ['preventInfiniteLoops']}).code;

我使用的是 es6，所以我的代码是这样的:

import { availablePlugins } from '@babel/standalone'
availablePlugins['preventInfiniteLoops'] = preventInfiniteLoops

这篇文章对我帮助很大，希望我的评论对其他人也有帮助