RequireJS模塊，擴展另一個模塊

我正在使用一個項目，其中有兩個不同的文件包裝在AMD中，其中一個擴展了另一個，項目是jsondiffpatch。RequireJS模塊，擴展另一個模塊

該項目有2個文件（build/bundle.js和build/formatters.js）每個出口jsondiffpatch。當我將它們包含在我的文件中時，如：

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

格式化擴展不存在。如果我改變了主配置使jsondiffpath取決於格式化，如：

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

我仍然沒有得到格式化。這是一個相當普遍的做法，但沒有看到克服它;我知道它很簡單，我錯過了什麼？

來源

2014-09-05 amcdnl

我看着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）{ }）; – 2014-09-05 14:54:37

如果我這樣做'formatters'是未定義的 – amcdnl 2014-09-05 15:04:18

這應該工作：

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

來源

2014-09-05 20:32:23 user3995789

當您使用AMD loader（如RequireJS）加載jsondiffpatch時，格式化程序是不同的模塊。換句話說，它的工作原理與加載沒有AMD加載程序的jsondiffpatch時略有不同。這裏有一個完整的例子：

<!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與鮑爾。

來源

2014-09-05 16:37:29 Louis

RequireJS模塊，擴展另一個模塊

回答

相關問題