ExtJS:覆盖生产构建中的所有AJAX调用 [英] ExtJS: Override all AJAX calls in production build

问题描述

我想做的是覆盖所有AJAX请求，包括AJAX代理，所以我创建的是对Ext.data.Connection的覆盖.在开发模式下，这就像是一种魅力，但是在生产版本中，事情会变得有些奇怪.

What I'm trying to do is override all AJAX requests, including AJAX proxies, so what I created was an override for Ext.data.Connection. In development mode, this works like a charm, but in a production build, things get a little weird.

事情变得怪异的原因是因为我们正在做一些分裂"构建的事情(链接到这里) .意思是，我们将所有框架代码放入其自己的文件中，然后包含"app.js"和"viewport.js"，"app.js"本质上是我们用来引导应用程序的内容，而"viewport.js"是成功启动后的实际应用程序.这样做是因为在"app.js"中，我们有一个auth调用来确保用户有效，如果有效，则加载"viewport.js".

The reason why things get weird is because we're doing something that "splits" the build (link here). Meaning, we put all of the framework code into its own file, then have "app.js," which is essentially what we use for booting our application, and "viewport.js," which is the actual application after the booting succeeds. We do this because in "app.js," we have an auth call which makes sure the user is valid, and if they are, then we load "viewport.js."

我认为这是问题所在，因为我们要覆盖这样的核心功能，实际上直到app.js加载时，它才真正被覆盖.覆盖的类Ext.data.Connection-已经创建，我们在覆盖它时会失败.看来该覆盖已包含在app.js中，因此这种假设是有道理的.

I think the problem with this is, because we're overriding such a core piece of functionality, it doesn't actually get overridden until app.js loads, which, at that point, Ext.Ajax--a singleton of the overridden class Ext.data.Connection--has already been created, and we lose out on overriding that. It looks like the override is included in app.js, so this assumption would make sense.

我认为需要发生的是build.xml需要在Framework.js文件中包含此覆盖，但是我真的不知道该怎么做...我从未与Ant接触过，所以我什至不知道该从哪里开始.如果有人可以指出正确的方向，那将非常有帮助.这就是build.xml现在的样子(有关在其中添加拆分代码的信息，请参见开始自定义添加注释):

I think what needs to happen is that the build.xml needs to include this override in the framework.js file, but I really don't know how to do that... I've never dealt with Ant, so I'm not even sure where I would start. If someone could point me in the right direction, that'd be super helpful. This is what the build.xml looks like right now (see begin custom addition comment for where we added the split code):

<?xml version="1.0" encoding="utf-8"?>
<project name="NewApp" default=".help">

    <!-- Find and load Sencha Cmd ant tasks -->
    <script language="javascript">
        <![CDATA[
            var dir = project.getProperty("basedir"),
                cmdDir = project.getProperty("cmd.dir"),
                cmdLoaded = project.getReference("senchaloader");

            if (!cmdLoaded) {
                function echo(message, file) {
                    var e = project.createTask("echo");
                    e.setMessage(message);
                    if (file) {
                        e.setFile(file);
                    }
                    e.execute();
                };

                if (!cmdDir) {

                    function exec(args) {
                        var process = java.lang.Runtime.getRuntime().exec(args),
                            input = new java.io.BufferedReader(new java.io.InputStreamReader(process.getInputStream())),
                            headerFound = false,
                            line;

                        while (line = input.readLine()) {
                            line = line + '';
                            java.lang.System.out.println(line);
                            if (line.indexOf("Sencha Cmd") > -1) {
                                headerFound = true;
                            }
                            else if (headerFound && !cmdDir) {
                                cmdDir = line;
                                project.setProperty("cmd.dir", cmdDir);
                            }
                        }
                        process.waitFor();
                        return !!cmdDir;
                    }

                    if (!exec(["sencha", "which"])) {
                        var tmpFile = "tmp.sh";
                        echo("source ~/.bash_profile; sencha " + whichArgs.join(" "), tmpFile);
                        exec(["/bin/sh", tmpFile]);
                        new java.io.File(tmpFile)['delete']();
                    }
                }
            }

            if (cmdDir && !project.getTargets().containsKey("init-cmd")) {
                var importDir = project.getProperty("build-impl.dir") ||
                                (cmdDir + "/ant/build/app/build-impl.xml");
                var importTask = project.createTask("import");

                importTask.setOwningTarget(self.getOwningTarget());
                importTask.setLocation(self.getLocation());
                importTask.setFile(importDir);
                importTask.execute();
            }
        ]]>
    </script>

    <!--
    The following targets can be provided to inject logic before and/or after key steps
    of the build process:

        The "init-local" target is used to initialize properties that may be personalized
        for the local machine.

            <target name="-before-init-local"/>
            <target name="-after-init-local"/>

        The "clean" target is used to clean build output from the build.dir.

            <target name="-before-clean"/>
            <target name="-after-clean"/>

        The general "init" target is used to initialize all other properties, including
        those provided by Sencha Cmd.

            <target name="-before-init"/>
            <target name="-after-init"/>

        The "page" target performs the call to Sencha Cmd to build the 'all-classes.js' file.

            <target name="-before-page"/>
            <target name="-after-page"/>

        The "build" target performs the call to Sencha Cmd to build the application.

            <target name="-before-build"/>
            <target name="-after-build"/>
    -->
    <!-- BEGIN CUSTOM ADDITION TO BUILD.XML -->
    <target name="-after-js">
        <!-- The following is derived from the compile-js target in
             .sencha/app/js-impl.xml. Compile the viewport and all of its
             dependencies into viewport.js. Include in the framework
             dependencies in the framework file. -->
        <x-compile refid="${compiler.ref.id}">
            <![CDATA[
            union
              -r
              -class=${app.name}.view.main.Main
            and
            save
              viewport
            and
            intersect
              -set=viewport,allframework
            and
            include
              -set=frameworkdeps
            and
            save
              frameworkdeps
            and
            include
              -tag=Ext.cmd.derive
            and
            concat
              -remove-text-references=${build.remove.references}
              -optimize-string-references=${build.optimize.string.references}
              -remove-requirement-nodes=${build.remove.requirement.nodes}
              ${build.compression}
              -out=${build.framework.file}
              ${build.concat.options}
            and
            restore
              viewport
            and
            exclude
              -set=frameworkdeps
            and
            exclude
              -set=page
            and
            exclude
              -tag=Ext.cmd.derive,derive
            and
            concat
              -remove-text-references=${build.remove.references}
              -optimize-string-references=${build.optimize.string.references}
              -remove-requirement-nodes=${build.remove.requirement.nodes}
              ${build.compression}
              -out=${build.out.base.path}/${build.id}/viewport.js
              ${build.concat.options}
            ]]>
        </x-compile>

        <!-- Concatenate the file that sets the main view. -->
        <concat destfile="${build.out.base.path}/${build.id}/viewport.js" append="true">
            <fileset file="classic/viewport.js"/>
        </concat>
    </target>

    <target name="-before-sass">
        <!-- The viewport is not explicitly required by the application,
             however, its SCSS dependencies need to be included. Unfortunately,
             the property required to filter the output, sass.name.filter, is
             declared as local and cannot be overridden. Use the development
             configuration instead. -->
        <property name="build.include.all.scss" value="true"/>
    </target>

