如何在PhpStorm中为我的JavaScript代码添加“ require”？

Question

我正在使用canvg('canvas', svg); 在我的代码中。 这意味着我需要canvg.js。

我在HTML标头中包含canvg.js。 但是，这给我一个错误，即“需求未定义”。

对于那些不知道canvg.js的前两行的用户：

var RGBColor = require('rgbcolor'),
    StackBlur = require('stackblur-canvas');

这首先在我的控制台中显示为错误。 由于代码仍然有效，所以这并不是真正的问题。

现在，我开始测试，尽管错误导致测试无法运行。 这是一个问题。

error loading file: /test/tests/Dependencies/canvg.js:4: Uncaught ReferenceError: require is not defined

我去了https://requirejs.org/docs/release/2.3.6/comments/require.js ，将代码复制并粘贴到一个名为require236.js的文件中，并将其保存在我的项目中。

然后，我去了main.html，并在加载canvg之前添加了<script src="require236.js"></script> 。

我在控制台中收到以下错误：

 Uncaught Error: Mismatched anonymous define() module: function(){return f}
https://requirejs.org/docs/errors.html#mismatch
   at makeError (require236.js:168)
   at intakeDefines (require236.js:1254)
   at require236.js:1452
require236.js:143 Uncaught Error: Module name "rgbcolor" has not been loaded yet for context: _. Use require([])
https://requirejs.org/docs/errors.html#notloaded
  at makeError (require236.js:168)
  at Object.localRequire [as require] (require236.js:1436)
  at requirejs (require236.js:1797)
  at canvg.js:4

而且我的测试没有以该文件作为依赖项运行。

https://requirejs.org/docs/errors.html#mismatch说

为避免该错误：

确保通过RequireJS API加载所有调用define（）的脚本。

不要手动在HTML中编写脚本标记，以加载其中具有define（）调用的脚本。

如果您手动编码HTML脚本标记，请确保它仅包含命名模块，并且不会加载与该文件中的模块名称相同的匿名模块。

如果问题是使用加载程序插件或匿名模块，但RequireJS优化器未用于文件捆绑，请使用RequireJS优化器。

如果问题是var define lint方法，请改用/ * global define * /（“ global”之前没有空格）注释样式。

但老实说，我不明白他们期望如何以及在何处包括它。 如果您足够理解它，请使用简单的英语单词（或仅显示一个代码示例）。

我正在从PhpStorm运行。 我正在用jsTestDriver进行测试。 我必须以某种方式将其声明为错误，但是我不知道require.js如何以及为什么会给我这样的问题。

Answer 1

简单的答案是，您所包含的文件不应在浏览器中运行，因为它使用CommonJS语法，该语法只能在node.js运行的服务器端代码中使用。

您必须确保包括没有任何require()调用的库的浏览器版本，例如：

<script src="https://cdn.jsdelivr.net/npm/canvg/dist/browser/canvg.min.js"></script>

参见https://github.com/canvg/canvg#usage-on-the-browser