使用 Browserify 捆绑 CasperJS+SlimerJS 的代码

Bundling code for CasperJS+SlimerJS using Browserify?

本文关键字:代码 CasperJS+SlimerJS 捆绑 Browserify 使用      更新时间:2023-09-26

TLDR;我的问题是:有没有办法让浏览器化不用自己的实现覆盖require,而是让它使用不同的方法名称(例如 browserifyRequire)的所有内部要求。要了解为什么我需要这样做,请继续阅读...

场景

我正在尝试使用 CasperJS 编写一些自动化测试并在 SlimerJS 中运行它们——而不是默认的 PhantomJS(尽管据我所知,我在 PhantomJS 中会遇到相同的以下问题)。

真的很想弄清楚如何在CoffeeScript中编写这些。事实证明,CasperJS或SlimerJS现在在CoffeeScript上表现不佳。文档的建议是在运行 casper 之前编译为 JS。还行。。。不是很方便,但我可以处理它。事实上,我还发现require在这些工具中解析路径的方式并不像在 Node 中那样简单,因此在运行之前捆绑也应该有所帮助。

但是现在我在尝试运行捆绑代码时遇到了一组新问题。我正在使用浏览器化。

问题所在

在我的测试代码中,我需要require('casper').CasperJS世界中的标准做法。所以我不得不告诉浏览器不要捆绑CasperJS,把"browser": { "casper": false }放在我的package.json里。到目前为止没有问题。但接下来的问题来了:

Browserify 覆盖内置的 require 函数,提供自己的require实现,该实现可以完成使浏览器化工作的所有操作。CasperJS在遇到require('casper')指令之前都很好。这是CasperJS必须做require的一次,而不是浏览器化。这失败了。

不完整的解决方案

我很确定CasperJS无法处理Browserify覆盖require的事实,因为CasperJS实现了自己的require方式。为了验证这一假设,我手动编辑了生成的捆绑包,将出现的require重命名为browserifyRequire - 包括浏览器对require的实现。我唯一没有改变require就是对require('casper')的调用,因为那是我需要CasperJS来处理require的一次。事实上,这使得事情按预期进行。

问题

同样,有没有办法让浏览器化为其自己的内部require使用不同的名称?我想我可以编写一个脚本来在捆绑后进行此更改,但我更愿意弄清楚如何通过配置来做到这一点。

另一个问题

也许除了Browserify之外,还有另一种解决方案可以在CasperJS中捆绑和运行CoffeeScript?我还没有找到一个....

找到了一个合理的解决方案——一个可以作为npm脚本运行的解决方案,例如通过添加到package.jsonnpm run build-test-bundle

"scripts": {
  "build-test-bundle": "browserify -t coffeeify casper-coffee-test.coffee | derequire | sed 's/_dereq_..casper../require('"casper'")/g' > casper-coffee-test.compiled.js"
},

此命令序列执行以下操作:

  1. browserify -t coffeeify casper-coffee-test.coffee构建捆绑包
  2. | derequire通过管道将浏览器输出发送到 derequire,这是一个将require函数的所有匹配项重命名为_dereq_ npm
  3. | sed 's/_dereq_..casper../require('"casper'")/g'将以前的输出通过管道传输到 sed 命令,该命令将替换回正常需要所有出现的_dereq_("casper")