2

我正在寻找在部署我的 JavaScript 应用程序时在服务器上运行的“模块定义”框架。

我知道 require.js 和其他 AMD 框架。但是,在我的生产代码中实现define()和实现的必要性require()并不符合我的目的,并且由于应用程序将部署在一个文件中,因此我不需要异步注入脚本的能力。

是否有可以在不添加基础架构代码的情况下合并脚本的构建工具?

澄清一下:嵌入脚本的 HTML 页面与我的问题无关。合并过程应在脚本级别完成。

主.js

function a() {
    import("b");
    b();
}

b.js

var b = function() {
    alert("b!");
};

应该简单地变成这样:

function a() {
    var b = function() {
        alert("b!");
    };
    b();
}
4

1 回答 1

0

所以你想要一个工具来查找和替换

<script src="SOURCE_URI" type="text/javascript"></script>

在你的 HTML 文件中

<script type="text/javascript">
CONTENT_OF_SOURCE_URI
</script>

或者,也许您想收集所有 SOURCE_URI,然后将它们组合成一个串联文件,然后将该文件运行到 JavaScript 编译器/优化器/混淆器(如 Closure)中,然后输出内联脚本?

现有的大多数工具可能会使用 require() 并以 JS 文件作为输入,所以我建议你自己编写。一个简单的正则表达式从 HTML 中的脚本标签中解析 SRC= 可能就足够了。

编辑 https://developers.google.com/closure/compiler/docs/api-tutorial3

使用 SIMPLE_OPTIMIZATIONS 的默认编译级别,闭包编译器通过重命名局部变量来使 JavaScript 更小。但是,除了局部变量之外,还有一些符号可以缩短,除了重命名符号之外,还有一些方法可以缩小代码。使用 ADVANCED_OPTIMIZATIONS 进行编译可充分利用代码压缩的全部可能性。

比较以下代码的 SIMPLE_OPTIMIZATIONS 和 ADVANCED_OPTIMIZATIONS 的输出:

function unusedFunction(note) {
  alert(note['text']);
}

function displayNoteTitle(note) {
  alert(note['title']);
}

var flowerNote = {};
flowerNote['title'] = "Flowers";
displayNoteTitle(flowerNote);

使用 SIMPLE_OPTIMIZATIONS 编译将代码缩短为:

function unusedFunction(a){alert(a.text)}function displayNoteTitle(a){alert(a.title)}var flowerNote={};flowerNote.title="Flowers";displayNoteTitle(flowerNote);

使用 ADVANCED_OPTIMIZATIONS 编译可以进一步缩短代码:

var a={};a.title="Flowers";alert(a.title);

这两个脚本都会产生一个警报,阅读“Flowers”,但第二个脚本要小得多。

于 2013-08-06T13:48:18.427 回答