简体   繁体   中英

Load textext.js plugin with require.js

I'm trying to load textext.js jquery plugin, with one of it's plugins, textext tags . On my project, I'm using require.js in order to load all scripts with it's dependencies.

As used for other scripts, I'm using a shim config on my main.js file:

main.js

require.config({
  shin: {
    jquery: {
      exports: '$'
    },
    'textext': {
      deps: ['jquery'],
      exports: '$.fn.textext'
    },
    'textext_tags': {
      deps: ['jquery', 'textext'],
    }
  },
  paths: {
    jquery: 'lib/jquery-min',
    textext: 'lib/textext/textext.core',
    textext_tags: 'lib/textext/textext.plugin.tags',
    }
  });

On the page that I use it, I call it as above:

file-app.js

define([
  'jquery',
  'textext',
  'textext_tags',
  ], function($, Textext, TextextTags) {
    // do stuff
  });

The code is loading and working correctly on firefox, but on Chromium, sometimes (about 2/3 of the times), at the first time that I load the page, I've receive the following error, that broke the functioning of the page:

TypeError: Cannot set property 'TextExtTags' of undefined
   #3 localhost/js/lib/textext/textext.plugin.tags.js:23:27

Inside the file textext.plugins.tags.js , we have at line 23 (the failure line):

$.fn.textext.TextExtTags = TextExtTags;

So, inspecting it with Firebug, I realize that Jquery is not loaded, so $ and $.fn is undefined.

My question is: why this schema of require.js is working with other jQuery plugins on the same project (like jquery cookie and others), but not with this, a jquery plugin with it's subplugins?

As Vishwanath said, only changing from "shin" to "shim" worked, like above:

 require.config({ shim: { jquery: { exports: '$' }, ... 

Thanks!

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM