Google 闭包编译器和 UMD 模式
Google closure compiler and UMD pattern
我正在开发一个 javascript 库,它使用闭包编译器来 combine/minify 和类型检查。为了避免噘嘴全局命名空间,我想使用 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;
}));
- 这是闭包中 UMD 模式的正确方法吗,编译器中似乎有内部支持来检测 UMD,但我找不到任何示例。
https://groups.google.com/forum/#!topic/closure-compiler-discuss/-M1HBUn35fs
https://github.com/google/closure-compiler/pull/1048
- 我仍然遇到崩溃,似乎找不到工作区。
示例
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
编译器对 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));
我正在开发一个 javascript 库,它使用闭包编译器来 combine/minify 和类型检查。为了避免噘嘴全局命名空间,我想使用 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;
}));
- 这是闭包中 UMD 模式的正确方法吗,编译器中似乎有内部支持来检测 UMD,但我找不到任何示例。 https://groups.google.com/forum/#!topic/closure-compiler-discuss/-M1HBUn35fs https://github.com/google/closure-compiler/pull/1048
- 我仍然遇到崩溃,似乎找不到工作区。
示例
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
编译器对 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));