ExtJS应用程序构建失败:ReferenceError: d3未定义

ExtJS application build fails: ReferenceError: d3 is not defined

本文关键字:ReferenceError 未定义 d3 失败 应用程序 构建 ExtJS      更新时间:2023-09-26

这个问题与ExtJS最近发布的D3集成包有关,而不是原来的D3集成包。

如果我运行'sencha app watch',它工作得很好,但是如果它运行'sencha app build',它就会失败。这是我看到的:

ReferenceError: d3 is not defined
...pply(d,f)}}return e},getSvg:function(){return this.svg||(this.svg=d3.select(this...

,这显然是sencha自己的代码(看到我没有调用d3。something在我的代码中的任何地方)。

所以我的问题归结为:app watch和build之间的关键区别是什么?我该如何调试它(我甚至不能打开这个错误指向的文件,因为如果我尝试打开,我的文本编辑器会冻结)?

这是代码,其中使用d3(而不是其他地方):

Ext.define('Dashboards.view.svgmap.SvgMap', {
    extend: 'Ext.panel.Panel',
    xtype: 'svgmap',
    requires: ['Ext.d3.interaction.PanZoom', 'Ext.d3.*'],
    controller: 'svgmap',

    config: {
        mapWidth: 800,
        mapHeight: 600,
        styling: [],
        colorRegions: [],
    },
    statics: {
        regionList: [],
    },
    layout: {
        type: 'vbox',
        align: 'stretch'
    },
    find: function(name) {
        ...
    },
    xml : function(url, callback) {
        /*d3.xml function equivalent*/
        ...
    },
    initComponent: function() {
        var me = this;
        this.items = [{
            xtype: 'd3-svg',
            reference: 'svgContainer',
            width: this.getMapWidth(),
            height: this.getMapHeight(),
            interactions: {
                type: 'panzoom',
                zoom: {
                    extent: [1, 4],
                    doubleTap: false,
                    mouseWheel: this.getEnableScroll()
                }
            },
            listeners: {
                scenesetup: function(component, scene) {
                    var regions = me.getColorRegions();
                    var width = me.getMapWidth();
                    var height = me.getMapHeight();
                    var styling = me.getStyling();
                    var svg = scene.append("svg")
                        .attr("width", width)
                        .attr("height", height)
                        .attr("preserveAspectRatio", "xMinYMin meet")
                        .classed("svg-content", true);

                    me.xml(Dashboards.Properties.serviceRootUrl + "/LietuvosZemelapisNoStyle.svg",
                        function(error, documentFragment) {
                            if (error) {
                                console.log(error);
                                return;
                            }
                            var svgNode = documentFragment
                                .getElementsByTagName("svg")[0];
                            svg.node().appendChild(svgNode);
                            for (var i = 0; i < regions.length; i++) {
                                var r = regions[i];
                                var sel = svg.select('#' + me.find(r.code).id);
                                sel.attr('color', r.color)
                                    .attr('fill', r.color)
                                    .attr('fill-opacity', 1);
                            }

                        });
                }
            }
        }];
        this.callParent(arguments);
    }
});

在再次遇到同样的问题,并无意中发现我自己以前未回答的问题之后,我想我应该写下这次是如何解决的。

在app.json中,"js"数组属性缺少一个条目

{
    "path": "${framework.dir}/build/ext-all-rtl-debug.js"
}