将 Dojo 配置文件从 Dojo 1.6.2 迁移到 Dojo 1.13答案

【问题标题】：Migration dojo profile from Dojo 1.6.2 to Dojo 1.13将 Dojo 配置文件从 Dojo 1.6.2 迁移到 Dojo 1.13
【发布时间】：2018-03-15 20:34:03
【问题描述】：

这是我第一次在这里提问。我正在将 dojo 项目从 1.6.2 版迁移到 1.13 版。该应用程序是在 PHP 上实现的与道场。我在使用当前应用程序配置文件时遇到问题。有一个使用一些 dijit 小部件作为 TextBox、ComboBox 等的登录页面。

配置文件具有登录层，该层生成优化 javascript 作为“login.js”。当浏览器呈现 PHP 登录页面时，它会显示以下错误消息，如下所示。似乎未能正确加载所有依赖项如果我想对了就订购。你能帮我指出什么是问题？我认为我的个人资料不是最新的。我试图设置不同的配置文件中的选项，但没有成功。

我已经发布了我的应用程序配置文件和我的 PHP 登录页面以及来自下面浏览器的错误消息谢谢，

位置

    dojo/parser::parse() error Error: Unable to resolve constructor for: 'dijit.form.TextBox'
    at Object.<anonymous> (login.js:formatted:87)
    at Object.map (dojo.js:51)
    at Object._instantiate (login.js:formatted:84)
    at login.js:formatted:375
    at f (dojo.js:116)
    at a.extend.then.then.a.then (dojo.js:118)
    at Object.parse (login.js:formatted:374)
    at dojo.js:47
    at l (dojo.js:52)
    at n (dojo.js:52)
(anonymous) @ login.js:formatted:379
11:39:39.343 dojo.js:28 TypeError: dijit.byId is not a function
    at showDialog ((index):38)
    at d (dojo.js:53)
    at l (dojo.js:52)
    at n (dojo.js:52)
    at p (dojo.js:54)
    at HTMLDocument.k (dojo.js:54)

