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

Question

我一直在研究在不使用Sencha的情况下最小化ExtJS应用程序的能力，而我发现最接近的是此链接：

但是，我不确定如何在以后的注释之一中执行文件。 我将minify-maven-plugin与com.samaxes.maven和CLOSURE引擎一起使用。 我能够生成整个项目的缩小的js文件，但是在尝试加载网页时出现错误。

我能够验证网页正在调用正确的文件。 我收到错误“ TypeError：q未定义” ...完全没有帮助。 没有缩小的文件，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' ]);
};

grunt的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将使用字母顺序。 如果扩展某个类，则必须将父类包括在更高的位置。 app.js应该在结尾。 除此之外，它在单个混合文件中运行良好，因此我不必进一步自定义文件顺序。 Grunt具有非常强大的路径模式，因此，如果您需要确保首先包含某个文件，则只需在其他路径模式之前列出它即可，因为它很聪明，不会两次包含它。

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

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

问题描述

2 个解决方案

解决方案1
0 2016-05-13 15:27:43

解决方案2
0 已采纳 2016-05-15 03:08:51

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

问题描述

2 个解决方案

解决方案1 0 2016-05-13 15:27:43

解决方案2 0 已采纳 2016-05-15 03:08:51

解决方案1
0 2016-05-13 15:27:43

解决方案2
0 已采纳 2016-05-15 03:08:51