在 Moodle 插件中使用来自外部 JavaScript 库的函数

Question

我正在制作 Moodle 插件并想使用 bowser 来检测用户的网络浏览器。我通过放置

引用了该文件

$PAGE->requires->js( new moodle_url($CFG->wwwroot.MOODLE_TINYMCE_RECORDRTC_ROOT.'tinymce/js/bowser.js') );

在插件的 plugintype_pluginname.php 文件中（当然是占位符），我从插件的 module.js 文件中调用 bowser 函数。

当我加载插件时（它在 TinyMCE 中显示为一个按钮），控制台抛出 ReferenceError: bowser not defined，所以我假设这意味着 Moodle 没有使 Bowser 中的功能全局可用。

我在很多地方读到过很多，我需要将我的代码包装在 AMD 中，或者类似的东西，但是在大量阅读之后它仍然让我头疼。有什么方法可以让主插件模块使用 bowser 的功能吗？

Answer 1

注意：这对我适用于 Moodle 3.3.2，ymmv。

将bowser.js放入my_plugin_folder/amd/src/.

当使用原来的bowser.js时，我得到了Uncaught TypeError: bowser._detect is not a function。我不完全明白为什么会出现此错误，但这里有一种解决方法：将 bowser.js 中的顶部代码块替换为 this one from umdjs/umd。

您的文件现在应该如下所示：

(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD. Register as an anonymous module.
        define([], factory);
    } else if (typeof module === 'object' && module.exports) {
        // Node. Does not work with strict CommonJS, but
        // only CommonJS-like environments that support module.exports,
        // like Node.
        module.exports = factory();
    } else {
        // Browser globals (root is window)
        root.returnExports = factory();
    }
}(typeof self !== 'undefined' ? self : this, function () {

    // module definition here

    return bowser
}));

Moodle 将所有 JavaScript 模块捆绑在一起，因此客户端无需执行单独的 HTTP 请求来获取每个模块。这个包叫做 first.js。它包含所有非延迟加载的模块。如果您现在加载 Moodle 页面，它应该包含 bowser.js 的内容，其中一些值被 Moodle 替换。

如果不希望每个页面都加载 bowser，可以将其重命名为 bowser-lazy.js。那么应该只在你使用的时候加载它。

您可以通过调用来测试它是否有效：

require(['plugintype_pluginname/bowser'], function(bowser) {
    var ua = bowser._detect(navigator.userAgent);
    console.log(ua);
});

当您想使用延迟加载时，您似乎需要更改 require 调用以使用 bowser-lazy 而不是 bowser。

在 Moodle 插件中使用来自外部 JavaScript 库的函数

Using functions from external JavaScript libraries in Moodle plugins

javascript

php

plugins

moodle

external