以下是我的申请资料。

    dependencies = {

     optimize:"closure",
     layerOptimize: 'closure',


    layers: [
        {
            name: "login.js",
            dependencies: [
                "dojo/parser",
                "dojo/query",
                "dojo/_base.declare",
                "dojo/_base.fx",
                "dojo._base.lang",
                "dijit/form.Button",
                "dijit/form.TextBox",
                "dijit/form._TextBoxMixin",
                "dijit/form._FormValueWidget",
                "dijit/form.ValidationTextBox",
                "dijit/form.ComboBox"
            ]
        },


    prefixes: [
        [ "dijit", "../dijit" ],
        [ "dojox", "../dojox" ],
        [ "dojo", "../../dojo"]
    ]
}

以下是我的登录PHP页面

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
   <title> Application Console</title>

     <link rel="stylesheet" type="text/css" href="../../Dojo/dijit/themes/claro/claro.css"/>
        <script type="text/javascript">
          var dojoConfig = {
               has: {
                     "dojo-firebug": true
                    },
               parseOnLoad: true,
               isDebug: true,
               locale: 'en-us'
          };
     </script>

    <script type="text/javascript" src="../../Dojo/dojo/dojo.js"> </script>
    <?php
       $login_file='/var/www/xms/Dojo/dojo/login.js';
       /* Customized dojo JaveScript for UI optimization */
       if (file_exists($login_file)) {
          echo '<script type="text/javascript" src="../../Dojo/dojo/login.js"> </script>';
       } else {
       /* For backward compatibility */
           echo '<script>
            dojo.require("dojo.parser");
            dojo.require("dijit.form.Button");
            dojo.require("dijit.Dialog");
            dojo.require("dijit.form.TextBox");
            dojo.require("dijit.form.ComboBox");
           </script>';
       }
    ?>

    <script>
      dojo.addOnLoad(showDialog);


      function showDialog() {
          LoginLanding();
          dojo.connect( dijit.byId("passwordId"), "onKeyUp", checkForEnterKey );
      }

      function handleLoginVerifyReply(response, args)
      {       
          document.location.href= "index.php/consoleController";
      }

      function handleLoginVerifyErrorReply(response, args )
      {
           var responseText = response.responseText;
           var errObj = JSON.parse(responseText);
           dojo.byId("msgId").innerHTML = "<b>" + errObj.reason + "</b>";
      }

      function LoginLanding()
      {
          dojo.xhrPost({
                 url: "/index.php/verifyLogin/LoginLanding",
                 handleAs: "json",
                 timeout: 6000,
                 content: {} ,
                 load : function(response, args) {
                           if (response.status == 200)
                           {
                               handleLoginVerifyReply(response, args);
                           }
                           return response;
                        },
                 error: function(response,args) {
                           return response;
                        }
                 }
           );

      }

      function verifyLogin() {
        var vUsername= dijit.byId("userId").get("value");
        var vPassword= dijit.byId("passwordId").get("value");

        dojo.xhrPost({
                url: "/index.php/verifyLogin/login",
                handleAs: "text",
                timeout: 60000,
                content: { "usernameId" : vUsername, "passwordId" : vPassword } ,
                load : function(response, args) {
                          handleLoginVerifyReply(response, args);
                          return response;
                       },
                error: function(response,args) {
                          gUserNameLoggedIn="Unknown";
                          handleLoginVerifyErrorReply(response, args);
                          return response;
                       }
                }
        );

     }

      function cancelLogin() {
        console.log("calling cancelLogin");
      }

      function checkForEnterKey(ev)
      {
          if ( ev.keyCode == dojo.keys.ENTER ) {
              verifyLogin();
          }
      }

    </script>


    <style type="text/css">

        .loginPageIcon {
            position: absolute;
            left: 0px;
            top: 0px;
            height: 120px;
            width: 100%;
            background-color: #ffffff;
        }

        .loginPageTabContainer {
            display:flex;
            align-items:center;
            justify-content:center;
            position: absolute;  
            left: 0px; 
            top: 120px;
            margin-right: auto ;
            background-image: url('/images/slide-bg-3.jpg');
            height: 100px;
            width:  1920px; 
            font: normal 20px Open Sans !important;
            font-weight: bold;
            color: white;
            text-align:center;
        }

        h1.loginH1 {
            position: absolute;  
            margin-left: auto ;
            margin-right: auto ;
            margin-bottom: auto ;
            top: 10px ;
            color: black;
        }


        div.DivLogin {
            height: 250px;
            width: 400px;
            margin-left: auto ;
            margin-right: auto ;
            margin-top: 150px ;
            margin-bottom: auto ;
            -moz-border-radius: 4px;
            -webkit-border-radius: 4px;
            border-radius: 4px;
            -webkit-box-shadow: 0 2px 2px 0 #C2C2C2;
            box-shadow: 0 2px 2px 0 #C2C2C2;
            background-color:#679cc7
        }

        span.loginTitleTxt 
        {
            display: inline-block;
            width:100%;
            height: 100%;
            font: 500 15px Open Sans !important;
            font-weight: bold;
            text-align: center;
            margin: 0 auto;
            margin-top: 5px ;
        }


        hr.loginSeperator {
            position: relative;
            top: 10px;
            border-bottom: 1px dotted #cccccc;
            color: #ffffff;
            background-color: #ffffff;
            height: 1px;
            width: 95%;
        }


        .loginForm {
            position: relative;
            display: inline-block;
            left: 50%;
            top: 20px;
            margin-left: -180px;
            font: normal 14px Open Sans !important;
            width:50%; 
        }

        .loginTable {
            display: table;
        }

        .loginRow  {
            display: table-row;
        }

        .loginCellLeft {
            display: table-cell;
            height: 30px;
            padding-right: 40px;
        }

        .loginCellRight {
            display: table-cell;
            height: 30px;
            width:50px;
        }

                .loginCellEmpty {
                        display: table-cell;
                        height: 10px;
                }

        .loginMsgLabel {
            position: relative;
            left: 100%;
            margin-left: -200px;
            font: normal 14px Open Sans !important;
            color: #772222;
            width:100%; 
        }

        div.section.header {
            margin-left: -20px;
            margin-right: -10px;
            background-image:url("/images/slide-bg-3.jpg");
            background-position-y:-200px;
            padding:0!important;
            height: 210px;
            margin-top:6px
        }

        div.section.header .container {
            display:flex;
            align-items:center;
            justify-content:center;
            height:30%
        }

        div.section.header h1 {
            margin-top:280px;
            font: normal 40px Open Sans !important;
            font-weight: bold;
            color: white;
            max-width:90%
        }


    </style>


  </head>


  <body id="loginBodyId" class="claro"  bgcolor="white" style="font-size:medium;background-size:cover" >


     <div class="section header">
        <div class="container">
            <h1> Login Page </h1>
        </div>
     </div>


     <div class="DivLogin">

        <div>  <span class="loginTitleTxt"> Login </span>  </div>  
        <hr class="loginSeperator"></hr>

        <div class="loginForm">

            <div class="loginTable">
                <div class="loginRow">
                   <div class="loginCellLeft">
                       <label for="userId">Username:</label>
                   </div>
                   <div class="loginCellRight">
                       <input type="text" trim="true" dojoType="dijit.form.TextBox" value="" name="login" id="userId"  />
                   </div>
                </div>

                <div class="loginRow">
                   <div class="loginCellLeft">
                       <label for="passwordId">Password:</label>
                   </div>
                   <div class="loginCellRight">
                       <input type="password" trim="true" dojoType="dijit.form.TextBox" value="" name="password" id="passwordId"/>
                   </div>
                </div>

                <div class="loginRow">
                   <div class="loginCellLeft">
                        <label for="domainId">Domain:</label>
                   </div>

                   <div class="loginCellRight">
                        <select  id="domainId" autocomplete="true" dojoType="dijit.form.ComboBox"  value="Default">
                            <option selected="selected">default</option>
                        </select>
                   </div>
                </div>


                <div class="loginRow">
                   <div class="loginCellLeft">

                   </div>

                <div class="loginCellRight">
                        <button dojoType="dijit.form.Button" onClick="verifyLogin()">Login</button>                
                   </div>
                </div>
                                <div class="loginRow">
                                  <div class="loginCellEmpty">

                                   </div>
                                </div>

            </div>    <!-- End loginTable -->

            <label class="loginMsgLabel" id="msgId"></label>

        </div>  <!-- End loginForm -->

     </div>
</body>
</html>

谢谢

位置

【问题讨论】：

标签： javascript php dojo

【解决方案1】：

通常，错误dojo/parser::parse() error Error: Unable to resolve constructor for: 'dijit.form.TextBox' 表示依赖项存在问题。您能否检查您的 login.js 以确保您正确引用了 TexBox，并尝试将该导入语句向上移动，看看会发生什么？

【讨论】：

【解决方案2】：

javascript“login.js”是优化后的脚本，由与上面的配置文件一起编译时构建 Dojo 的脚本。我有试图重新排序 TextBox 但没有运气。我认为这可能是与 Dojo 配置文件的配置有关。谢谢，

位置

【讨论】：

【解决方案3】：

我发现了问题。使用新的 dojo 语法，它在 data-dojo-type 指定模块（“dijit/form/TextBox”）。我的代码还在使用旧语法（“'dijit.form.TextBox”）。在优化的登录脚本中，模块 TextBox 定义如下 'dijit/form/TextBox':function(){ 这就是为什么我收到错误消息“无法解析构造函数：'dijit.form.TextBox'”

位置

【讨论】：