2014-09-05 3 views
0

Я использую проект, который имеет 2 разных файла, завернутых в AMD, один из которых расширяет другой проект: jsondiffpatch.Модуль RequireJS, который расширяет другой модуль

Проект имеет 2 файла (build/bundle.js и build/formatters.js) каждый экспорт jsondiffpatch. Когда я включаю их в свой файл, например:

define(['jsondiffpatch', 
     'jsondiffpatch-formatters'], function (jsondiffpatch) { 
}); 

расширений formatters нет. Если изменить основную конфигурацию сделать jsondiffpath зависят от форматтеров как:

shim: { 
    'jsondiffpatch': { 
     deps: ['jsondiffpatch-formatters'] 
    } 
} 

Я до сих пор не получаю форматтер. Это довольно распространенная практика, но не видел ее преодолеть; я знаю его что-то простое, чего мне не хватает?

+0

Я смотрел на https://github.com/benjamine/jsondiffpatch/blob/master/build/formatters.js и https://github.com/benjamine/ jsondiffpatch/blob/master/build/bundle.js, но они не похожи на файлы AMD. Также не должен быть ваш код: define (['jsondiffpatch', 'jsondiffpatch-formatters'], function (jsondiffpatch, formatters) { }); –

+0

Если я делаю, что 'formatters' не определено – amcdnl

ответ

2

Это должно работать:

shim: { 
    'jsondiffpatch-formatters': { 
     deps: ['jsondiffpatch'], 
     exports: 'jsondiffpatch.formatters' 
    }, 
    'jsondiffpatch': { 
     exports: 'jsondiffpatch' 
    } 
} 
1

Когда вы загружаете jsondiffpatch с загрузчиком AMD, таким как RequireJS, форматы являются другим модулем. Другими словами, он работает несколько иначе, чем при загрузке jsondiffpatch без AMD-загрузчика. Вот полный пример:

<!DOCTYPE html> 
<html> 
    <head> 
    <meta http-equiv="Content-Type" content="text/xhtml; charset=utf-8"/> 
    <link rel="stylesheet" href="bower_components/jsondiffpatch/src/formatters/html.css" type="text/css" /> 
    <link rel="stylesheet" href="bower_components/jsondiffpatch/src/formatters/annotated.css" type="text/css" /> 
    </head> 
    <script type="text/javascript" src="bower_components/requirejs/require.js"></script> 
    </head> 
    <body> 
    <div id="visual"></div> 
    <hr/> 
    <div id="annotated"></div> 
    <script> 
     require.config({ 
     baseUrl: ".", 
     paths: { 
      jsondiffpatch: "bower_components/jsondiffpatch/build/bundle", 
      "jsondiffpatch.formatters": "bower_components/jsondiffpatch/build/formatters" 
     }, 
     enforceDefine: true 
     }); 
     require(["jsondiffpatch", "jsondiffpatch.formatters"], 
     function (jsdp, formatters) { 

     // 
     // Code here adapted from jsondiffpatch's examples: 
     // https://github.com/benjamine/jsondiffpatch 
     // 
     var left = { a: 3, b: 4 }; 
     var right = { a: 5, c: 9 }; 
     var delta = jsdp.diff(left, right); 

     document.getElementById('visual').innerHTML = 
      formatters.html.format(delta, left); 
     document.getElementById('annotated').innerHTML = 
      formatters.annotated.format(delta, left); 
     }); 
    </script> 
    </body> 
</html> 

Единственное, что вам нужно, кроме этого выше HTML является установка RequireJS и jsondiffpatch с Бауэром.