谷歌封閉編譯器和UMD模式

Question

我正在開發一個JavaScript庫，它使用閉包編譯器來組合/縮小& typecheck。爲了避免噘嘴全局命名空間我想用UMD模式& closue @export(or goog.exportSymbol('workspace', lkr.workspace)

goog.provide('workspace'); 
goog.require('lkr.workspace'); 
/** 
    * Exposed external access point 
    * @export 
    * @return {component} 
    */ 
workspace = function() { 
    return lkr.workspace.Core; 
} 

我已經使用了輸出封裝文件生成UMD包裝

//UMD bundling closure code inside. 
;(function (root, factory) { 
    if (typeof define === 'function' && define.amd) { 
     define([], factory); 
    } else if (typeof module === 'object' && module.exports) { 
     module.exports = factory(); 
    } else { 
     root.workspace = factory(); 
    } 
}(this, function() { 
    %output% 
    return workspace; 
})); 

編號：https://medium.com/reflecting-on-bits/how-to-solve-missing-output-error-when-using-closure-compiler-7de6eac29776?swoff=true#.ntq9vav6s

1. 這是封閉UMD模式的正確方法，在編譯器中似乎有內部支持來檢測UMD，但我找不到任何示例。 https://groups.google.com/forum/#!topic/closure-compiler-discuss/-M1HBUn35fs https://github.com/google/closure-compiler/pull/1048
2. 我仍然看到工作區無法找到崩潰。

例

start.js

goog.provide('workspace'); 
/** 
    * Exposed external access point 
    * @export 
    * @return {number} 
    */ 
var workspace = function() { 
    console.log('My workspace') 
    return 0; 
} 

編譯標誌

closure_entry_point: 'workspace', 
compilation_level: ADVANCED_OPTIMIZATION, 
only_closure_dependencies: true, 
generate_exports :true, 
language_in : 'ECMASCRIPT5_STRICT', 
language_out : 'ES5_STRICT', 

輸出與UMD包裝

(function(root, factory) { 
    if (typeof define === 'function' && define.amd) { 
     define([], factory); 
    } else if (typeof exports === 'object') { 
     module.exports = factory(); 
    } else { 
     root.workspace = factory(); 
    } 
}(this, function() { 
    'use strict'; 
    'use strict'; 
    function a() { 
     console.log("My workspace"); 
     return 0 
    } 
    var b = ["workspace"] 
     , c = this; 
    b[0]in c || !c.execScript || c.execScript("var " + b[0]); 
    for (var d; b.length && (d = b.shift());) 
     b.length || void 0 === a ? c[d] ? c = c[d] : c = c[d] = {} : c[d] = a; 
    return workspace; 
})); 

錯誤：

Uncaught TypeError: Cannot use 'in' operator to search for 'workspace' in undefined 
Uncaught ReferenceError: workspace is not defined 

Answer 1

唯一的UMD圖案編譯器的本機支持與--process_common_js_modules。該標誌用於將模塊捆綁在一起，並將刪除模式 - 所以不是你想要的。

你的問題與你的輸出包裝。編譯器嘗試通過將其創建爲全局對象this上的屬性來導出workspace。您的輸出包裝器不指定this對象。由於您處於嚴格模式，因此它也不會自動強制轉到全局對象this。

更新您的輸出包裝爲類似於：

//UMD bundling closure code inside. 
;(function (root, factory) { 
    if (typeof define === 'function' && define.amd) { 
    define([], factory); 
    } else if (typeof module === 'object' && module.exports) { 
    module.exports = factory(); 
    } else { 
    root.workspace = factory(); 
    } 
}(this, function() { 
    %output% 
    return workspace; 
}.bind(this));