Google闭包编译器和UMD模式

问题描述

我正在开发一个JavaScript库，该库使用闭包编译器来组合/缩小和缩小&进行类型检查.为避免对全局名称空间进行po奖，我想使用UMD模式&关闭@export(or goog.exportSymbol('workspace', lkr.workspace)

I am developing a javascript library which uses closure compiler to combine/minify & typecheck. To avoid pouting global namespace I want to use UMD pattern & 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;
}

我已经使用了output-wrapper-file来生成UMD包装器

I have used an output-wrapper-file to generate the UMD wrapper

//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. 我仍然崩溃，似乎无法找到工作区.

1. Is this the correct approach for UMD pattern in closure, there seems to be internal support in the compiler to detect UMD but I can't find any examples.https://groups.google.com/forum/#!topic/closure-compiler-discuss/-M1HBUn35fshttps://github.com/google/closure-compiler/pull/1048
2. I still get crashes seems workspace can't be located.

示例

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.该标志用于将模块捆绑在一起，并将删除模式-而不是您想要的.

The only native support for the UMD pattern the compiler has is with the --process_common_js_modules. That flag is used to bundle modules together and will remove the pattern - so not what you want.

您的问题出在输出包装器上.编译器尝试通过将其创建为全局this对象上的属性来导出workspace.您的输出包装器未指定this对象.由于您处于严格模式，因此它也不会自动强制到全局this对象.

Your problems are with your output wrapper. The compiler attempts to export workspace by creating it as a property on the global this object. Your output wrapper doesn't specify a this object. Since you are in strict mode, it's also not auto-coerced to the global this object.

将输出包装程序更新为以下内容:

Update your output wrapper to something like:

//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));

这篇关于Google闭包编译器和UMD模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！