</project>

回顾一下，运行 sencha app watch 并加载页面将显示Ext.Ajax单例的侦听器，但是运行 sencha app build production 并加载页面将不显示任何听众.不，我不希望创建自己的Ext.Ajax版本或自己的数据代理...我意识到这可能是正确的方法，但是有很多代码需要替换，我目前没有时间进行大量的回归测试.

To recap, running sencha app watch and loading the page will show the listeners for the Ext.Ajax singleton, but running sencha app build production and loading the page will show no listeners. And no, I do not wish to create my own version of Ext.Ajax or my own data proxy... I realize that's probably the right approach, but there is a lot of code where I'd have to replace that, and that would be a whole lot of regression testing that I currently don't have time for.

推荐答案

我想我可能已经知道了，但是效率可能很低.我所做的是更新Build.xml文件以包括该页面，并将Framework.js文件的输出写入路径更改为app.js所在的位置.然后，我更新了app.json以更改框架节点的写入路径.不知道为什么我必须同时更改两个位置，我几乎感觉到它会将framework.js写入app.js，然后稍后将其覆盖...因此效率低下，但这似乎行得通./p>

I think I may've figured it out, but it might be inefficient. What I did was update the Build.xml file to include the page, and changed the output write path for the framework.js file to where app.js is. Then I updated app.json to change the path of where the framework node gets written. Not sure why I'd have to change both places, and I almost feel like it writes framework.js into app.js, and then overwrites it later on... so that might be inefficient, but this does seem to work.

<x-compile refid="${compiler.ref.id}">
    <![CDATA[
    union
      -r
      -class=${app.name}.view.main.Main
    and
    save
      viewport
    and
    intersect
      -set=viewport,allframework
    and
    include
      -set=frameworkdeps
    and
    save
      frameworkdeps
    and
    include
      -tag=Ext.cmd.derive
    and
    // added this
    include
      -set=page
    and
    concat
      -remove-text-references=${build.remove.references}
      -optimize-string-references=${build.optimize.string.references}
      -remove-requirement-nodes=${build.remove.requirement.nodes}
      ${build.compression}
      // changed this
      -out=${build.classes.file}
      ${build.concat.options}
    and
    restore
      viewport
    and
    exclude
      -set=frameworkdeps
    and
    exclude
      -set=page
    and
    exclude
      -tag=Ext.cmd.derive,derive
    and
    concat
      -remove-text-references=${build.remove.references}
      -optimize-string-references=${build.optimize.string.references}
      -remove-requirement-nodes=${build.remove.requirement.nodes}
      ${build.compression}
      -out=${build.out.base.path}/${build.id}/viewport.js
      ${build.concat.options}
    ]]>
</x-compile>

然后在app.json的输出节点中:

Then in the output node in app.json:

"framework": {
  // Added this path
  "path": "${build.id}/app.js",
  "enable": true
}

这篇关于ExtJS:覆盖生产构建中的所有AJAX调用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！