如何在没有 Sencha 的情况下缩小 ExtJs 5 项目？

Question

我一直在研究在没有 Sencha 的情况下缩小 ExtJS 应用程序的能力，我最接近的是这个 link：

Is there a way to minify an ExtJS application without Sencha CMD?

但是，我不确定如何在后面的评论之一中执行该文件。我正在使用带有 com.samaxes.maven 和 CLOSURE 引擎的 minify-maven-plugin。我能够生成整个项目的缩小 js 文件，但是当我尝试加载网页时出现错误。

我能够验证网页调用了正确的文件。我收到错误 "TypeError: q is undefined"... 一点帮助也没有。没有缩小文件，Web 应用程序运行完美。所以，生成的缩小文件一定有问题。

上面 link 底部的建议指出了我应该包含的文件顺序，但我不知道如何实际实现它。此外，可能有超过一百个 javascript 文件需要缩小，所以我宁愿不必在 jsb 文件中键入每个文件。

关于如何在构建时使用 Maven 缩小我的整个项目有什么建议吗？

Answer 1

虽然我不确定您为什么想要这个，但您主要需要的是所谓的依赖关系树 - 它会告诉您包含源文件的顺序。

然后您可以将所有文件（ExtJS 源、适用的库以及您自己的视图）以正确的顺序放入一个大文件中。然后，该文件应该与 500 个不同的文件完全一样。（对我有用。）

大功告成，您可以搜索可用的缩小器。并非每个 minifier 都可以缩小 ExtJS 代码，我不记得在我们最终决定切换到 Sencha Cmd 之前我的最后结果，但我认为 Microsoft Javascript Minifier 对我们有用。

除此之外，缩小后的 JavaScript 确实清晰可辨。你应该提供错误的来源，错误前200个字符和错误后200个字符，我想这里有人可以告诉那里发生了什么。

Answer 2

我正在使用 Grunt 来构建项目，但这并不重要，因为您只需要合并文件，所以 maven 应该绰绰有余。

我希望我的开发版本仍然依赖于 Extjs 动态 class 加载程序，这样我就不必在每次修改一个文件时都重新构建项目，并且只需要将生产版本缩小到一个文件中。在我让它工作之前有一些陷阱，这就是我最终得到的。这也是针对 ExtJS6 的，但它可能仍然应该相同。

它全部由后端变量 dev 控制，当设置为 false 时将使用缩小的源。

index.html（我正在使用一些元模板语言作为示例）

<html>
<head>
    {{if dev}}
        <script src="/ext/ext-all-debug.js"></script>
    {{else}}
        <script src="/ext/ext-all.js"></script>
    {{/if}}

    <script>
        var dev = {{dev}};
        Ext.Loader.setConfig({enabled: dev});
    </script>

    {{if dev}}
        <script src="/app.min.js"></script>
    {{else}}
        <script src="/app.js"></script>
    {{/if}}
</head>
<body></body>
<html>

app 文件，当动态加载器被禁用时，requires 指令不能很好地工作，所以我不得不在任何地方添加这样的条件：

Ext.define('MyApp.view.Panel', {
    extend: 'MyApp.view.GenericPanel',
    requires: dev ? [
       'MyApp.view.AnotherView',
    ] : [],
    ...
});

Gruntfile.js（如果您只需要串联，请将 uglify 替换为 concat）

module.exports = function(grunt) {
    grunt.initConfig({
        pkg : grunt.file.readJSON('package.json'),
        uglify : {
            build: {
                files: {
                    '../app.min.js': ['../app/view/GenericPanel.js', '../app/**/*.js', '../app.js'],
                }
            }
        },
    });

    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.registerTask('default', [ 'uglify' ]);
};

咕噜的 project.json:

{
  "name": "My App",
  "version": "1.0.0",
  "devDependencies": {
    "grunt": "~0.4.5",
    "grunt-contrib-concat": "^1.0.1",
    "grunt-contrib-uglify": "^1.0.1"
  }
}

文件的顺序很重要，默认情况下 grunt 将使用字母顺序。如果扩展一些 class，则父 class 必须包含在更高的位置。 app.js 应该在最后。除此之外，它在单个混合文件中运行良好，因此我不必进一步自定义文件顺序。 Grunt 有相当强大的 path patterns，所以如果你需要确保首先包含某个文件，你只需将它列在其他路径模式之前，它会足够聪明，不会包含它两次。

我建议您从不缩小的简单串联开始，只有在可行的情况下才尝试缩小它。缩小时，您可能需要注意全局函数和变量，因为如果缩小器过于激进，它们可能会被重命名。 Grunt 的 minifier 在默认设置下几乎可以为我工作，我只需要对我的代码进行一些小的更改（与全局函数相关）。

如何在没有 Sencha 的情况下缩小 ExtJs 5 项目？

How can I minify an ExtJs 5 project without Sencha?

javascript

extjs

minify

maven