如何在不使用Sencha的情況下縮小ExtJs 5項目？

我一直在研究中縮小不煎茶的ExtJS的應用程序，我是來爲這個鏈接最接近的能力：如何在不使用Sencha的情況下縮小ExtJs 5項目？

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

但是，我不知道如何的一個執行文件後來的評論。我正在使用帶有com.samaxes.maven和CLOSURE引擎的minify-maven插件。我能夠生成整個項目的縮小js文件，但當我嘗試加載網頁時出現錯誤。

我能夠驗證網頁正在調用正確的文件。我收到錯誤「TypeError：q is undefined」......根本沒有幫助。如果沒有縮小文件，Web應用程序將完美運行。所以，生成的縮小文件必須有問題。

在上面的鏈接底部的建議，表示文件，我應該包括的序列，但我不知道如何真正實現這一點。此外，可能有超過一百個JavaScript文件需要縮小，所以我寧願不必在jsb文件中輸入每個文件。

有沒有對如何在構建時使用Maven再壓縮我的整個項目有什麼建議？

來源

2016-05-13 evanrich3891

我使用Grunt來構建項目，但它並不重要，因爲所有你需要的是組合文件，所以maven應該超過能力。

我希望我的dev版本還是靠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' ]); 
};

咕嚕的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" 
    } 
}

文件的順序關係，在默認情況下咕嚕將使用字母順序。如果你擴展某個類，父類必須包含更高的類。 app.js應該在最後。除此之外，它在單個混合文件中運行良好，因此我不必進一步自定義文件順序。 Grunt擁有非常強大的path patterns，所以如果您需要確保某個文件包含在內，那麼您只需在其他路徑模式之前列出它，並且它足夠聰明，不會包含它兩次。

我建議你從簡單的連接開始，不要縮小，只有在那些作品嚐試縮小它。縮小時，可能需要小心全局函數和變量，因爲如果縮小器過於激進，它們可以重命名。 Grunt的縮小器幾乎可以用默認設置工作，我只需要對我的代碼做一些小的修改（與全局函數有關）。

來源

2016-05-15 03:08:51 serg

+1 @serg。這是很棒的信息！我正在瀏覽maven文檔並意識到出了什麼問題。縮小器只是試圖縮小一個特定的文件夾，而不是需要縮小的文件夾。我需要更改我想縮小的源文件夾。我也確實需要確保我正在按照正確的順序縮小這些文件夾，最後app.js就像你說的那樣。我還將這些條件添加到了需求語句中，這是一個巨大的幫助！這使我能夠設置一個配置文件，以使用縮小的應用程序或正常的應用程序進行故障排除。 – evanrich3891

雖然我不知道你爲什麼會想這樣，你需要主要的是所謂的依賴關係樹 - 它告訴你在其中包括源文件的順序。

然後你就可以把所有的文件（ExtJS的來源，圖書館如果適用，還可以將自己的觀點）成一個大文件，以正確的順序。這個文件應該和500個不同的文件完全一樣。（這爲我做的。）

上述工作完成後，你可以搜索工作minifier。並不是每個縮小器都可以縮小ExtJS代碼，並且在我們最終決定切換到Sencha Cmd之前，我不記得上次的結果，但我認爲Microsoft Javascript Minifier是一款適合我們的工具。

除此之外，縮小的JavaScript非常清晰。您應該提供錯誤的來源，錯誤之前200個字符，錯誤後200個字符，我想這裏有人可以告訴那裏發生了什麼。

來源

2016-05-13 15:27:43 Alexander

我想縮小這些文件，因爲ExtJS很慢並且需要優化。我想遠離手動輸入所有文件，但似乎我不能這樣做，因爲我總是會遇到很多錯誤。我目前正在使用縮小器來處理我的css文件，效果很好。我使用ExtJS的所有文件都是* .js文件，所以我實際上正在瀏覽整個項目並試圖找出加載文件的正確順序。然後修改pom.xml文件以獲得正確的順序。感謝您的回覆，我真的很感激。我正在接近完成這項艱鉅的任務！ – evanrich3891

如何在不使用Sencha的情況下縮小ExtJs 5項目？

回答

相關問題