【问题标题】:ExtJS: Override all AJAX calls in production buildExtJS:覆盖生产构建中的所有 AJAX 调用
【发布时间】:2018-01-17 20:33:50
【问题描述】:

我想要做的是覆盖所有 AJAX 请求,包括 AJAX 代理,所以我创建的是对 Ext.data.Connection 的覆盖。在开发模式下,这就像一个魅力,但在生产构建中,事情变得有点奇怪。

事情变得奇怪的原因是因为我们正在做一些“分裂”构建的事情(link here)。意思是,我们把所有的框架代码放到它自己的文件中,然后有“app.js”,它本质上是我们用来启动我们的应用程序,以及“viewport.js”,它是启动成功后的实际应用程序。我们这样做是因为在“app.js”中,我们有一个 auth 调用来确保用户是有效的,如果是,那么我们加载“viewport.js”。

我认为问题在于,因为我们正在覆盖这样一个核心功能,它实际上并没有在 app.js 加载之前被覆盖,此时,Ext.Ajax——一个单独的被覆盖的类 Ext.data.Connection-- 已经被创建,我们在覆盖它时失败了。看起来覆盖包含在 app.js 中,所以这个假设是有道理的。

我认为需要发生的是 build.xml 需要在 framework.js 文件中包含这个覆盖,但我真的不知道该怎么做......我从来没有处理过 Ant,所以我什至不确定我会从哪里开始。如果有人能指出我正确的方向,那将非常有帮助。这就是 build.xml 现在的样子(请参阅开始自定义添加注释了解我们添加拆分代码的位置):

<?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 版本或我自己的数据代理......我意识到这可能是正确的方法,但是有很多代码我必须替换它,而且将是我目前没有时间进行的大量回归测试。

【问题讨论】:

    标签: javascript ajax extjs ant extjs6


    【解决方案1】:

    我想我可能已经弄清楚了,但它可能效率低下。我所做的是更新 Build.xml 文件以包含该页面,并将 framework.js 文件的输出写入路径更改为 app.js 所在的位置。然后我更新了 app.json 以更改框架节点的写入路径。不知道为什么我必须改变这两个地方,我几乎觉得它会将 framework.js 写入 app.js,然后再覆盖它......所以这可能效率低下,但这似乎确实有效。

    <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的输出节点中:

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

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2014-09-26
      • 2021-11-08
      • 1970-01-01
      • 2011-10-25
      • 1970-01-01
      相关资源
      最近更新 更多