Javascript, use external script in own script

Question

my problem is the following:

I want to use https://github.com/olivier-m/minislate as part of my project. The README on Github tells to inject the following code into the website where to use the script, like this:

<script src="js/minislate.js"></script>
<script>
    window.addEventListener('DOMContentLoaded', function() {
        var editor = new Minislate.simpleEditor('#editable');
    });
</script>

But I have to use it as part of my own script, not on the actual website - I simply want to keep it seperated.

That's what I currently have:

Instead of I use require.js:

requirejs(["./libs/minislate.min"]);

In another script

define([], function () {

    var EditTexUtil = function (iframe, keyWord) {

        this.addWYSIWYGInterface = function () {

            var $editableElements = $(iframe).contents().find(keyWord);

            $editableElements.each(function () {
                var editor = new Minislate.simpleEditor($(this));
            });
        }
    }

    return EditTexUtil;
})

As you can see, I'm modifyig some iframe internal content, depending on a keyword. Following error occurs:

Uncaught ReferenceError: Minislate is not defined

So how to fix that? I think I'm missing something general, that's why I'm asking here.

Answer 1

If Minislate needs to be resolved in our other script you have to use require not define function of RequireJS:

require(['./libs/minislate'], function (Minislate) {

  //this part will run when minslate.js is loaded and parsed, hence Minislate is defined
  //other code goes here

})