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，添加了我的<script src="require236.js"></script> 在canvg加载之前。

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

 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 * /（否   而不是“全局”注释样式之前的空格。

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

我正在从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

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

1 个答案: