如何使用 Google 的 Closure Compiler 将我的 javascript 拆分为module?

IT技术 javascript minify google-closure-compiler
2021-02-20 01:22:13

我想在我们使用的 javascript 源代码上使用 google 闭包编译器。在开发模式中,我们倾向于将功能分解为大量文件,但在生产中希望将它们组合成module。

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

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

goog.provide("mainFile")

将添加这个:

var mainFile = {};

到编译后的 js 文件,这是我不想要的。我们根本没有使用 google 闭包库,我只想使用编译器。

有没有办法告诉编译器文件的顺序而不包含更多我不需要的“闭包库”功能?我当然可以创建一个我自己的工具,它会首先获取所有文件,将它们组合成一个,然后作为编译器的输入,但如果编译器本身可以完成,我更愿意将其设为无效。


编辑

目标是能够生成类似于此线程中的答案的module:Using the --module option in Closure Compiler to create multiple output files

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

简单地“cat file1.js file2.js > combine.js && compile...” 没问题,但在我们的例子中它有点复杂,我们必须编写一个基于某些逻辑来执行此操作的程序/脚本。如果我们能以某种方式提前告诉编译器文件的顺序,它可能只会节省实现这样一个程序的时间。

谢谢。

2个回答

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

--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/provide 调用,也不需要向输出添加任何代码。如果您希望编译器自动确定依赖项或能够为您管理这些依赖项,您需要使用module格式,例如 CommonJS、ES2015 module或 goog.require/provide/module 调用。

更新说明:在 20180610 版本之前,chunk标志被命名为module. 它们被重命名以减少与适当的 JS module的混淆。答案已更新以反映新名称。

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

我在我的博客中写了一个简单的例子来说明如何做到这一点。分享以防其他人感兴趣:syntaxsuccess.com/viewarticle/...
2021-04-22 01:22:13
上票。这是一个很好的简洁答案,带有一个很好的例子。完美的。在测试您的答案时,我无法创建名称中包含句点或破折号的module。这是可能的,还是我做错了什么?示例:--module common.min:1对我不起作用。(当我说不起作用时,我的意思是没有创建module。)
2021-05-05 01:22:13
当您有超过 1 个依赖项时呢?
2021-05-06 01:22:13
如何为生成的module创建源映射?
2021-05-11 01:22:13
这适用于明确指定的 .js 文件,但是当使用 entry_point 的自动依赖项检查时呢?您可以为一组依赖项指定一个module吗?
2021-05-19 01:22:13

您还可以设置输出路径,例如:

--module_output_path_prefix ./public/js/

另请参阅: 使用 Closure Compiler 中的 --module 选项创建多个输出文件