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

久未见 提交于 2019-12-06 07:36:23

问题


I have an existing ExtJS app developed using ExtJS 4.2.1. I am using Closure minifier through Maven plugin minify-maven-plugin. The generated minified JS files (without merge) works fine. However, generated merged minified file throws undefined errors because the definition comes later in the merged file. My question is, is there a way I can figure out the order I have to provide the plugin? (I don't want to use Sencha Cmd)

The app folder follows the structure

app/common, app/controller, app/model, app/proxy, app/store, app/utils, app/view

At the moment this is how I have defined the build process in Maven POM file

<plugins>
        <plugin>
            <groupId>com.samaxes.maven</groupId>
            <artifactId>minify-maven-plugin</artifactId>
            <version>1.7.4</version>
            <executions>
                <execution>
                    <id>default-minify</id>
                    <phase>prepare-package</phase>
                    <goals>
                        <goal>minify</goal>
                    </goals>
                    <inherited>false</inherited>
                    <configuration>
                        <charset>UTF-8</charset>
                        <!--  <skipMerge>true</skipMerge> -->
                        <webappSourceDir>${basedir}/src/main</webappSourceDir>
                        <jsSourceDir>js/app</jsSourceDir>
                        <jsTargetDir>js/app</jsTargetDir>
                        <jsEngine>CLOSURE</jsEngine>
                        <closureLanguage>ECMASCRIPT5</closureLanguage>
                        <closureAngularPass>true</closureAngularPass>
                        <nosuffix>true</nosuffix>
                        <webappTargetDir>${project.build.directory}</webappTargetDir>
                        <jsSourceIncludes>
                            <jsSourceInclude>**/*.js</jsSourceInclude>
                        </jsSourceIncludes>
                    </configuration>
                </execution>
            </executions>
        </plugin>

回答1:


Why dont use Sencha Cmd? It does exactly what you want!

Maybe it helps if you know that you can use Sencha Cmd without the Sencha application structure. If you want only merge the files use the concatenate cmd.

If you really dont want use Sencha Cmd, then you have to take care of all the extends, requires, mixins and so on... and I would not recommend this!

For example use Sencha Cmd with manual paths and exclude the extjs classes

sencha compile --classpath=myApp/src,extjs/src -debug=false exclude -all and include -namespace MyApp.* and concat bundle.js

the extjs/src path is the path where your extjs classes are




回答2:


Since your question is about the order of of files for minification, providing that information below:

We had a similar requirement, where I could not use Sencha cmd as it is to minify files, so created jsb file on my own [I know this is not recommended :( ].

What I did was, created below jsb file [please note: sequence of files is very important]:

{
"projectName": "ProductName",
"builds": [
/** This file is for production purpose **/
    {
        "name": "ProductName - Production",
        "target": "all-app.js",
        "compress": true,
        "files": [
        /** utils **/

            {
                "path": "app/util/",
                "name": "util.js"
            }
        /** models **/
            {
                "path": "app/model/",
                "name": "MyModel.js"
            },
        /** stores **/
            {
                "path": "app/store/",
                "name": "MyStore.js"
            },

        /** custom components  **/

            {
                "path": "resources/ux/form/",
                "name": "MySearchField.js"
            },
        /** views **/
            {
                "path": "app/view/admin/",
                "name": "MyView.js"
            },
        /** controllers **/
         {
                "path": "app/controller/",
                "name": "Window.js"
         },
        /** app.js **/

         {
                "path": "",
                "name": "app.js"
         }
        ]
    },
    /** This file is for debug purpose **/
    {
        "name": "ProductName - debug",
        "target": "all-app-debug.js",
        "compress": false,
        "files": [
        /** utils **/

            {
                "path": "app/util/",
                "name": "util.js"
            }
        /** models **/
            {
                "path": "app/model/",
                "name": "MyModel.js"
            },
        /** stores **/
            {
                "path": "app/store/",
                "name": "MyStore.js"
            },

        /** custom components  **/

            {
                "path": "resources/ux/form/",
                "name": "MySearchField.js"
            },
        /** views **/
            {
                "path": "app/view/admin/",
                "name": "MyView.js"
            },
        /** controllers **/
         {
                "path": "app/controller/",
                "name": "Window.js"
         },
        /** app.js **/

         {
                "path": "",
                "name": "app.js"
         }
        ]
    }
],
"resources" : []

}

If you create a minified file using above sequence, it will work in your case as well.

Hope this help. Thanks!



来源:https://stackoverflow.com/questions/29565047/is-there-a-way-to-minify-an-extjs-application-without-sencha-cmd

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!