在具有属性的ES6模块上使用Closure Compiler

Question

因此，经过一天的测试，我快要准备好了：使用google-closure-compiler-js和gulp.js缩小/编译基于ES6模块的“库”。

仅剩一个问题。 如何调用导入模块的属性？

我的测试用例包含3个文件：

gulpfile.js

const gulp = require("gulp");
const compiler = require("google-closure-compiler-js").gulp();
const sourcemaps = require("gulp-sourcemaps");

gulp.task("default", function() {
// wildcards don't seem to work yet with the js version
// files need to be in reverse order of dependency...
return gulp.src(["src/boilerplate/main.js", "src/app.js"])
    .pipe(sourcemaps.init())
    .pipe(compiler({
        jsOutputFile: "app.min.js",
        compilationLevel: "ADVANCED",
        warningLevel: "VERBOSE",
        createSourceMap: true
    }))
    .pipe(sourcemaps.write("/"))
    .pipe(gulp.dest("./dist"));
});

---

src/boilerplate/main.js

var mod = {};
export default mod;

var foo = "FOO";
var bar = "BAR";

function foobar(join) {
    join = (typeof join === "string") ? join : "";
    return foo + join + bar;
}
Object.defineProperty(mod, "foobar", {value: foobar});

---

src/app.js

import boilerplate from "./boilerplate/main.js";

console.log(boilerplate["foobar"]("+"));
console.log(boilerplate.foobar("+"));

---

如果在此处记录boilerplate ，则会看到它具有“ foobar”属性。 符号完整无缺。 大！

因此，app.js的第一个调用-括号表示法[“ foobar”]-可以正常工作。 但是，点符号不是。 Closure Compiler最小化了对导入模块属性的调用！
您会收到经典的“嗨。我是高级模式的新手”错误： TypeError: aa is not a function 。

我该如何预防？ （并且，为了现实起见，假设直接导出foobar不可行。）

• 我需要导出文件吗？ 我到底要怎么做？ 我在那个方向上的第一次冒险并没有带我走远... google-closure-compiler-js是否有特定的技巧？

• 在Closure Compiler添加自动不重命名对导入属性的调用的功能之前，是否存在某种允许点标记的hack？

• 这篇关于JS-Modules＃type-references的 闭合编译器/ wiki的文章建议我做什么？ 这是我无法实现的答案吗？

  /** @param {foo.Foo} Foo */ function(Foo) {}

Answer 1

为了获得高级模式兼容性，请使用Object.defineProperties避免使用引号引起来的字符串。

Object.defineProperties(mod, {
  foobar: {value: foobar}
});

任何时候使用带引号的字符串，都将需要使用方括号（或其他技术），否则可能会违反一致的属性访问规则。