Welcome to ShenZhenJia Knowledge Sharing Community for programmer and developer-Open, Learning and Share
menu search
person
Welcome To Ask or Share your Answers For Others

Categories

I'm trying to use requireJS to add this library/plug-in to jquery.

I've looked at the documentation, and other S.O. questions, and I still can't figure out what's going wrong.

Using backbone and require as an example: I'm pretty sure I need to use shim in my main.js file. I'm also pretty sure that I need to still load the plug-in in the particular file I want to use it in (Even though I don't actually use the rangyInputs object in the body of the function) (which I do for backbone). Really, I just want to bind the functions from the rangyInputs library to jquery once, and then just require jquery in all the files I need those functions.

define([
'jquery',     
'underscore', 
'backbone'    
, 'views/listView' 
, 'sockets'
, 'collections/nodesCollection'
, 'views/listView'
, 'models/node'
, 'rangyInputs' //I define the path to this like I do the path for backbone in main.js
], 
function($, _, Backbone, ListView, io, nodesCollection, listView, nodeModel ,rangyInputs){

The un-minified library has this at the end:

$.fn.extend({
        getSelection: jQuerify(getSelection, false),
        setSelection: jQuerify(setSelection, true),
        collapseSelection: jQuerify(collapseSelection, true),
        deleteSelectedText: jQuerify(deleteSelectedText, true),
        deleteText: jQuerify(deleteText, true),
        extractSelectedText: jQuerify(extractSelectedText, false),
        insertText: jQuerify(insertText, true),
        replaceSelectedText: jQuerify(replaceSelectedText, true),
        surroundSelectedText: jQuerify(surroundSelectedText, true)
    });

The documentation and gives examples where of using "exports" for shim, but I don't think I can use this since I have multiple things I'm exporting. (and I'm not exactly sure how exports works).

Thanks!

EDIT: I tried applying this solution so that I could include a different plug-in, and it didn't work, so I asked another question here

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
thumb_up_alt 0 like thumb_down_alt 0 dislike
208 views
Welcome To Ask or Share your Answers For Others

1 Answer

Managed to create simple working example:

index.html:

<!doctype html>
<html>
    <head></head>
    <body>
        <script data-main="main" src="require.js"></script>
    </body>
</html>

main.js:

require.config({
    paths : {
        jquery : 'jquery-2.0.3',
        'rangyinputs-jquery' : 'rangyinputs-jquery-1.1.2'
    },
    shim : {
        'rangyinputs-jquery' : {deps : ['jquery'], exports : '$'}
    }
});

require(['jquery', 'rangyinputs-jquery'], function($) {
    console.log('Type of $.fn.getSelection' typeof $.fn.getSelection);
});

last versions of jquery are AMD compatible, so you don't have to use exports shim, but rangyinputs-jquery is not, so we export jquery object and add dependency to jquery. all files in one directory:

  • index.html
  • main.js
  • jquery-2.0.3.js
  • rangyinputs-jquery-1.1.2.js
  • require.js

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
thumb_up_alt 0 like thumb_down_alt 0 dislike
Welcome to ShenZhenJia Knowledge Sharing Community for programmer and developer-Open, Learning and Share
...