Question

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

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

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

我能够验证网页是否正在调用正确的文件。我收到错误“TypeError：q is undefined”...根本没用。如果没有缩小文件，Web应用程序将完美运行。因此，生成的缩小文件必须有问题。

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

有关如何使用maven在构建时缩小整个项目的建议吗？

Answer 1

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

然后，您可以按正确的顺序将所有文件（ExtJS源，库（如果适用）以及您自己的视图）放入一个大文件中。然后，此文件应与500个不同的文件完全相同。（它确实适合我。）

完成后，您可以搜索工作的缩小器。并非每个minifier都可以缩小ExtJS代码，在我们最终决定切换到Sencha Cmd之前，我不记得我的最后结果，但我认为Microsoft Javascript Minifier是适合我们的。

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

Answer 2

我正在使用Grunt来构建项目，但它并不重要，因为您需要的只是组合文件，因此maven应该更有能力。

我希望我的开发版仍然依赖于Extjs动态类加载器，因此每当我修改一个文件时，我都不必重建项目，只需将生产版本缩小为单个文件。在我开始工作之前有一些陷阱，这就是我最终的结果。这也适用于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>

应用程序文件，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' ]); };替换为

{
  "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的project.json：

app.js

文件的顺序很重要，默认情况下，grunt将使用字母顺序。如果扩展某个类，则必须将父类包括在内。 index.html应该在最后。除此之外，它在单个混合文件中运行良好，因此我不必进一步自定义文件顺序。 Grunt功能非常强大path patterns，所以如果你需要确保首先包含一些文件，你只需在其他路径模式之前列出它，并且它足够聪明，不能包含它两次。

我建议你从没有缩小的简单连接开始，只有当它起作用时才尝试缩小它。缩小时你可能需要小心全局函数和变量，因为如果minifier过于激进，它们可以被重命名。 Grunt的minifier几乎为我设置了默认设置，我只需要对我的代码进行一些小改动（与全局函数相关）。

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

2 个答案: