如何有效地将 google-closure javascript 转换为现代 ES6？

Posted 2023-03-24

【中文标题】如何有效地将 google-closure javascript 转换为现代 ES6？

【英文标题】：How could I effectively convert google-closure javascript to modern ES6?

【发布时间】：2020-06-29 02:06:20

【问题描述】：

我有一个使用 google-closure 样式模块 goog.provide 和类等的代码库。

我想对这个代码库进行现代化改造，但它大约有 15k 行代码，我希望有一个工具可以帮助我。

这些工具坏了，我尝试了很多方法来让它们工作，但它们就是不行。这是一个失败的原因。 https://github.com/angular/clutz https://github.com/DreierF/closure-es6-converter

我想如果我有一个工具可以将闭包类和模块更新为 ES6 变体，我可以手动完成其他所有工作。

此工具可用于更新到现代 ES6 类语法，但特别是不会更新闭包模块。 https://github.com/lebab/lebab

这个工具可以让我将闭包模块转换为 es6 模块吗？还是它只产生一个缩小的输出。 https://webpack.js.org/plugins/closure-webpack-plugin/#usage-example

【参考方案1】：

您应该阅读 2 个文档：

ES6 modules and Closure interop

和

Migrating from goog.modules to ES6 modules

每个项目的一些亮点：

ES6 模块可以像 goog.modules 一样使用 goog.require 来引用 Closure 文件：

const math = goog.require('goog.math');
export const MY_CONSTANT = math.sum(1, 1, 2, 3, 5, 8, 13, 21);

---

闭包库有函数goog.declareModuleId(/** string */ id)，当在 ES6 模块中调用时，它会将 ES6 模块与类似 goog.module 的 id 相关联（例如，可以是 goog.require'd、goog.module.getd、@987654327 @ 和 goog.requireTyped，并且不会创建任何全局符号）。这些符号的 goog.requires 将返回整个模块对象，就像被 import * as 绑定一样。

goog.declareModuleId('example.es6');
export const MY_CONSTANT = 'Hello!';

和

闭包模块默认导出 闭包模块可以通过 exports = value; 进行“默认”导出。使用此语法时，模块的导出成为默认导出。这经常与导出单个类的模块一起使用。

goog.module('my.Class');
class Class 
// Default export. goog.require for this module returns this class.
exports = Class; 

---

迁移调用 declareLegacyNamespace 的闭包模块怎么样？ ES6 模块不支持 goog.module.declareLegacyNamespace。它打破了模块的一个基本原则：模块不会创造全局价值。其目的是允许从 goog.provide 迁移到 Closure 模块。我们在迁移到 ES6 模块时不支持它。

建议您首先将所有依赖于 declareLegacyNamespace 调用的 goog.provided 文件迁移到 Closure 或 ES6 模块，或者至少让它们在 goog.scope 中调用 goog.module.get 以获取对模块的引用.如果这是不可能的并且仍然需要迁移 Closure 模块，您需要按照类似的步骤来迁移具有默认导出的 Closure 模块，除了您的 *_shim.js 文件将调用 declareLegacyNamespace。只有迁移所有 goog.provide 文件后，您才能删除此文件。

【讨论】：

我尝试使用 const math = goog.require('goog.math');在一个简单的测试文件中，但数学最终被分配为空。你能举一个更完整的例子吗？这些链接很有帮助，但也没有提供这种详细程度。