如何使用Google的闭包编译器将javascript拆分为模块

How do I split my javascript into modules using Google's Closure Compiler?

本文关键字：javascript 拆分 模块 编译器 何使用 Google 闭包      更新时间：2023-09-26

我想在我们使用的javascript源代码上使用google闭包编译器。在开发模式下，我们倾向于将功能分解为许多文件，但对于生产环境，我们希望将它们组合成模块。

调用编译器时，我可以给它一个要包含的文件列表以进行编译，但输出显示编译器没有保存文件列表的顺序。

我

搜索了一下，发现我可以使用goog.provide/good.require来控制不同js文件之间的依赖关系。这样做的问题是它向我的 js 添加了我不需要或不想要的代码，例如：

goog.provide("mainFile")

将添加以下内容：

var mainFile = {};

到编译的 js 文件，这是我不想要的。我们根本没有使用谷歌闭包库，我想用的是编译器。

有没有办法告诉编译器文件的顺序，而不包括更多我不需要的"闭包库"功能？我当然可以创建一个自己的工具，它首先会获取所有文件，将它们组合成一个文件，然后作为编译器的输入，但如果它可以由编译器本身完成，我宁愿取消它。

编辑

目标是能够生成类似于此线程中的答案的模块： 使用闭包编译器中的 --module 选项创建多个输出文件

因此，我想添加控制哪些文件进入哪个模块的能力，同时还可以控制它们的顺序。目前我不使用通配符，但我计划将来这样做(如果可能的话(。

只需"cat file1.js file2.js> 组合.js&&编译..."很好，但在我们的情况下，它有点复杂，我们必须编写一个基于某些逻辑的程序/脚本来做到这一点。如果我们可以以某种方式告诉编译器文件的高级顺序，它可能只是节省了实现这样一个程序的时间。

谢谢。

闭包编译器创建多个输出文件的能力提供了一个强大的工具，可以将输入文件分成不同的输出块。它的设计使得可以根据所需的功能在不同的时间加载不同的块。有多个与块相关的编译器标志。

每次使用 --chunk 标志都描述了一个输出文件及其依赖项。每个区块标志都遵循以下语法：

--js inputfile.js
--chunk name:num_files:dependency

生成的输出文件将是 name.js 并包含前面的 --js 标志指定的文件。

依赖选项是您最感兴趣的选项。它指定父块是什么。区块选项必须描述有效的依赖关系树(必须具有基本区块(。

下面是一个示例：

--js commonfunctions.js
--chunk common:1
--js page1functions.js
--js page1events.js
--chunk page1:2:common
--js page2function.js
--chunk page2:1:common
--js page1addons.js
--chunk page1addons:1:page1

在这种情况下，您告诉编译器 page1 和 page2 块依赖于公共块，而 page1addons 块依赖于 page1 块。

请记住，如果编译器确定代码仅由该区块使用，则编译器可以并且确实将代码从一个区块移动到其他区块输出文件中。

这些都不需要闭包库或使用goog.require/offer调用，也不会在输出中添加任何代码。如果您希望编译器自动确定依赖项或能够为您管理这些依赖项，则需要使用模块格式，例如 CommonJS、ES2015 模块或 goog.require/provide/module 调用。

更新说明：在20180610版本之前，chunk标志被命名为 module 。它们被重命名以减少与正确的JS模块的混淆。答案已更新以反映新名称。

更新说明 2：现在有一个实用程序可以自动为您计算和生成这些标志：https://github.com/ChadKillingsworth/closure-calculate-chunks

您还可以设置输出路径，例如：

-

-module_output_path_prefix ./public/js/

另请参阅：使用闭包编译器中的 --module 选项创建多个输出文件

相关文章：